feat(mosaic): add the remaining sign-in code step views

.changeset/mosaic-sign-in-code-steps.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/blocks/verification/verification-code.tsx

@@ -2,6 +2,7 @@ import { useMergeRefs } from '@floating-ui/react';
 import type { FormEvent, ReactNode, Ref } from 'react';
 import { useId } from 'react';
 
+import { Banner } from '../../components/banner';
 import { Button, SubmitButton } from '../../components/button';
 import { Card } from '../../components/card';
 import { Field } from '../../components/field';
@@ -34,6 +35,8 @@ interface VerificationCodeProps {
   globalErrorMessage?: string;
   isPending?: boolean;
   resend?: VerificationCodeResend;
+  identity?: ReactNode;
+  notice?: string;
   onValueChange: (value: string) => void;
   onComplete?: (value: string) => void;
   onSubmit: () => void;
@@ -49,6 +52,8 @@ export function VerificationCode({
   globalErrorMessage,
   isPending = false,
   resend,
+  identity,
+  notice,
   onValueChange,
   onComplete,
   onSubmit,
@@ -71,6 +76,7 @@ export function VerificationCode({
       <Card.Header>
         <Card.Title>{messages.title}</Card.Title>
         <Card.Description>{messages.description}</Card.Description>
+        {identity}
       </Card.Header>
       <Card.Banner
         role='alert'
@@ -122,6 +128,11 @@ export function VerificationCode({
             ) : null}
           </Field.Root>
         </Form>
+        {notice ? (
+          <Banner.Root color='warning'>
+            <Banner.Label>{notice}</Banner.Label>
+          </Banner.Root>
+        ) : null}
       </Card.Content>
       <Card.Footer>
         {onCancel ? (

packages/mosaic/src/features/sign-in/__tests__/sign-in.utils.test.ts

@@ -1,7 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
+import { signInMessages } from '../sign-in.messages';
 import type { SignInStep } from '../sign-in.types';
-import { httpsUrl, stepKey } from '../sign-in.utils';
+import { codeCopy, codeIdentity, codeNotice, codeSecondaryAction, httpsUrl, stepKey } from '../sign-in.utils';
 
 describe('stepKey', () => {
   it('keys each step by its kind and the variant that changes its copy', () => {
@@ -41,3 +42,65 @@ describe('httpsUrl', () => {
     expect(httpsUrl(undefined)).toBeUndefined();
   });
 });
+
+describe('code step copy', () => {
+  const m = signInMessages;
+
+  it('names the alternative phone channel in the title and offers SMS instead', () => {
+    const step = { kind: 'code', purpose: 'first-factor', channel: 'phone', provider: 'WhatsApp' } as const;
+
+    expect(codeCopy(step, m, 'Acme').title).toBe('Check your WhatsApp');
+    expect(codeSecondaryAction(step, m, { onCancel: () => undefined, onBack: () => undefined }).label).toBe(
+      'Send code via SMS instead',
+    );
+  });
+
+  it('shows an editable identifier on its own line before the second factor', () => {
+    const step = { kind: 'code', purpose: 'first-factor', channel: 'phone', identifier: '+1******0123' } as const;
+
+    expect(codeIdentity(step, m)).toEqual({ identifier: '+1******0123', editLabel: 'Edit phone number' });
+    expect(codeCopy(step, m, 'Acme').description).toBe('Enter the verification code to continue to Acme');
+  });
+
+  it('names the identifier in the description when it cannot be edited', () => {
+    const step = { kind: 'code', purpose: 'second-factor', channel: 'email', identifier: 'jane@acme.com' } as const;
+
+    expect(codeIdentity(step, m).identifier).toBeUndefined();
+    expect(codeCopy(step, m, 'Acme').description).toBe('Enter the verification code sent to jane@acme.com');
+  });
+
+  it('keeps the identifier in the description where the copy already names it', () => {
+    const step = { kind: 'code', purpose: 'reset-password', channel: 'email', identifier: 'jane@acme.com' } as const;
+
+    expect(codeIdentity(step, m).identifier).toBeUndefined();
+    expect(codeCopy(step, m, 'Acme').description).toContain('jane@acme.com');
+  });
+
+  it('warns on a new device and on an SSO bypass', () => {
+    expect(codeNotice({ kind: 'code', purpose: 'client-trust', channel: 'email' }, m)).toBe(m.clientTrust.notice);
+    expect(codeNotice({ kind: 'code', purpose: 'sso-bypass', channel: 'email' }, m)).toBe(m.ssoBypass.notice);
+    expect(codeNotice({ kind: 'code', purpose: 'first-factor', channel: 'email' }, m)).toBeUndefined();
+  });
+
+  it('lets a phone being verified be edited and offers no other method', () => {
+    const step = { kind: 'code', purpose: 'verify-phone', channel: 'phone', identifier: '+1 555 555 0123' } as const;
+
+    expect(codeCopy(step, m, 'Acme').title).toBe('Verify your phone');
+    expect(codeIdentity(step, m).identifier).toBe('+1 555 555 0123');
+    expect(
+      codeSecondaryAction(step, m, { onCancel: () => undefined, onBack: () => undefined }).onClick,
+    ).toBeUndefined();
+  });
+
+  it('goes back from a second factor when there is no other method', () => {
+    const onBack = () => undefined;
+    const onCancel = () => undefined;
+    const step = { kind: 'code', purpose: 'second-factor', channel: 'phone' } as const;
+
+    expect(codeSecondaryAction(step, m, { onBack })).toEqual({ label: 'Back', onClick: onBack });
+    expect(codeSecondaryAction(step, m, { onCancel, onBack })).toEqual({
+      label: 'Use another method',
+      onClick: onCancel,
+    });
+  });
+});

packages/mosaic/src/features/sign-in/index.ts

@@ -2,7 +2,7 @@ export { SignInView } from './sign-in.view';
 export type {
   SignInActionBlockedDetails,
   SignInFactor,
-  SignInSocialProvider,
+  SignInProvider,
   SignInStep,
   SignInSubmitEvent,
   SignInValues,

packages/mosaic/src/features/sign-in/sign-in.messages.ts

@@ -78,28 +78,56 @@ export const signInMessages = {
   },
   emailCode: {
     title: 'Check your email',
-    description: 'Enter the verification code sent to {identifier}',
+    description: 'Enter the verification code to continue to {applicationName}',
+    descriptionSentTo: 'Enter the verification code sent to {identifier}',
     label: 'Verification code',
     resendText: 'Didn’t receive a code?',
     resend: 'Resend',
     resendCountdown: 'Resend ({seconds})',
   },
   phoneCode: {
     title: 'Check your phone',
-    description: 'Enter the verification code sent to {identifier}',
+    description: 'Enter the verification code to continue to {applicationName}',
+    descriptionSentTo: 'Enter the verification code sent to {identifier}',
     label: 'Verification code',
     resendText: 'Didn’t receive a code?',
     resend: 'Resend',
     resendCountdown: 'Resend ({seconds})',
   },
   phoneCodeMfa: {
     title: 'Check your phone',
-    description: 'To continue, enter the verification code sent to {identifier}',
+    description: 'Enter the verification code sent to your phone',
+    descriptionSentTo: 'Enter the verification code sent to {identifier}',
+    label: 'Verification code',
+    resendText: 'Didn’t receive a code?',
+    resend: 'Resend',
+    resendCountdown: 'Resend ({seconds})',
+  },
+  alternativePhoneCode: {
+    title: 'Check your {provider}',
+    description: 'Enter the verification code to continue to {applicationName}',
+    descriptionSentTo: 'Enter the verification code sent to {identifier}',
     label: 'Verification code',
+    useSms: 'Send code via SMS instead',
     resendText: 'Didn’t receive a code?',
     resend: 'Resend',
     resendCountdown: 'Resend ({seconds})',
   },
+  enterpriseSso: {
+    continue: 'Continue with SSO',
+    pending: 'Redirecting to SSO',
+    bypass: 'Can’t use SSO?',
+  },
+  enterpriseConnections: {
+    title: 'Choose an account',
+    description: 'Select an enterprise account to continue.',
+  },
+  ssoBypass: {
+    notice: 'Your organization requires single sign-on. Continuing without it is recorded.',
+  },
+  clientTrust: {
+    notice: 'You’re signing in from a new device. We’re asking for verification to keep your account secure.',
+  },
   totpMfa: {
     title: 'Two-step verification',
     description: 'To continue, please enter the verification code generated by your authenticator app',
@@ -150,7 +178,18 @@ export const signInMessages = {
     resend: 'Resend',
     resendCountdown: 'Resend ({seconds})',
   },
+  verifyPhone: {
+    title: 'Verify your phone',
+    titleProvider: 'Verify your {provider}',
+    description: 'Enter the verification code sent to your phone',
+    descriptionProvider: 'Enter the verification code sent to your {provider}',
+    label: 'Verification code',
+    resendText: 'Didn’t receive a code?',
+    resend: 'Resend',
+    resendCountdown: 'Resend ({seconds})',
+  },
   editIdentifier: 'Edit email address',
+  editPhoneNumber: 'Edit phone number',
   continue: 'Continue',
   verifying: 'Verifying',
   back: 'Back',

packages/mosaic/src/features/sign-in/sign-in.types.ts

@@ -21,14 +21,23 @@ export type SignInStep =
   | { kind: 'credential'; credential: 'password' | 'backup-code' | 'passkey'; identifier: string }
   | {
       kind: 'code';
-      purpose: 'first-factor' | 'second-factor' | 'reset-password' | 'verify-email';
+      purpose:
+        | 'first-factor'
+        | 'second-factor'
+        | 'client-trust'
+        | 'sso-bypass'
+        | 'reset-password'
+        | 'verify-email'
+        | 'verify-phone';
       channel: SignInCodeChannel;
       identifier?: string;
+      provider?: string;
     }
   | { kind: 'choice'; purpose: 'methods' | 'reset-methods'; options: readonly SignInFactor[] }
+  | { kind: 'choice'; purpose: 'enterprise-connections'; options: readonly SignInProvider[] }
   | { kind: 'notice'; purpose: 'help' }
   | { kind: 'notice'; purpose: 'forgot-password'; identifier: string }
-  | { kind: 'notice'; purpose: 'no-methods' | 'password-compromised' }
+  | { kind: 'notice'; purpose: 'no-methods' | 'password-compromised' | 'enterprise-sso' }
   | { kind: 'notice'; purpose: 'action-blocked'; details?: SignInActionBlockedDetails }
   | { kind: 'notice'; purpose: 'email-link'; identifier: string }
   | { kind: 'new-password'; reason: 'forgot' }
@@ -42,7 +51,7 @@ export interface SignInActionBlockedDetails {
   traceId?: string;
 }
 
-export interface SignInSocialProvider {
+export interface SignInProvider {
   id: string;
   name: string;
   iconUrl: string;
@@ -70,7 +79,7 @@ export interface SignInViewProps {
   applicationName: string;
   applicationLogoUrl?: string;
   combined: boolean;
-  socialProviders: readonly SignInSocialProvider[];
+  socialProviders: readonly SignInProvider[];
   pendingProviderId?: string;
   onSelectProvider: (id: string) => void;
   form: UseFormResult<SignInValues>;

packages/mosaic/src/features/sign-in/sign-in.utils.ts

@@ -1,3 +1,5 @@
+import type { MosaicMessages } from '../../localization';
+import { fill } from '../../localization';
 import type { SignInStep } from './sign-in.types';
 
 export function stepKey(step: SignInStep): string {
@@ -26,3 +28,126 @@ export function httpsUrl(url: string | undefined): string | undefined {
     return undefined;
   }
 }
+
+type Messages = MosaicMessages['signIn'];
+type CodeStepData = Extract<SignInStep, { kind: 'code' }>;
+type CodeResendCopy = Pick<Messages['emailCode'], 'resendText' | 'resend' | 'resendCountdown'>;
+
+export function codeCopy(
+  step: CodeStepData,
+  m: Messages,
+  applicationName: string,
+): { title: string; description: string; fieldLabel: string } {
+  const identifier = step.identifier ?? '';
+  if (step.purpose === 'reset-password') {
+    const description =
+      step.channel === 'phone' ? m.resetPasswordCode.descriptionPhone : m.resetPasswordCode.descriptionEmail;
+    return {
+      title: m.resetPasswordCode.title,
+      description: fill(description, { identifier }),
+      fieldLabel: m.resetPasswordCode.label,
+    };
+  }
+  if (step.purpose === 'verify-email') {
+    return {
+      title: m.verifyEmail.title,
+      description: fill(m.verifyEmail.description, { identifier }),
+      fieldLabel: m.verifyEmail.label,
+    };
+  }
+  if (step.purpose === 'verify-phone') {
+    const provider = step.provider;
+    return provider
+      ? {
+          title: fill(m.verifyPhone.titleProvider, { provider }),
+          description: fill(m.verifyPhone.descriptionProvider, { provider }),
+          fieldLabel: m.verifyPhone.label,
+        }
+      : { title: m.verifyPhone.title, description: m.verifyPhone.description, fieldLabel: m.verifyPhone.label };
+  }
+  if (step.channel === 'totp') {
+    return { title: m.totpMfa.title, description: m.totpMfa.description, fieldLabel: m.totpMfa.label };
+  }
+  const copy = channelCopy(step, m);
+  const description = sentToIdentifier(step)
+    ? fill(copy.descriptionSentTo, { identifier })
+    : fill(copy.description, { applicationName });
+  const title =
+    step.channel === 'phone' && step.provider
+      ? fill(m.alternativePhoneCode.title, { provider: step.provider })
+      : copy.title;
+  return { title, description, fieldLabel: copy.label };
+}
+
+export function codeResendCopy(step: CodeStepData, m: Messages): CodeResendCopy {
+  if (step.purpose === 'reset-password') {
+    return m.resetPasswordCode;
+  }
+  if (step.purpose === 'verify-email') {
+    return m.verifyEmail;
+  }
+  if (step.purpose === 'verify-phone') {
+    return m.verifyPhone;
+  }
+  return channelCopy(step, m);
+}
+
+function channelCopy(step: CodeStepData, m: Messages) {
+  if (step.channel === 'phone' && step.provider) {
+    return m.alternativePhoneCode;
+  }
+  if (step.channel === 'phone') {
+    return step.purpose === 'first-factor' ? m.phoneCode : m.phoneCodeMfa;
+  }
+  return m.emailCode;
+}
+
+function identifierEditable(step: CodeStepData): boolean {
+  return step.purpose === 'first-factor' || step.purpose === 'sso-bypass' || step.purpose === 'verify-phone';
+}
+
+function sentToIdentifier(step: CodeStepData): boolean {
+  return Boolean(step.identifier) && !identifierEditable(step);
+}
+
+export function codeIdentity(step: CodeStepData, m: Messages): { identifier?: string; editLabel: string } {
+  return {
+    identifier: step.channel !== 'totp' && identifierEditable(step) ? step.identifier : undefined,
+    editLabel: step.channel === 'phone' ? m.editPhoneNumber : m.editIdentifier,
+  };
+}
+
+export function codeNotice(step: CodeStepData, m: Messages): string | undefined {
+  switch (step.purpose) {
+    case 'client-trust':
+      return m.clientTrust.notice;
+    case 'sso-bypass':
+      return m.ssoBypass.notice;
+    case 'first-factor':
+    case 'second-factor':
+    case 'reset-password':
+    case 'verify-email':
+    case 'verify-phone':
+      return undefined;
+  }
+}
+
+export function codeSecondaryAction(
+  step: CodeStepData,
+  m: Messages,
+  { onCancel, onBack }: { onCancel?: () => void; onBack: () => void },
+): { label: string; onClick?: () => void } {
+  if (step.purpose === 'reset-password') {
+    return { label: m.forgotPassword.back, onClick: onCancel };
+  }
+  if (step.channel === 'phone' && step.provider) {
+    return { label: m.alternativePhoneCode.useSms, onClick: onCancel };
+  }
+  if (step.purpose === 'verify-phone') {
+    return { label: m.useAnotherMethod, onClick: undefined };
+  }
+  if ((step.purpose === 'second-factor' || step.purpose === 'client-trust') && !onCancel) {
+    return { label: m.back, onClick: onBack };
+  }
+  return { label: m.useAnotherMethod, onClick: onCancel };
+}