@massimo.mazzoleni/cognito-max 1.0.0

package/src/ui/components/ForgotPasswordForm.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useId, useRef, type ReactNode } from 'react'
+import {
+  useForgotPasswordForm,
+  type UseForgotPasswordFormOptions,
+} from '../hooks/useForgotPasswordForm'
+
+export interface ForgotPasswordFormProps extends UseForgotPasswordFormOptions {
+  className?: string
+  labels?: {
+    email?: string
+    requestSubmit?: string
+    code?: string
+    newPassword?: string
+    confirmPassword?: string
+    resetSubmit?: string
+  }
+  signInLink?: ReactNode
+}
+
+export function ForgotPasswordForm({
+  className,
+  labels = {},
+  signInLink,
+  onSuccess,
+  onError,
+}: ForgotPasswordFormProps) {
+  const uid = useId()
+  const form = useForgotPasswordForm({ onSuccess, onError })
+  const firstInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    firstInputRef.current?.focus()
+  }, [form.step])
+
+  const l = {
+    email: labels.email ?? 'Email',
+    requestSubmit: labels.requestSubmit ?? 'Invia codice',
+    code: labels.code ?? 'Codice di verifica',
+    newPassword: labels.newPassword ?? 'Nuova password',
+    confirmPassword: labels.confirmPassword ?? 'Conferma password',
+    resetSubmit: labels.resetSubmit ?? 'Reimposta password',
+  }
+
+  const errorId = `${uid}-error`
+
+  if (form.step === 'reset') {
+    return (
+      <form
+        onSubmit={form.reset.onSubmit}
+        className={className}
+        aria-label="Reimposta password"
+      >
+        <p>
+          Abbiamo inviato un codice a <strong>{form.reset.email}</strong>.
+        </p>
+        <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+          {form.error?.message}
+        </div>
+        <div>
+          <label htmlFor={`${uid}-code`}>{l.code}</label>
+          <input
+            id={`${uid}-code`}
+            ref={firstInputRef}
+            type="text"
+            inputMode="numeric"
+            maxLength={6}
+            autoComplete="one-time-code"
+            autoFocus
+            required
+            aria-required="true"
+            aria-invalid={!!form.error}
+            aria-describedby={form.error ? errorId : undefined}
+            value={form.reset.code}
+            onChange={(e) => form.reset.setCode(e.target.value)}
+          />
+        </div>
+        <div>
+          <label htmlFor={`${uid}-new-password`}>{l.newPassword}</label>
+          <input
+            id={`${uid}-new-password`}
+            type="password"
+            autoComplete="new-password"
+            required
+            aria-required="true"
+            aria-invalid={!!form.error}
+            value={form.reset.newPassword}
+            onChange={(e) => form.reset.setNewPassword(e.target.value)}
+          />
+        </div>
+        <div>
+          <label htmlFor={`${uid}-confirm-password`}>{l.confirmPassword}</label>
+          <input
+            id={`${uid}-confirm-password`}
+            type="password"
+            autoComplete="new-password"
+            required
+            aria-required="true"
+            aria-invalid={!!form.error}
+            value={form.reset.confirmPassword}
+            onChange={(e) => form.reset.setConfirmPassword(e.target.value)}
+          />
+        </div>
+        <button type="submit" disabled={form.isLoading} aria-busy={form.isLoading}>
+          {form.isLoading ? (
+            <>
+              <span aria-hidden="true">...</span>
+              <span className="sr-only">Caricamento...</span>
+            </>
+          ) : (
+            l.resetSubmit
+          )}
+        </button>
+        <button type="button" onClick={form.restart}>
+          Torna all&apos;inizio
+        </button>
+      </form>
+    )
+  }
+
+  return (
+    <form
+      onSubmit={form.request.onSubmit}
+      className={className}
+      aria-label="Richiedi codice di reimpostazione password"
+    >
+      <p>Inserisci la tua email per ricevere il codice di reimpostazione.</p>
+      <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+        {form.error?.message}
+      </div>
+      <div>
+        <label htmlFor={`${uid}-email`}>{l.email}</label>
+        <input
+          id={`${uid}-email`}
+          ref={firstInputRef}
+          type="email"
+          autoComplete="email"
+          autoFocus
+          required
+          aria-required="true"
+          aria-invalid={!!form.error}
+          aria-describedby={form.error ? errorId : undefined}
+          value={form.request.email}
+          onChange={(e) => form.request.setEmail(e.target.value)}
+        />
+      </div>
+      <button type="submit" disabled={form.isLoading} aria-busy={form.isLoading}>
+        {form.isLoading ? (
+          <>
+            <span aria-hidden="true">...</span>
+            <span className="sr-only">Caricamento...</span>
+          </>
+        ) : (
+          l.requestSubmit
+        )}
+      </button>
+      {signInLink}
+    </form>
+  )
+}

