create a readonly email input component for the iframed signin and register pages

style amends to the iframed pages to make them more like the supporter onboarding designs (more like support-frontend style which is currently the only consumer of the iframed routes)

Author: Richard Bangay

src/client/components/IframeThemedEmailInput.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react';
+import React from 'react';
+import IframeThemedEmailInput from '@/client/components/IframeThemedEmailInput';
+
+export default {
+	title: 'Components/IframeThemedEmailInput',
+	component: IframeThemedEmailInput,
+	parameters: {
+		layout: 'padded',
+	},
+} as Meta;
+
+export const Default = () => {
+	return <IframeThemedEmailInput label="Themed text input" />;
+};
+Default.storyName = 'default';

src/client/components/IframeThemedEmailInput.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextInput, TextInputProps } from '@guardian/source/react-components';
+
+const textInputTheme = {
+	textLabel: 'var(--color-input-label)',
+	textUserInput: 'var(--color-input-text)',
+	border: 'var(--color-input-border)',
+	backgroundInput: 'var(--color-input-highlight)',
+};
+
+const IframeThemedEmailInput = (props: Omit<TextInputProps, 'theme'>) => {
+	return <TextInput {...props} theme={textInputTheme} />;
+};
+
+export default IframeThemedEmailInput;

src/client/layouts/MinimalLayout.tsx

@@ -12,7 +12,7 @@ import useClientState from '@/client/lib/hooks/useClientState';
 import { SuccessSummary } from '@guardian/source-development-kitchen/react-components';
 
 import locations from '@/shared/lib/locations';
