Code input

import { useState } from 'react';
import { Button } from '@/ui/button';
import { CodeInput } from '@/ui/code-input';
import { Field, FieldDescription, FieldError, FieldLabel } from '@/ui/field';
import { Link } from '@/ui/link';

// Two-step sign-in (on the real page the boxes take focus on load: autoFocus). 481902 is the right code here; anything else is refused. Five wrong codes lock it for 15 minutes.
export default function TwoStep() {
  const [code, setCode] = useState('');
  const [error, setError] = useState('');
  const [checking, setChecking] = useState(false);
  const [wrong, setWrong] = useState(0);
  const [signedIn, setSignedIn] = useState(false);
  const locked = wrong >= 5;

  async function verify(entered: string) {
    if (checking || locked || entered.length < 6) return; // A second Enter while checking does nothing.
    setChecking(true);
    await new Promise((resolve) => setTimeout(resolve, 800));
    setChecking(false);
    if (entered === '481902') return setSignedIn(true);
    const tries = wrong + 1;
    setWrong(tries);
    setCode('');
    setError(
      tries >= 5
        ? 'Too many wrong codes. Wait 15 minutes, then try again.'
        : 'That code didn’t work. Enter the current code from your authenticator app.',
    );
  }

  return (
    <form
      className="flex w-full max-w-80 flex-col gap-200"
      onSubmit={(event) => {
        event.preventDefault();
        void verify(code);
      }}
    >
      <Field invalid={!!error}>
        <FieldLabel htmlFor="mfa-code" visuallyHidden>
          Authenticator code
        </FieldLabel>
        <FieldDescription id="mfa-code-help">Enter the current code from your authenticator app.</FieldDescription>
        <CodeInput
          id="mfa-code"
          value={code}
          onValueChange={(next) => {
            setCode(next);
            if (next) setError('');
          }}
          onComplete={verify}
          invalid={!!error}
          disabled={checking || locked || signedIn}
          aria-describedby={error ? 'mfa-code-help mfa-code-error' : 'mfa-code-help'}
        />
        <FieldError id="mfa-code-error">{error}</FieldError>
      </Field>
      <div className="flex items-center gap-200">
        <Button type="submit" variant="primary" loading={checking} loadingLabel="Verifying" disabled={locked || signedIn || code.length < 6}>
          {signedIn ? 'Signed in' : 'Verify'}
        </Button>
        <Link href="#backup-code" variant="subtle">
          Use a backup code instead
        </Link>
      </div>
    </form>
  );
}

import { CodeInput } from '@/ui/code-input';

// Empty before focus, filled, being checked, and refused. Each is named for screen readers.
export default function States() {
  return (
    <div className="flex flex-col gap-200">
      <CodeInput aria-label="Empty code" />
      <CodeInput aria-label="Filled code" value="481902" />
      <CodeInput aria-label="Code being checked" value="481902" disabled />
      <CodeInput aria-label="Refused code" value="481907" invalid />
    </div>
  );
}

import { useState } from 'react';
import { CodeInput } from '@/ui/code-input';
import { Field, FieldDescription, FieldLabel } from '@/ui/field';

// The step-up check before a sensitive change, with a four-digit code. Paste "4 8 1 9" or "48-19": separators drop.
export default function StepUp() {
  const [code, setCode] = useState('');
  return (
    <Field className="w-fit">
      <FieldLabel htmlFor="step-up-code">Code from your email</FieldLabel>
      <CodeInput id="step-up-code" length={4} value={code} onValueChange={setCode} aria-describedby="step-up-help" />
      <FieldDescription id="step-up-help">We sent it to joseph@northbridge.com. It works for 10 minutes.</FieldDescription>
    </Field>
  );
}