Passwordless | Move sign in with password instead option

cypress/integration/ete/sign_in_passcode.8.cy.ts

@@ -171,7 +171,42 @@ describe('Sign In flow, with passcode', () => {
 				});
 		});
 
-		it('selects password option to sign in', () => {
+		it('selects password option to sign in from initial sign in page', () => {
+			cy
+				.createTestUser({
+					isUserEmailValidated: true,
+				})
+				?.then(({ emailAddress, finalPassword }) => {
+					cy.visit(`/signin`);
+					cy.get('input[name=email]').type(emailAddress);
+
+					cy.contains('Sign in with a password instead').click();
+
+					// password page
+					cy.url().should('include', '/signin/password');
+					cy.get('input[name=email]').should('have.value', emailAddress);
+					cy.get('input[name=password]').type(finalPassword);
+					cy.get('[data-cy="main-form-submit-button"]').click();
+					cy.url().should('include', 'https://m.code.dev-theguardian.com/');
+				});
+		});
+
+		it('selects password option to sign in from the initial sign in page and show correct error page on incorrect password', () => {
+			const emailAddress = randomMailosaurEmail();
+			cy.visit(`/signin`);
+			cy.get('input[name=email]').type(emailAddress);
+			cy.contains('Sign in with a password instead').click();
+
+			// password page
+			cy.url().should('include', '/signin/password');
+			cy.get('input[name=email]').should('have.value', emailAddress);
+			cy.get('input[name=password]').type(randomPassword());
+			cy.get('[data-cy="main-form-submit-button"]').click();
+			cy.url().should('include', '/signin/password');
+			cy.contains('Email and password don’t match');
+		});
+
+		it('selects password option to sign in from passcode page', () => {
 			cy
 				.createTestUser({
 					isUserEmailValidated: true,
@@ -184,7 +219,7 @@ describe('Sign In flow, with passcode', () => {
 					// passcode page
 					cy.url().should('include', '/signin/code');
 					cy.contains('Enter your one-time code');
-					cy.contains('Sign in with password instead').click();
+					cy.contains('sign in with a password instead').click();
 
 					// password page
 					cy.url().should('include', '/signin/password');
@@ -195,15 +230,15 @@ describe('Sign In flow, with passcode', () => {
 				});
 		});
 
-		it('selects password option to sign in and show correct error page on incorrect password', () => {
+		it('selects password option to sign in from passcode page and show correct error page on incorrect password', () => {
 			const emailAddress = randomMailosaurEmail();
 			cy.visit(`/signin?usePasscodeSignIn=true`);
 			cy.get('input[name=email]').type(emailAddress);
 			cy.get('[data-cy="main-form-submit-button"]').click();
 			// passcode page
 			cy.url().should('include', '/signin/code');
 			cy.contains('Enter your one-time code');
-			cy.contains('Sign in with password instead').click();
+			cy.contains('sign in with a password instead').click();
 
 			// password page
 			cy.url().should('include', '/signin/password');

src/client/components/EmailSentInformationBox.stories.tsx

@@ -83,6 +83,22 @@ export const WithNoAccountInfo = () => {
 };
 WithNoAccountInfo.storyName = 'with noAccountInfo';
 
+export const WithShowSignInWithPasswordOption = () => {
+	return (
+		<EmailSentInformationBox
+			setRecaptchaErrorContext={() => {}}
+			setRecaptchaErrorMessage={() => {}}
+			changeEmailPage="#"
+			email="[email protected]"
+			resendEmailAction="#"
+			noAccountInfo
+			showSignInWithPasswordOption
+		/>
+	);
+};
+WithShowSignInWithPasswordOption.storyName =
+	'with showSignInWithPasswordOption';
+
 export const WithTimer = () => {
 	return (
 		<EmailSentInformationBox

src/client/components/EmailSentInformationBox.tsx

@@ -31,6 +31,7 @@ type EmailSentInformationBoxProps = Pick<
 	>;
 	setRecaptchaErrorMessage: React.Dispatch<React.SetStateAction<string>>;
 	sendAgainTimerInSeconds?: number;
+	showSignInWithPasswordOption?: boolean;
 };
 
 const sendAgainFormWrapperStyles = css`
@@ -50,6 +51,7 @@ export const EmailSentInformationBox = ({
 	queryString,
 	shortRequestId,
 	sendAgainTimerInSeconds,
+	showSignInWithPasswordOption,
 }: EmailSentInformationBoxProps) => {
 	const timer = useCountdownTimer(sendAgainTimerInSeconds || 0);
 
@@ -89,12 +91,20 @@ export const EmailSentInformationBox = ({
 				)}
 				{changeEmailPage && (
 					<>
-						, or{' '}
+						,{!showSignInWithPasswordOption ? <> or </> : <> </>}
 						<ThemedLink href={`${changeEmailPage}${queryString}`}>
 							try another address
 						</ThemedLink>
 					</>
 				)}
+				{showSignInWithPasswordOption && (
+					<>
+						, or{' '}
+						<ThemedLink href={`${buildUrl('/signin/password')}${queryString}`}>
+							sign in with a password instead
+						</ThemedLink>
+					</>
+				)}
 				.
 			</InformationBoxText>
 			{noAccountInfo && (

src/client/components/PasscodeInput.tsx

@@ -21,6 +21,7 @@ export const PasscodeInput = ({
 	passcode = '',
 	fieldErrors,
 	formRef,
+	autoFocus,
 }: PasscodeInputProps) => {
 	/**
 	 * In gateway we normally avoid using client side javascript, but in this case
@@ -103,6 +104,7 @@ export const PasscodeInput = ({
 				value={input.value}
 				onChange={onChange}
 				onPaste={onPaste}
+				autoFocus={autoFocus}
 			/>
 		</div>
 	);

src/client/components/PasswordInput.tsx

@@ -27,6 +27,7 @@ export type PasswordInputProps = {
 	supporting?: string;
 	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	autoComplete?: PasswordAutoComplete;
+	autoFocus?: boolean;
 };
 
 // hide the microsoft password reveal eye if we're using
@@ -171,6 +172,7 @@ export const PasswordInput = ({
 	onChange,
 	displayEye = true,
 	autoComplete,
+	autoFocus,
 }: PasswordInputProps) => {
 	const [passwordVisible, setPasswordVisible] = useState(false);
 	const [fieldIsFocused, setFieldIsFocused] = useState(false);
@@ -203,6 +205,7 @@ export const PasswordInput = ({
 						hideMsReveal(displayEye),
 					]}
 					id="password"
+					autoFocus={autoFocus}
 				/>
 
 				{displayEye && (

src/client/pages/EmailSent.tsx

@@ -1,9 +1,4 @@
-import React, {
-	PropsWithChildren,
-	ReactNode,
-	useState,
-	useEffect,
-} from 'react';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
 import { MainBodyText } from '@/client/components/MainBodyText';
 import { MinimalLayout } from '@/client/layouts/MinimalLayout';
 import { EmailSentInformationBox } from '@/client/components/EmailSentInformationBox';
@@ -44,18 +39,6 @@ export const EmailSent = ({
 	const [recaptchaErrorContext, setRecaptchaErrorContext] =
 		useState<ReactNode>(null);
 
-	// autofocus the code input field when the page loads
-	useEffect(() => {
-		if (typeof window !== 'undefined') {
-			const codeInput: HTMLInputElement | null =
-				window.document.querySelector('input[name="code"]');
-
-			if (codeInput) {
-				codeInput.focus();
-			}
-		}
-	}, []);
-
 	return (
 		<MinimalLayout
 			shortRequestId={shortRequestId}

src/client/pages/PasscodeEmailSent.tsx

@@ -7,8 +7,6 @@ import { MinimalLayout } from '@/client/layouts/MinimalLayout';
 import { PasscodeInput } from '@/client/components/PasscodeInput';
 import { EmailSentInformationBox } from '@/client/components/EmailSentInformationBox';
 import { EmailSentProps } from '@/client/pages/EmailSent';
-import { buildUrl } from '@/shared/lib/routeUtils';
-import ThemedLink from '@/client/components/ThemedLink';
 
 type TextType = 'verification' | 'security' | 'generic' | 'signin';
 
@@ -137,18 +135,6 @@ export const PasscodeEmailSent = ({
 		}
 	}, [timeUntilTokenExpiry, expiredPage, queryString]);
 
-	// autofocus the code input field when the page loads
-	useEffect(() => {
-		if (typeof window !== 'undefined') {
-			const codeInput: HTMLInputElement | null =
-				window.document.querySelector('input[name="code"]');
-
-			if (codeInput) {
-				codeInput.focus();
-			}
-		}
-	}, []);
-
 	return (
 		<MinimalLayout
 			shortRequestId={shortRequestId}
@@ -181,15 +167,9 @@ export const PasscodeEmailSent = ({
 					fieldErrors={fieldErrors}
 					label={text.passcodeInputLabel}
 					formRef={formRef}
+					autoFocus
 				/>
 			</MainForm>
-			{showSignInWithPasswordOption && (
-				<MainBodyText>
-					<ThemedLink href={`${buildUrl('/signin/password')}${queryString}`}>
-						Sign in with password instead
-					</ThemedLink>
-				</MainBodyText>
-			)}
 			<EmailSentInformationBox
 				setRecaptchaErrorContext={setRecaptchaErrorContext}
 				setRecaptchaErrorMessage={setRecaptchaErrorMessage}
@@ -203,6 +183,7 @@ export const PasscodeEmailSent = ({
 				shortRequestId={shortRequestId}
 				noAccountInfo={noAccountInfo}
 				sendAgainTimerInSeconds={sendAgainTimerInSeconds}
+				showSignInWithPasswordOption={showSignInWithPasswordOption}
 			/>
 		</MinimalLayout>
 	);

src/client/pages/SignIn.tsx

@@ -38,6 +38,7 @@ export type SignInProps = {
 	// flag to determine whether to show the passcode view or password view
 	usePasscodeSignIn?: boolean;
 	hideSocialButtons?: boolean;
+	focusPasswordField?: boolean;
 };
 
 const resetPassword = css`
@@ -145,7 +146,10 @@ export const SignIn = ({
 	shortRequestId,
 	usePasscodeSignIn = false,
 	hideSocialButtons = false,
+	focusPasswordField = false,
 }: SignInProps) => {
+	const [currentEmail, setCurrentEmail] = React.useState(email);
+
 	// status of the OTP checkbox
 	const selectedView = usePasscodeSignIn ? 'passcode' : 'password';
 
@@ -183,7 +187,7 @@ export const SignIn = ({
 					queryParams,
 				)}
 				submitButtonText={
-					selectedView === 'passcode' ? 'Continue with email' : 'Sign in'
+					selectedView === 'passcode' ? 'Sign in with email' : 'Sign in'
 				}
 				recaptchaSiteKey={recaptchaSiteKey}
 				formTrackingName={formTrackingName}
@@ -193,10 +197,17 @@ export const SignIn = ({
 				hasGuardianTerms={!isJobs && socialSigninBlocked}
 				hasJobsTerms={isJobs && socialSigninBlocked}
 			>
-				<EmailInput defaultValue={email} />
+				<EmailInput
+					defaultValue={email}
+					onChange={(e) => setCurrentEmail(e.target.value)}
+				/>
 				{selectedView === 'password' && (
 					<>
-						<PasswordInput label="Password" autoComplete="current-password" />
+						<PasswordInput
+							label="Password"
+							autoComplete="current-password"
+							autoFocus={!!(focusPasswordField && email)}
+						/>
 						<ThemedLink
 							href={buildUrlWithQueryParams('/reset-password', {}, queryParams)}
 							cssOverrides={resetPassword}
@@ -212,6 +223,27 @@ export const SignIn = ({
 					)
 				}
 			</MainForm>
+			{
+				// Hidden input to determine whether passcode view is selected
+				selectedView === 'passcode' && (
+					<>
+						<MainBodyText>
+							<ThemedLink
+								href={buildUrlWithQueryParams(
+									'/signin/password',
+									{},
+									queryParams,
+									{
+										signInEmail: currentEmail,
+									},
+								)}
+							>
+								Sign in with a password instead
+							</ThemedLink>
+						</MainBodyText>
+					</>
+				)
+			}
 			{!isReauthenticate && (
 				<>
 					<Divider size="full" cssOverrides={divider} />

src/client/pages/SignInPage.tsx

@@ -21,7 +21,7 @@ export const SignInPage = ({
 		queryParams,
 		recaptchaConfig,
 	} = clientState;
-	const { email, formError } = pageData;
+	const { email, formError, focusPasswordField } = pageData;
 	const { error: pageError } = globalMessage;
 	const { recaptchaSiteKey } = recaptchaConfig;
 
@@ -31,7 +31,7 @@ export const SignInPage = ({
 	// determines if the passcode view of the sign in page should be shown
 	const usePasscodeSignIn: boolean = (() => {
 		// if the forcePasswordPage flag is set, we should always show the password view
-		// for example when the user clicks "sign in with password instead"
+		// for example when the user clicks "sign in with a password instead"
 		if (forcePasswordPage) {
 			return false;
 		}
@@ -62,6 +62,7 @@ export const SignInPage = ({
 			shortRequestId={clientState.shortRequestId}
 			usePasscodeSignIn={usePasscodeSignIn}
 			hideSocialButtons={hideSocialButtons}
+			focusPasswordField={focusPasswordField}
 		/>
 	);
 };

src/server/lib/queryParams.ts

@@ -53,6 +53,7 @@ export const parseExpressQueryParams = (
 		maxAge,
 		useOktaClassic,
 		usePasswordSignIn,
+		signInEmail,
 	}: Record<keyof QueryParams, string | undefined>, // parameters from req.query
 	// some parameters may be manually passed in req.body too,
 	// generally for tracking purposes
@@ -78,6 +79,7 @@ export const parseExpressQueryParams = (
 		maxAge: stringToNumber(maxAge),
 		useOktaClassic: isStringBoolean(useOktaClassic),
 		usePasswordSignIn: isStringBoolean(usePasswordSignIn),
+		signInEmail,
 	};
 };