feat(SignIn): update sign in page for passcode functionality

src/client/pages/SignIn.stories.tsx

@@ -125,3 +125,23 @@ export const IsReauthenticate = (args: SignInProps) => (
 IsReauthenticate.story = {
 	name: 'showing /reauthenticate page',
 };
+
+export const WithPasscode = (args: SignInProps) => (
+	<SignIn {...{ ...args, usePasscodeDefaultChecked: true }} />
+);
+WithPasscode.story = {
+	name: 'with passcode checkbox checked',
+};
+
+export const WithPasscodeError = (args: SignInProps) => (
+	<SignIn
+		{...{
+			...args,
+			usePasscodeDefaultChecked: true,
+			pageError: SignInErrors.PASSCODE_EXPIRED,
+		}}
+	/>
+);
+WithPasscode.story = {
+	name: 'with passcode checkbox checked',
+};

src/client/pages/SignIn.tsx

@@ -23,6 +23,7 @@ import locations from '@/shared/lib/locations';
 import { SUPPORT_EMAIL } from '@/shared/model/Configuration';
 import { MinimalLayout } from '@/client/layouts/MinimalLayout';
 import ThemedLink from '@/client/components/ThemedLink';
+import { Checkbox } from '@guardian/source/react-components';
 
 export type SignInProps = {
 	queryParams: QueryParams;
@@ -34,6 +35,8 @@ export type SignInProps = {
 	recaptchaSiteKey: string;
 	isReauthenticate?: boolean;
 	shortRequestId?: string;
+	// If true, the OTP checkbox will be checked by default
+	usePasscodeDefaultChecked?: boolean;
 };
 
 const resetPassword = css`
@@ -90,6 +93,21 @@ const getErrorContext = (
 				<a href={locations.SUPPORT_EMAIL_MAILTO}>{SUPPORT_EMAIL}</a>
 			</>
 		);
+	} else if (error === SignInErrors.PASSCODE_EXPIRED) {
+		return (
+			<>
+				<div>Please request a new one-time code to sign in.</div>
+				<br />
+				<div>
+					If you are still having trouble, please contact our customer service
+					team at{' '}
+					<ThemedLink href={locations.SUPPORT_EMAIL_MAILTO}>
+						{SUPPORT_EMAIL}
+					</ThemedLink>
+					.
+				</div>
+			</>
+		);
 	}
 };
 
@@ -116,6 +134,27 @@ const showAuthProviderButtons = (
 	}
 };
 
+const OTPCheckbox = ({
+	checked = false,
+	onChange,
+}: {
+	checked?: boolean;
+	onChange: React.ChangeEventHandler<HTMLInputElement>;
+}) => {
+	return (
+		<Checkbox
+			label="Request a one-time code to sign in"
+			name="passcode"
+			id="passcode"
+			theme={{
+				textLabel: `var(--color-input-text)`,
+			}}
+			defaultChecked={checked}
+			onChange={onChange}
+		/>
+	);
+};
+
 export const SignIn = ({
 	email,
 	pageError,
@@ -124,7 +163,12 @@ export const SignIn = ({
 	recaptchaSiteKey,
 	isReauthenticate = false,
 	shortRequestId,
+	usePasscodeDefaultChecked = false,
 }: SignInProps) => {
+	const [usePasscode, setUsePasscode] = React.useState(
+		usePasscodeDefaultChecked,
+	);
+
 	const formTrackingName = 'sign-in';
 
 	// The page level error is equivalent to this enum if social signin has been blocked.
@@ -157,7 +201,7 @@ export const SignIn = ({
 					{},
 					queryParams,
 				)}
-				submitButtonText="Sign in"
+				submitButtonText={usePasscode ? 'Request one-time code' : 'Sign in'}
 				recaptchaSiteKey={recaptchaSiteKey}
 				formTrackingName={formTrackingName}
 				disableOnSubmit
@@ -167,13 +211,21 @@ export const SignIn = ({
 				hasJobsTerms={isJobs && socialSigninBlocked}
 			>
 				<EmailInput defaultValue={email} />
-				<PasswordInput label="Password" autoComplete="current-password" />
-				<ThemedLink
-					href={buildUrlWithQueryParams('/reset-password', {}, queryParams)}
-					cssOverrides={resetPassword}
-				>
-					Reset password
-				</ThemedLink>
+				{!usePasscode && (
+					<>
+						<PasswordInput label="Password" autoComplete="current-password" />
+						<ThemedLink
+							href={buildUrlWithQueryParams('/reset-password', {}, queryParams)}
+							cssOverrides={resetPassword}
+						>
+							Reset password
+						</ThemedLink>
+					</>
+				)}
+				<OTPCheckbox
+					checked={usePasscode}
+					onChange={(event) => setUsePasscode(event.target.checked)}
+				/>
 			</MainForm>
 			{!isReauthenticate && (
 				<>