-import { DarkTheme, LightTheme, Theme } from '@/client/styles/Theme';
+import { IframeLightTheme, Theme } from '@/client/styles/Theme';
 import {
 	mainSectionStyles,
 	successMessageStyles,
@@ -40,7 +40,7 @@ interface MinimalLayoutProps {
 	errorContext?: React.ReactNode;
 	showErrorReportUrl?: boolean;
 	shortRequestId?: string;
-	overrideTheme?: 'light' | 'dark';
+	overrideTheme?: 'iframe-light';
 }
 
 const mainStyles = (wide: boolean) => css`
@@ -91,11 +91,8 @@ export const MinimalLayout = ({
 	const errorMessage = errorOverride || error;
 
 	const getTheme = () => {
-		if (overrideTheme === 'light') {
-			return <LightTheme />;
-		}
-		if (overrideTheme === 'dark') {
-			return <DarkTheme />;
+		if (overrideTheme === 'iframe-light') {
+			return <IframeLightTheme />;
 		}
 		return <Theme />;
 	};

src/client/pages/IframedPasscodeEmailSent.tsx

@@ -172,7 +172,7 @@ export const IframedPasscodeEmailSent = ({
 			shortRequestId={shortRequestId}
 			showGuardianHeader={false}
 			subduedHeadingStyle={true}
-			overrideTheme="light"
+			overrideTheme="iframe-light"
 		>
 			{email ? (
 				<MainBodyText>

src/client/pages/IframedRegisterWithEmail.tsx

@@ -10,6 +10,8 @@ import ThemedLink from '@/client/components/ThemedLink';
 import locations from '@/shared/lib/locations';
 import { SUPPORT_EMAIL } from '@/shared/model/Configuration';
 import { PasscodeErrors } from '@/shared/model/Errors';
+import IframeThemedEmailInput from '../components/IframeThemedEmailInput';
+import { disableAutofillBackground } from '../styles/Shared';
 
 type RegisterWithEmailProps = RegistrationProps & {
 	shortRequestId?: string;
@@ -58,7 +60,7 @@ export const IframedRegisterWithEmail = ({
 			errorOverride={pageError}
 			showGuardianHeader={false}
 			subduedHeadingStyle={true}
-			overrideTheme="light"
+			overrideTheme="iframe-light"
 		>
 			<MainForm
 				formAction={buildUrlWithQueryParams('/register', {}, queryParams)}
@@ -75,11 +77,24 @@ export const IframedRegisterWithEmail = ({
 				primaryTermsPosition={false}
 				shortRequestId={shortRequestId}
 			>
-				<EmailInput
-					label="Email address"
-					defaultValue={email}
-					autoComplete="off"
-				/>
+				{email ? (
+					<IframeThemedEmailInput
+						label="Email address"
+						name="email"
+						type="email"
+						autoComplete="email"
+						defaultValue={email}
+						cssOverrides={disableAutofillBackground}
+						readOnly
+						aria-readonly
+					/>
+				) : (
+					<EmailInput
+						label="Email address"
+						defaultValue={email}
+						autoComplete="off"
+					/>
+				)}
 			</MainForm>
 		</MinimalLayout>
 	);

src/client/pages/IframedSignIn.tsx

@@ -21,6 +21,8 @@ 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 IframeThemedEmailInput from '../components/IframeThemedEmailInput';
+import { disableAutofillBackground } from '../styles/Shared';
 
 export type IframedSignInProps = {
 	queryParams: QueryParams;
@@ -158,7 +160,7 @@ export const IframedSignIn = ({
 			shortRequestId={shortRequestId}
 			showGuardianHeader={false}
 			subduedHeadingStyle={true}
-			overrideTheme="light"
+			overrideTheme="iframe-light"
 		>
 			{/* AuthProviderButtons component with show boolean */}
 			{!hideSocialButtons &&
@@ -191,7 +193,21 @@ export const IframedSignIn = ({
 					name="isCombinedSigninAndRegisterFlow"
 					value="combined"
 				/>
-				<EmailInput label="Email address" defaultValue={email} />
+				{email ? (
+					<IframeThemedEmailInput
+						label="Email address"
+						name="email"
+						type="email"
+						autoComplete="email"
+						defaultValue={email}
+						cssOverrides={disableAutofillBackground}
+						readOnly
+						aria-readonly
+					/>
+				) : (
+					<EmailInput label="Email address" defaultValue={email} />
+				)}
+
 				<input type="hidden" name="passcode" value="passcode" />
 			</MainForm>
 		</MinimalLayout>

src/client/styles/Theme.tsx

@@ -72,6 +72,13 @@ const darkTheme = css`
 	--color-alert-success: ${palette.success[500]};
 `;
 
+const iframeLightTheme = css`
+	${lightTheme}
+	--color-heading: ${palette.neutral[7]};
+	--color-input-text: ${palette.neutral[7]};
+	--color-input-label: ${palette.neutral[7]};
+`;
+
 export const Theme = () => {
 	return (
 		<Global
@@ -101,28 +108,12 @@ export const Theme = () => {
 	);
 };
 
-export const LightTheme = () => {
-	return (
-		<Global
-			styles={css`
-				:root {
-					${lightTheme}
-				}
-
-				body {
-					background: var(--color-background);
-				}
-			`}
-		/>
-	);
-};
-
-export const DarkTheme = () => {
+export const IframeLightTheme = () => {
 	return (
 		<Global
 			styles={css`
 				:root {
-					${darkTheme}
+					${iframeLightTheme}
 				}
 
 				body {

src/server/routes/register.ts

@@ -112,6 +112,7 @@ router.get(
 const handleRegisterByPasscode = (
 	req: Request,
 	res: ResponseWithRequestState,
+	overrideEmailAddress?: string | null,
 ): string => {
 	const state = res.locals;
 	const { error, error_description } = state.queryParams;
@@ -121,7 +122,7 @@ const handleRegisterByPasscode = (
 		pageTitle: 'Register With Email',
 		requestState: mergeRequestState(state, {
 			pageData: {
-				email: readEmailCookie(req),
+				email: overrideEmailAddress || readEmailCookie(req),
 			},
 			globalMessage: {
 				error: getErrorMessageFromQueryParams(error, error_description),
@@ -143,7 +144,15 @@ router.get(
 	'/iframed/register/email',
 	redirectIfLoggedIn,
 	(req: Request, res: ResponseWithRequestState) => {
-		const html = handleRegisterByPasscode(req, res);
+		const params = new URLSearchParams(
+			req.url.substring(req.url.indexOf('?'), req.url.length),
+		);
+		const prepopulatedEmailParamEncoded = params.get('prepopulateEmail');
+		const prepopulatedEmail = prepopulatedEmailParamEncoded
+			? decodeURIComponent(prepopulatedEmailParamEncoded)
+			: null;
+
+		const html = handleRegisterByPasscode(req, res, prepopulatedEmail);
 		res.type('html').send(html);
 	},
 );

src/server/routes/signIn.ts

@@ -98,6 +98,7 @@ export const getErrorMessageFromQueryParams = (
 const handleSigninRender = async (
 	req: Request,
 	res: ResponseWithRequestState,
+	overrideEmailAddress?: string | null,
 ): Promise<string> => {
 	const state = res.locals;
 	const { encryptedEmail, error, error_description, signInEmail } =
@@ -115,7 +116,7 @@ const handleSigninRender = async (
 	const html = renderer(getPath, {
 		requestState: mergeRequestState(state, {
 			pageData: {
-				email,
+				email: overrideEmailAddress || email,
 				focusPasswordField: !!email,
 			},
 			globalMessage: {
@@ -140,7 +141,15 @@ router.get(
 	'/iframed/signin',
 	redirectIfLoggedIn,
 	handleAsyncErrors(async (req: Request, res: ResponseWithRequestState) => {
-		const html = await handleSigninRender(req, res);
+		const params = new URLSearchParams(
+			req.url.substring(req.url.indexOf('?'), req.url.length),
+		);
+		const prepopulatedEmailParamEncoded = params.get('prepopulateEmail');
+		const prepopulatedEmail = prepopulatedEmailParamEncoded
+			? decodeURIComponent(prepopulatedEmailParamEncoded)
+			: null;
+
+		const html = await handleSigninRender(req, res, prepopulatedEmail);
 		return res.type('html').send(html);
 	}),
 );