package/src/ui/components/MfaSetupWizard.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useId, useRef, type ReactNode } from 'react'
+import { useMfaSetup, type UseMfaSetupOptions } from '../hooks/useMfaSetup'
+
+export interface MfaSetupWizardProps extends UseMfaSetupOptions {
+  className?: string
+  labels?: {
+    start?: string
+    scanInstruction?: string
+    manualEntry?: string
+    codeLabel?: string
+    verifySubmit?: string
+    successMessage?: string
+  }
+  /**
+   * Render del QR code. Riceve il URI otpauth:// — usa react-qr-code o simile.
+   * Default: mostra il URI come testo copiabile.
+   */
+  renderQrCode?: (uri: string) => ReactNode
+}
+
+export function MfaSetupWizard({
+  className,
+  labels = {},
+  renderQrCode,
+  onSuccess,
+  onError,
+}: MfaSetupWizardProps) {
+  const uid = useId()
+  const wizard = useMfaSetup({ onSuccess, onError })
+  const firstInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    firstInputRef.current?.focus()
+  }, [wizard.step])
+
+  const l = {
+    start: labels.start ?? 'Configura autenticazione a due fattori (TOTP)',
+    scanInstruction:
+      labels.scanInstruction ??
+      'Scansiona il QR code con la tua app authenticator (Google Authenticator, Authy, 1Password…)',
+    manualEntry: labels.manualEntry ?? 'Oppure inserisci il codice manualmente:',
+    codeLabel: labels.codeLabel ?? 'Codice a 6 cifre',
+    verifySubmit: labels.verifySubmit ?? 'Verifica e attiva',
+    successMessage: labels.successMessage ?? 'Autenticazione a due fattori attivata con successo.',
+  }
+
+  const errorId = `${uid}-error`
+
+  if (wizard.step === 'done') {
+    return <p role="status">{l.successMessage}</p>
+  }
+
+  if (wizard.step === 'idle') {
+    return (
+      <div className={className}>
+        <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+          {wizard.error?.message}
+        </div>
+        {/* autoFocus handles focus on initial render; firstInputRef targets inputs in later steps */}
+        <button type="button" autoFocus onClick={wizard.start}>
+          {l.start}
+        </button>
+      </div>
+    )
+  }
+
+  if (wizard.step === 'loading') {
+    return (
+      <div className={className} aria-live="polite" aria-atomic="true">
+        ...
+      </div>
+    )
+  }
+
+  // step === 'scan' | 'verify'
+  return (
+    <div className={className}>
+      <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+        {wizard.error?.message}
+      </div>
+
+      {wizard.qrCodeUri && (
+        <div>
+          <p>{l.scanInstruction}</p>
+          {renderQrCode ? (
+            renderQrCode(wizard.qrCodeUri)
+          ) : (
+            <code style={{ wordBreak: 'break-all', fontSize: '0.75em' }}>
+              {wizard.qrCodeUri}
+            </code>
+          )}
+          {wizard.secretCode && (
+            <p>
+              {l.manualEntry} <code>{wizard.secretCode}</code>
+            </p>
+          )}
+        </div>
+      )}
+
+      <form onSubmit={wizard.onVerify} aria-label="Verifica dispositivo TOTP">
+        <div>
+          <label htmlFor={`${uid}-totp-code`}>{l.codeLabel}</label>
+          <input
+            id={`${uid}-totp-code`}
+            ref={firstInputRef}
+            type="text"
+            inputMode="numeric"
+            maxLength={6}
+            autoComplete="one-time-code"
+            autoFocus
+            required
+            aria-required="true"
+            aria-invalid={!!wizard.error}
+            aria-describedby={wizard.error ? errorId : undefined}
+            value={wizard.totpCode}
+            onChange={(e) => wizard.setTotpCode(e.target.value)}
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={wizard.isLoading || wizard.totpCode.length !== 6}
+          aria-busy={wizard.isLoading}
+        >
+          {wizard.isLoading ? (
+            <>
+              <span aria-hidden="true">...</span>
+              <span className="sr-only">Caricamento...</span>
+            </>
+          ) : (
+            l.verifySubmit
+          )}
+        </button>
+      </form>
+    </div>
+  )
+}

