betreuungs-cockpit/src/app/(app)/bestaetigen/formular.tsx

'use client'

import { useActionState, useEffect, useState } from 'react'
import { useFormStatus } from 'react-dom'
import { useRouter } from 'next/navigation'
import { AlertCircle, Fingerprint, Loader2, ShieldCheck } from 'lucide-react'
import { anmeldungBestaetigen, type BestaetigenZustand } from '@/server/actions/bestaetigen'
import { passkeyBestaetigen, passkeyBestaetigungStarten } from '@/server/actions/passkey'
import {
  browserSupportsWebAuthn,
  passkeyBrowserfehler,
  startAuthentication,
} from '@/lib/passkey-browser'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Feld } from '@/components/feld'

function Absenden() {
  const { pending } = useFormStatus()
  return (
    <Button type="submit" className="w-full" size="lg" disabled={pending}>
      {pending ? <Loader2 className="animate-spin" aria-hidden="true" /> : <ShieldCheck aria-hidden="true" />}
      {pending ? 'Wird geprüft …' : 'Bestätigen'}
    </Button>
  )
}

export function BestaetigenFormular({
  weiter,
  passkeysMoeglich,
}: {
  weiter: string
  passkeysMoeglich: boolean
}) {
  const [zustand, aktion] = useActionState<BestaetigenZustand, FormData>(anmeldungBestaetigen, {})

  return (
    <div className="space-y-5">
      <form action={aktion} className="space-y-4" noValidate>
        <input type="hidden" name="weiter" value={weiter} />

        {zustand.fehler && (
          <Alert variant="fehler">
            <AlertCircle aria-hidden="true" />
            <AlertDescription>{zustand.fehler}</AlertDescription>
          </Alert>
        )}

        <Feld id="passwort" beschriftung="Passwort" pflicht>
          <Input name="passwort" type="password" autoComplete="current-password" required autoFocus />
        </Feld>

        <Feld id="code" beschriftung="Code aus der Authenticator-App" pflicht>
          <Input
            name="code"
            inputMode="numeric"
            autoComplete="one-time-code"
            placeholder="123456"
            className="text-center font-mono text-lg tracking-[0.4em]"
            required
          />
        </Feld>

        <Absenden />
      </form>

      {passkeysMoeglich && <PasskeyBestaetigung weiter={weiter} />}
    </div>
  )
}

/**
 * Bestaetigung mit Passkey statt mit Passwort und Code.
 *
 * Geprueft wird zusaetzlich, dass der Passkey zum angemeldeten Benutzer
 * gehoert - sonst koennte jemand mit dem eigenen Finger eine fremde,
 * offen stehende Sitzung freischalten. Genau der Fall, gegen den diese
 * Seite gebaut ist.
 */
function PasskeyBestaetigung({ weiter }: { weiter: string }) {
  const router = useRouter()
  const [browserKann, setBrowserKann] = useState(false)
  const [laeuft, setLaeuft] = useState(false)
  const [fehler, setFehler] = useState<string | null>(null)

  useEffect(() => {
    setBrowserKann(browserSupportsWebAuthn())
  }, [])

  async function bestaetigen() {
    setFehler(null)
    setLaeuft(true)

    try {
      const start = await passkeyBestaetigungStarten()
      if (!start.ok) {
        setFehler(start.fehler)
        return
      }

      const antwort = await startAuthentication({ optionsJSON: start.optionen })
      const ergebnis = await passkeyBestaetigen(JSON.stringify(antwort))

      if (!ergebnis.ok) {
        setFehler(ergebnis.fehler)
        return
      }

      router.replace(weiter)
      router.refresh()
    } catch (ausnahme) {
      setFehler(passkeyBrowserfehler(ausnahme))
    } finally {
      setLaeuft(false)
    }
  }

  if (!browserKann) return null

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-3">
        <span className="h-px flex-1 bg-border" />
        <span className="text-xs uppercase tracking-wide text-muted-foreground">oder</span>
        <span className="h-px flex-1 bg-border" />
      </div>

      {fehler && (
        <Alert variant="fehler">
          <AlertCircle aria-hidden="true" />
          <AlertDescription>{fehler}</AlertDescription>
        </Alert>
      )}

      <Button
        type="button"
        variant="outline"
        size="lg"
        className="w-full"
        onClick={() => void bestaetigen()}
        disabled={laeuft}
      >
        {laeuft ? (
          <>
            <Loader2 className="animate-spin" aria-hidden="true" />
            Warte auf das Gerät …
          </>
        ) : (
          <>
            <Fingerprint aria-hidden="true" />
            Mit Passkey bestätigen
          </>
        )}
      </Button>
    </div>
  )
}