@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/auth/TwoFactorAuth.jsx

@@ -1,344 +1,522 @@
 import '../styles/global.css';
+import './authFont';
 
-import React, { useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import Reveal from '../utils/Reveal';
 import { toast } from 'react-toastify';
-import { Lock } from 'lucide-react';
+import { ArrowLeft, Check, MessageSquare } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
+import AuthShell from './AuthShell';
+import AuthLoading from './AuthLoading';
+import { resolveAuthEndpoints } from './authEndpoints';
+import {
+    OTP_LENGTH,
+    clampOtp,
+    hasChallengeState,
+    isCompleteOtp,
+    normaliseAuthError,
+    resendLabelFor,
+    syncCsrfFromResponse,
+    twoFactorSuccessTarget,
+} from './authHelpers';
 
 import styles from '../styles/TwoFactorAuth.module.scss';
 
-const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
+/**
+ * Two-factor verification — the screen between a correct password and the app.
+ *
+ * Two modes, because the two second factors ask the user for different things:
+ *
+ *   - `totp` (the default, and what every 6.6.x deployment gets): the code is
+ *     already on the user's phone in an authenticator app. There is nothing to
+ *     re-send and nothing to expire, so the screen is the field and a button.
+ *   - `code`: the server texted a code. That code can go astray and it does
+ *     expire, so the screen says where it went, says how long it lasts, and
+ *     offers to send another.
+ *
+ * Backend contract, unchanged:
+ *   POST {authenticate}   -> {error, previous, user, requires_two_factor}
+ *   POST {challenge}      <- {code, previous_url, remember}, -> the user object
+ *   POST {resend}         <- {} (code mode only), -> {error}
+ *
+ * Login hands the challenge over through the router as
+ * `{challenge, userData, maskedContact, previousUrl, remember}`.
+ *
+ * `userData` IS NULL ON A CODE-DRIVER CHALLENGE and nothing here may assume
+ * otherwise. The packages' AuthController returns `user: null` deliberately —
+ * on that driver the account is identified by a code sent out of band, so
+ * echoing the record would hand an unauthenticated caller a user lookup. Only
+ * TOTP sends the user, because its challenge screen renders the account it is
+ * challenging.
+ *
+ * What marks a challenge as being in progress is therefore the presence of the
+ * handed-over state itself, not any field inside it.
+ */
+
+/** Copy, all of it overridable so an app can speak in its own voice. */
+const DEFAULT_COPY = {
+    title: 'Two-Factor Authentication',
+    /** Shown under the title in `totp` mode. */
+    totpSubtitle:
+        'Please enter the 6-digit code from your authenticator app.',
+    /** Shown under the title in `code` mode. */
+    codeSubtitle:
+        'We have sent a 6-digit code by text message. Enter it below to continue.',
+    /** Prefix for the masked destination chip in `code` mode. */
+    sentTo: 'Sent to',
+    fieldLabel: 'Verification Code',
+    submit: 'Verify',
+    submitting: 'Verifying...',
+    /** `code` mode only. `{minutes}` is substituted. */
+    expiry: 'This code expires in {minutes} minutes.',
+    resend: 'Resend code',
+    resending: 'Sending…',
+    /** `{seconds}` is substituted while a cooldown is running. */
+    resendIn: 'Resend in {seconds}s',
+    resent: 'A new code is on its way.',
+    help: 'Having trouble? Contact your administrator for assistance.',
+    back: 'Back to Login',
+    remembered: 'You will stay signed in on this device.',
+    /** Caption on the full-screen curtain during the hand-off to the app. */
+    leaving: 'Signing you in…',
+    /** Client-side validation. */
+    invalidLength: 'Please enter a valid 6-digit code',
+    /** Fallbacks when the server says nothing usable. */
+    failed: 'Invalid verification code. Please try again.',
+    expired: 'Your session has expired. Please log in again.',
+    resendFailed: 'Could not send a new code. Please try again.',
+};
+
+/** The server's wording for a challenge attempted without a live session. */
+const SESSION_EXPIRED = 'Invalid two-factor authentication session';
+
+/**
+ * The `successPath` value that means "let GenericAuth take it from here"
+ * rather than "hard-navigate to this URL".
+ */
+const DEFAULT_SUCCESS_PATH = '/';
+
+/** How long the expiry toast is left up before the bounce to /login. */
+const REDIRECT_MS = 1500;
+
+/** Simple `{token}` substitution, so copy stays one readable string. */
+const fill = (template, values) =>
+    String(template ?? '').replace(/\{(\w+)\}/g, (match, key) =>
+        Object.prototype.hasOwnProperty.call(values, key)
+            ? String(values[key])
+            : match
+    );
+
+const TwoFactorAuth = ({
+    logo,
+    loginBg,
+    setSystemAuth,
+    setUserProfile,
+    config = {},
+    /** 'totp' (default, unchanged) or 'code' for a texted one-time code. */
+    mode = 'totp',
+    /** Merged over the 6.6.3 literals — see authEndpoints.js. */
+    endpoints,
+    /** Merged over DEFAULT_COPY above. */
+    copy: copyOverrides,
+    /** `code` mode: how long the server says a code lasts, for the expiry line. */
+    expiryMinutes = 10,
+    /**
+     * `code` mode: seconds to keep Resend disabled after a successful send.
+     * 0 (the default) leaves it disabled only while the request is in flight,
+     * which is the behaviour the brief asks for — a user who did not receive
+     * the first text should not be made to wait to ask for a second.
+     */
+    resendCooldown = 0,
+    /** Where "Back to Login" and the session-expiry bounce go. */
+    loginPath = '/login',
+    /** Where a successful verification lands when no previousUrl was carried. */
+    successPath = DEFAULT_SUCCESS_PATH,
+}) => {
     const navigate = useNavigate();
     const location = useLocation();
-    const [isLoading, setIsLoading] = useState(false);
 
-    // Get user data from location state
-    const userData = location.state?.userData || null;
-    const previousUrl = location.state?.previousUrl || '';
-    const remember = location.state?.remember || false;
+    const urls = resolveAuthEndpoints(endpoints);
+    const copy = { ...DEFAULT_COPY, ...(copyOverrides || {}) };
+    const branding = config.branding || {};
+    const isCodeMode = mode === 'code';
 
-    // If no userData, redirect to login
+    const [isLoading, setIsLoading] = useState(false);
+    const [isResending, setIsResending] = useState(false);
+    // Raised the moment a verification succeeds and never lowered: everything
+    // after that point leads off this screen, and the user should be told so
+    // rather than left looking at a form that will not respond.
+    const [isLeaving, setIsLeaving] = useState(false);
+    const [cooldown, setCooldown] = useState(0);
+
+    // Handed over by Login through the router.
+    const handover = location.state ?? null;
+    // Null on a code-driver challenge, by design: there the account is
+    // identified by a code sent out of band, so the server does not echo the
+    // record back to an unauthenticated caller. Nothing on this screen may
+    // assume it is present.
+    const userData = handover?.userData || null;
+    const previousUrl = handover?.previousUrl || '';
+    const remember = handover?.remember || false;
+    // Only `code` mode has anywhere to show it. Not currently sent by the
+    // packages' AuthController on either driver — neither the challenge
+    // response nor the resend carries one — so this is normally '' and the
+    // destination chip is simply not rendered. Read from three places so a
+    // backend that grows the field works without a change here.
+    const maskedContact =
+        handover?.maskedContact ||
+        handover?.masked_contact ||
+        userData?.masked_contact ||
+        '';
+
+    /**
+     * Is there a challenge in progress?
+     *
+     * The handed-over STATE is the marker, never the user payload. Keying this
+     * off `userData` bounced every code-driver sign-in straight back to the
+     * login screen — the SMS arrived and the screen to type it into never
+     * appeared, because that driver answers with `user: null`.
+     *
+     * `challenge: true` is what Login sends now; `userData` is accepted on its
+     * own so a consumer still running an older Login (or driving this screen
+     * itself) keeps working.
+     */
+    const hasChallenge = hasChallengeState(handover);
+
+    // No state at all means a direct URL hit or a reload, and there is nothing
+    // to answer. That — not the shape of the payload — is the only reason to
+    // bounce.
     useEffect(() => {
-        if (!userData) {
-            navigate('/login');
+        if (!hasChallenge) {
+            navigate(loginPath);
         }
-    }, [userData, navigate]);
+    }, [hasChallenge, navigate, loginPath]);
 
     const [verificationCode, setVerificationCode] = useState('');
     const [codeClass, setCodeClass] = useState('');
 
+    /** Tick the resend cooldown down to zero, when one is configured. */
+    useEffect(() => {
+        if (cooldown <= 0) {
+            return undefined;
+        }
+
+        const timer = setTimeout(() => setCooldown((s) => s - 1), 1000);
+
+        return () => clearTimeout(timer);
+    }, [cooldown]);
+
     const handleChange = (e) => {
-        if (e) {
-            const value = e.target.value;
-            // Only allow digits and limit to 6 characters
-            if (/^\d*$/.test(value) && value.length <= 6) {
-                setVerificationCode(value);
+        if (!e) {
+            return;
+        }
+
+        // Strip rather than reject, so a code pasted out of a text message as
+        // "123 456" lands as 123456 instead of being dropped.
+        setVerificationCode(clampOtp(e.target.value, OTP_LENGTH));
+        setCodeClass('');
+    };
+
+    /** Toast, then bounce to the login screen — the challenge is unrecoverable. */
+    const bounceToLogin = useCallback(() => {
+        setCodeClass('inputError');
+        toast.error(copy.expired);
+        // The toast is deliberately given time to be read, and a screen that
+        // sits inert for a second and a half without saying why reads as a
+        // hang. The curtain says why.
+        setIsLeaving(true);
+
+        setTimeout(() => {
+            navigate(loginPath);
+        }, REDIRECT_MS);
+    }, [copy.expired, loginPath, navigate]);
+
+    /** `code` mode: ask the server for another text. */
+    const handleResend = () => {
+        if (isResending || cooldown > 0) {
+            return;
+        }
+
+        setIsResending(true);
+
+        CustomFetch(
+            urls.twoFactorResend,
+            'POST',
+            {},
+            (result) => {
+                setIsResending(false);
+
+                const failure =
+                    (result && typeof result === 'object' && result.error) ||
+                    '';
+
+                if (failure) {
+                    toast.error(failure);
+
+                    return;
+                }
+
+                setVerificationCode('');
                 setCodeClass('');
+                setCooldown(resendCooldown > 0 ? resendCooldown : 0);
+                toast.success(result?.message || copy.resent);
+            },
+            (error) => {
+                setIsResending(false);
+
+                const message = normaliseAuthError(error, copy.resendFailed);
+
+                if (message.includes(SESSION_EXPIRED)) {
+                    bounceToLogin();
+
+                    return;
+                }
+
+                toast.error(message);
             }
-        }
+        );
     };
 
     const handleSubmit = (e) => {
-        if (e) {
-            e.preventDefault();
+        if (!e) {
+            return;
+        }
 
-            if (!verificationCode.trim() || verificationCode.length !== 6) {
-                setCodeClass('inputError');
-                toast.error('Please enter a valid 6-digit code');
-                return;
-            }
+        e.preventDefault();
 
-            setIsLoading(true);
-            toast.info('Verifying code...', { autoClose: 2000 });
-
-            CustomFetch(
-                '/login/two-factor-challenge',
-                'POST',
-                {
-                    code: verificationCode,
-                    previous_url: previousUrl,
-                    remember: remember,
-                },
-                (result) => {
+        // The button is disabled too; this also covers Enter in the field.
+        if (isLoading || isLeaving) {
+            return;
+        }
+
+        if (!isCompleteOtp(verificationCode, OTP_LENGTH)) {
+            setCodeClass('inputError');
+            toast.error(copy.invalidLength);
+
+            return;
+        }
+
+        setIsLoading(true);
+        toast.info('Verifying code...', { autoClose: 2000 });
+
+        CustomFetch(
+            urls.twoFactorChallenge,
+            'POST',
+            {
+                code: verificationCode,
+                previous_url: previousUrl,
+                remember: remember,
+            },
+            (result) => {
+                // NOTE: `isLoading` is deliberately NOT cleared up front. It
+                // is cleared on each failure branch instead, so that on the
+                // success path the button stays in its pending state right
+                // through to the transition. Clearing it here was the reported
+                // bug: the label snapped back to "Verify", the screen sat
+                // there looking idle, and half a second later the browser
+                // reloaded out from under it.
+
+                // A 200 carrying an `error` is how this endpoint reports a
+                // wrong code; anything else is the user object. Only `error`
+                // is inspected — the success body is a user record, and a user
+                // record is perfectly entitled to carry a `message` field.
+                const failure =
+                    typeof result === 'string' &&
+                    result.includes(SESSION_EXPIRED)
+                        ? SESSION_EXPIRED
+                        : (result && typeof result === 'object' && result.error) ||
+                          '';
+
+                if (failure) {
                     setIsLoading(false);
 
-                    // Log the result to help with debugging
-                    console.log('2FA Result:', result);
-
-                    // Check if the result contains an error message
-                    if (result && result.error) {
-                        setCodeClass('inputError');
-                        console.log('Found error in result:', result.error);
-
-                        // Check if it's a session timeout error
-                        if (
-                            result.error ===
-                            'Invalid two-factor authentication session.'
-                        ) {
-                            console.log(
-                                'Session timeout detected, redirecting to login'
-                            );
-                            toast.error(
-                                'Your session has expired. Please log in again.'
-                            );
-
-                            // Redirect to login page
-                            setTimeout(() => {
-                                navigate('/login');
-                            }, 1500); // Short delay to allow the toast to be seen
-                        } else {
-                            // Display the error message
-                            toast.error(result.error);
-                        }
-                        return;
-                    }
+                    const message = normaliseAuthError(failure, copy.failed);
+
+                    if (message.includes(SESSION_EXPIRED)) {
+                        bounceToLogin();
 
-                    // Additional check for error in different format
-                    if (
-                        typeof result === 'string' &&
-                        result.includes(
-                            'Invalid two-factor authentication session'
-                        )
-                    ) {
-                        console.log(
-                            'Session timeout detected in string result, redirecting to login'
-                        );
-                        setCodeClass('inputError');
-                        toast.error(
-                            'Your session has expired. Please log in again.'
-                        );
-
-                        // Redirect to login page
-                        setTimeout(() => {
-                            navigate('/login');
-                        }, 1500);
                         return;
                     }
 
-                    // If we get here, it means we received a 200 response with the user object
-                    console.log(
-                        'Authentication successful, updating user profile'
-                    );
-                    toast.success('Two-factor authentication successful');
-
-                    // Update the user profile with the received data
-                    setUserProfile(result);
-
-                    // Set authentication state to true
-                    setSystemAuth(true);
-
-                    // Use a small delay to ensure state updates are processed
-                    setTimeout(() => {
-                        // Navigate based on previous URL if available
-                        if (previousUrl && previousUrl !== '') {
-                            window.location.href = previousUrl;
-                        } else {
-                            // Use window.location for a full page refresh to ensure session is recognized
-                            window.location.href = '/';
-                        }
-                    }, 500);
-                },
-                (error) => {
-                    setIsLoading(false);
                     setCodeClass('inputError');
+                    toast.error(message);
 
-                    // Log the error to help with debugging
-                    console.log('2FA Error:', error);
+                    return;
+                }
 
-                    // Log more detailed information about the error response
-                    if (error.response) {
-                        console.log('Error Response:', error.response);
-                        console.log(
-                            'Error Response Data:',
-                            error.response.data
-                        );
-                    }
+                toast.success('Two-factor authentication successful');
+
+                // THE reason this helper exists. A challenge used to end in a
+                // full page load, which fetched a new document and a new meta
+                // tag; handing off without one keeps the document, so a token
+                // rotated by this response has to be written into the tag
+                // here — before the callbacks below hand control to an app
+                // that will immediately start making requests with it.
+                syncCsrfFromResponse(result);
+
+                // The curtain goes up before anything else, and never comes
+                // down: from here the screen is a waiting room, and every path
+                // out of it ends somewhere other than this component.
+                setIsLeaving(true);
+                setUserProfile(result);
+                setSystemAuth(true);
+
+                // An arbitrary URL from before sign-in — possibly outside the
+                // SPA entirely — so it still needs a real navigation. The
+                // curtain above covers the whole of it, which is what the
+                // bare `window.location.href` never did: that left a live-
+                // looking form on screen until the browser got round to
+                // unloading it.
+                const target = twoFactorSuccessTarget({
+                    previousUrl,
+                    successPath,
+                    defaultSuccessPath: DEFAULT_SUCCESS_PATH,
+                });
+
+                if (target.mode === 'hard') {
+                    window.location.href = target.url;
+
+                    return;
+                }
 
-                    // Extract the error message from the response
-                    let errorMessage =
-                        'Invalid verification code. Please try again.';
-
-                    // Direct check for the specific error we're looking for
-                    // This is a temporary solution to force the redirect
-                    if (
-                        error &&
-                        error.message === 'Request failed with status code 401'
-                    ) {
-                        // Force redirect to login for 401 errors
-                        console.log('Detected 401 error, redirecting to login');
-                        toast.error(
-                            'Your session has expired. Please log in again.'
-                        );
-                        setTimeout(() => {
-                            navigate('/login');
-                        }, 1500);
-                        return;
-                    }
+                // Otherwise: no reload at all. Setting the auth state is what
+                // GenericAuth watches — it drops its own curtain over this one
+                // (the same component, so nothing changes on screen), re-reads
+                // the profile with the session the challenge just issued, and
+                // performs the one navigation to '/'. Exactly the path Login's
+                // non-2FA success branch takes.
+                //
+                // The old code hard-reloaded here instead, on the theory that
+                // the new session cookie needed a fresh document. It does not:
+                // the cookie is already set by the time this response lands,
+                // and GenericAuth's own profile request carries it.
+            },
+            (error) => {
+                setIsLoading(false);
+                setCodeClass('inputError');
 
-                    try {
-                        // Try to parse the error response
-                        if (error.response && error.response.data) {
-                            console.log(
-                                'Response data type:',
-                                typeof error.response.data
-                            );
-                            console.log('Response data:', error.response.data);
-
-                            // If data is a string, use it directly
-                            if (typeof error.response.data === 'string') {
-                                errorMessage = error.response.data;
-                            }
-                            // If data is an object with an error property
-                            else if (typeof error.response.data === 'object') {
-                                if (error.response.data.error) {
-                                    errorMessage = error.response.data.error;
-                                    console.log(
-                                        'Found error in object:',
-                                        errorMessage
-                                    );
-                                } else if (error.response.data.message) {
-                                    errorMessage = error.response.data.message;
-                                    console.log(
-                                        'Found message in object:',
-                                        errorMessage
-                                    );
-                                }
-                            }
-                            // If data is JSON string, try to parse it
-                            else if (
-                                typeof error.response.data === 'string' &&
-                                error.response.data.includes('{')
-                            ) {
-                                const parsedData = JSON.parse(
-                                    error.response.data
-                                );
-                                if (parsedData.error) {
-                                    errorMessage = parsedData.error;
-                                    console.log(
-                                        'Found error in parsed JSON:',
-                                        errorMessage
-                                    );
-                                }
-                            }
-                        }
-                    } catch (e) {
-                        console.error('Error parsing error response:', e);
-                    }
+                // A 401 here is always a dead challenge — the code itself comes
+                // back as a 200 with an `error`, never as a status code.
+                const isUnauthorised =
+                    error?.response?.status === 401 ||
+                    (typeof error?.message === 'string' &&
+                        error.message.includes('401'));
 
-                    console.log('Extracted error message:', errorMessage);
-
-                    // Check if it's a session timeout error
-                    if (
-                        errorMessage ===
-                            'Invalid two-factor authentication session.' ||
-                        errorMessage.includes(
-                            'Invalid two-factor authentication session'
-                        )
-                    ) {
-                        toast.error(
-                            'Your session has expired. Please log in again.'
-                        );
-                        // Redirect to login page
-                        setTimeout(() => {
-                            navigate('/login');
-                        }, 1500); // Short delay to allow the toast to be seen
-                    } else {
-                        toast.error(errorMessage);
-                    }
+                const message = normaliseAuthError(error, copy.failed);
+
+                if (isUnauthorised || message.includes(SESSION_EXPIRED)) {
+                    bounceToLogin();
+
+                    return;
                 }
-            );
-        }
+
+                toast.error(message);
+            }
+        );
     };
 
+    const resendLabel = resendLabelFor({
+        isResending,
+        countdown: cooldown,
+        labels: copy,
+    });
+
+    // Anything in flight, or the screen on its way out, makes every control
+    // here inert — a second submit during either would either double-spend the
+    // code or race the navigation.
+    const isBusy = isLoading || isLeaving;
+
     return (
-        <div className={styles.lcontainer}>
-            <div className={styles.lwrap}>
-                <div className={styles.logincontainer}>
-                    <form onSubmit={handleSubmit}>
-                        <Reveal effect="fadeInUp">
-                            <div className={styles.login}>
-                                <img
-                                    src={logo}
-                                    alt="CRM"
-                                    className={styles.loginlogo}
-                                />
-                                <h2>Two-Factor Authentication</h2>
-                                <p className={styles.instructions}>
-                                    Please enter the 6-digit code from your
-                                    authenticator app.
-                                </p>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <label className={styles.fi__label}>
-                                        <input
-                                            type="text"
-                                            name="verificationCode"
-                                            value={verificationCode}
-                                            onChange={handleChange}
-                                            tabIndex="1"
-                                            className={codeClass}
-                                            placeholder=" "
-                                            autoComplete="one-time-code"
-                                            inputMode="numeric"
-                                            maxLength="6"
-                                        />
-                                        <span className={styles.fi__span}>
-                                            Verification Code
-                                        </span>
-                                        <small>
-                                            <Lock
-                                                strokeWidth={2}
-                                                size={18}
-                                            />
-                                        </small>
-                                    </label>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                >
-                                    <button
-                                        className={styles.btn}
-                                        type="submit"
-                                        disabled={isLoading}
-                                        tabIndex="2"
-                                    >
-                                        {isLoading ? 'Verifying...' : 'Verify'}
-                                    </button>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
-                                >
-                                    <span>
-                                        Having trouble? Contact your
-                                        administrator for assistance.
-                                    </span>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
-                                >
-                                    <span>
-                                        <a
-                                            href="#"
-                                            onClick={(e) => {
-                                                e.preventDefault();
-                                                navigate('/login');
-                                            }}
-                                            tabIndex="3"
-                                        >
-                                            Back to Login
-                                        </a>
-                                    </span>
-                                </div>
-                            </div>
-                        </Reveal>
-                    </form>
+        <>
+        {isLeaving ? <AuthLoading label={copy.leaving} /> : null}
+        <AuthShell
+            styles={styles}
+            logo={logo}
+            loginBg={loginBg}
+            branding={branding}
+            title={copy.title}
+            subtitle={isCodeMode ? copy.codeSubtitle : copy.totpSubtitle}
+            footer={branding.footer}
+        >
+            {isCodeMode && maskedContact ? (
+                <p className={styles.destination}>
+                    <MessageSquare size={15} strokeWidth={2} />
+                    {copy.sentTo} {maskedContact}
+                </p>
+            ) : null}
+
+            <form onSubmit={handleSubmit} className={styles.form}>
+                <div className={`${styles.field} ${styles.code}`}>
+                    <input
+                        id="two-factor-code"
+                        type="text"
+                        name="verificationCode"
+                        value={verificationCode}
+                        onChange={handleChange}
+                        tabIndex="1"
+                        className={codeClass}
+                        placeholder=" "
+                        autoComplete="one-time-code"
+                        inputMode="numeric"
+                        maxLength={OTP_LENGTH}
+                        autoFocus
+                        disabled={isBusy}
+                    />
+                    <label htmlFor="two-factor-code">{copy.fieldLabel}</label>
+                </div>
+
+                <button
+                    className={styles.submit}
+                    type="submit"
+                    disabled={isBusy}
+                    tabIndex="2"
+                >
+                    {isBusy ? copy.submitting : copy.submit}
+                </button>
+            </form>
+
+            {/* Expiry and resend belong together: one is the reason for the
+                other. Neither has anything to say about an authenticator app,
+                so both are `code` mode only. */}
+            {isCodeMode ? (
+                <div className={styles.resendRow}>
+                    <p className={styles.expiry}>
+                        {fill(copy.expiry, { minutes: expiryMinutes })}
+                    </p>
+                    <button
+                        type="button"
+                        className={`${styles.link} ${styles.resend}`}
+                        onClick={handleResend}
+                        disabled={isBusy || isResending || cooldown > 0}
+                        tabIndex="3"
+                    >
+                        {resendLabel}
+                    </button>
                 </div>
-            </div>
-        </div>
+            ) : null}
+
+            {remember ? (
+                <p className={styles.remembered}>
+                    <Check size={15} strokeWidth={2.5} />
+                    {copy.remembered}
+                </p>
+            ) : null}
+
+            <p className={styles.help}>{copy.help}</p>
+
+            <button
+                type="button"
+                className={styles.back}
+                onClick={() => navigate(loginPath)}
+                disabled={isBusy}
+                tabIndex="4"
+            >
+                <ArrowLeft size={15} strokeWidth={2} />
+                {copy.back}
+            </button>
+        </AuthShell>
+        </>
     );
 };