package/src/ui/components/RegisterForm.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useId, useRef, type ReactNode } from 'react'
+import { useRegisterForm, type UseRegisterFormOptions } from '../hooks/useRegisterForm'
+
+export interface RegisterFormProps extends UseRegisterFormOptions {
+  className?: string
+  labels?: {
+    email?: string
+    password?: string
+    confirmPassword?: string
+    submit?: string
+    code?: string
+    confirmSubmit?: string
+    resend?: string
+  }
+  signInLink?: ReactNode
+}
+
+export function RegisterForm({
+  className,
+  labels = {},
+  signInLink,
+  onSuccess,
+  onError,
+  extraAttributes,
+}: RegisterFormProps) {
+  const uid = useId()
+  const form = useRegisterForm({ onSuccess, onError, extraAttributes })
+  const firstInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    firstInputRef.current?.focus()
+  }, [form.step])
+
+  const l = {
+    email: labels.email ?? 'Email',
+    password: labels.password ?? 'Password',
+    confirmPassword: labels.confirmPassword ?? 'Conferma password',
+    submit: labels.submit ?? 'Registrati',
+    code: labels.code ?? 'Codice di verifica',
+    confirmSubmit: labels.confirmSubmit ?? 'Conferma',
+    resend: labels.resend ?? 'Invia di nuovo',
+  }
+
+  const errorId = `${uid}-error`
+
+  if (form.step === 'confirm') {
+    return (
+      <form
+        onSubmit={form.confirm.onSubmit}
+        className={className}
+        aria-label="Conferma registrazione"
+      >
+        <p>
+          Controlla la tua email <strong>{form.confirm.email}</strong> e inserisci il codice
+          ricevuto.
+        </p>
+        <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+          {form.error?.message}
+        </div>
+        <div>
+          <label htmlFor={`${uid}-code`}>{l.code}</label>
+          <input
+            id={`${uid}-code`}
+            ref={firstInputRef}
+            type="text"
+            inputMode="numeric"
+            maxLength={6}
+            autoComplete="one-time-code"
+            autoFocus
+            required
+            aria-required="true"
+            aria-invalid={!!form.error}
+            aria-describedby={form.error ? errorId : undefined}
+            value={form.confirm.code}
+            onChange={(e) => form.confirm.setCode(e.target.value)}
+          />
+        </div>
+        <button type="submit" disabled={form.isLoading} aria-busy={form.isLoading}>
+          {form.isLoading ? (
+            <>
+              <span aria-hidden="true">...</span>
+              <span className="sr-only">Caricamento...</span>
+            </>
+          ) : (
+            l.confirmSubmit
+          )}
+        </button>
+        <button type="button" onClick={form.confirm.resend}>
+          {l.resend}
+        </button>
+      </form>
+    )
+  }
+
+  return (
+    <form
+      onSubmit={form.register.onSubmit}
+      className={className}
+      aria-label="Crea un nuovo account"
+    >
+      <div id={errorId} role="alert" aria-live="assertive" aria-atomic="true">
+        {form.error?.message}
+      </div>
+      <div>
+        <label htmlFor={`${uid}-email`}>{l.email}</label>
+        <input
+          id={`${uid}-email`}
+          ref={firstInputRef}
+          type="email"
+          autoComplete="email"
+          autoFocus
+          required
+          aria-required="true"
+          aria-invalid={!!form.error}
+          aria-describedby={form.error ? errorId : undefined}
+          value={form.register.email}
+          onChange={(e) => form.register.setEmail(e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor={`${uid}-password`}>{l.password}</label>
+        <input
+          id={`${uid}-password`}
+          type="password"
+          autoComplete="new-password"
+          required
+          aria-required="true"
+          aria-invalid={!!form.error}
+          value={form.register.password}
+          onChange={(e) => form.register.setPassword(e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor={`${uid}-confirm-password`}>{l.confirmPassword}</label>
+        <input
+          id={`${uid}-confirm-password`}
+          type="password"
+          autoComplete="new-password"
+          required
+          aria-required="true"
+          aria-invalid={!!form.error}
+          value={form.register.confirmPassword}
+          onChange={(e) => form.register.setConfirmPassword(e.target.value)}
+        />
+      </div>
+      <button type="submit" disabled={form.isLoading} aria-busy={form.isLoading}>
+        {form.isLoading ? (
+          <>
+            <span aria-hidden="true">...</span>
+            <span className="sr-only">Caricamento...</span>
+          </>
+        ) : (
+          l.submit
+        )}
+      </button>
+      {signInLink}
+    </form>
+  )
+}