V 1.3.0 Anmeldung per Passkey (WebAuthn)

Passkey-Login wie in ausgaben-next/werte-next: auf der Login-Seite "Mit
Passkey anmelden", Verwaltung der eigenen Passkeys unter /einstellungen
(Button oben rechts). Das Passwort bleibt als Alternative bestehen.

- lib/webauthn.ts, lib/passkeys.ts sowie API-Routen unter /api/passkey
- proxy.ts: /api/passkey/authenticate ohne Session erreichbar
- Styles als eigene CSS-Klassen in globals.css (kein Tailwind in diesem
  Projekt), passend zum vorhandenen login-*/app-*-Schema
- Tabelle tabletten_passkeys in der DB medizin: app-spezifischer Name,
  damit sich Apps desselben Stacks nicht gegenseitig Passkeys anzeigen
  oder loeschen
- RP-Konfiguration ueber TABLETTEN_RP_*, da sich die .env auf dem Server
  mit anderen Apps teilt, die RP_ID/RP_ORIGIN bereits belegen

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app/login/page.tsx

@@ -1,12 +1,47 @@
 'use client';
 
 import { useActionState, useState } from 'react';
+import { startAuthentication } from '@simplewebauthn/browser';
 import { login } from './actions';
 import packageJson from '@/package.json';
 
 export default function LoginPage() {
   const [state, loginAction, isPending] = useActionState(login, undefined);
   const [showPassword, setShowPassword] = useState(false);
+  const [passkeyBusy, setPasskeyBusy] = useState(false);
+  const [passkeyError, setPasskeyError] = useState<string | null>(null);
+
+  async function handlePasskeyLogin() {
+    setPasskeyError(null);
+    setPasskeyBusy(true);
+    try {
+      const optRes = await fetch('/api/passkey/authenticate');
+      if (!optRes.ok) throw new Error('Optionen konnten nicht geladen werden.');
+      const optionsJSON = await optRes.json();
+
+      const response = await startAuthentication({ optionsJSON });
+
+      const verifyRes = await fetch('/api/passkey/authenticate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ response }),
+      });
+      if (!verifyRes.ok) {
+        const data = await verifyRes.json().catch(() => null);
+        throw new Error(data?.error ?? 'Anmeldung mit Passkey fehlgeschlagen.');
+      }
+      window.location.href = '/';
+    } catch (err) {
+      // Abbruch durch Nutzer (NotAllowedError) nicht als Fehler anzeigen.
+      if (err instanceof Error && err.name === 'NotAllowedError') {
+        setPasskeyError(null);
+      } else {
+        setPasskeyError(err instanceof Error ? err.message : 'Anmeldung mit Passkey fehlgeschlagen.');
+      }
+    } finally {
+      setPasskeyBusy(false);
+    }
+  }
 
   const version = packageJson.version;
   const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
@@ -89,6 +124,28 @@ export default function LoginPage() {
                 {isPending ? 'Anmeldung läuft...' : 'Anmelden'}
               </button>
             </form>
+
+            <div className="login-divider">
+              <span>oder</span>
+            </div>
+
+            <button
+              type="button"
+              onClick={handlePasskeyLogin}
+              disabled={passkeyBusy}
+              className="login-passkey-btn"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+              </svg>
+              {passkeyBusy ? 'Anmeldung läuft...' : 'Mit Passkey anmelden'}
+            </button>
+
+            {passkeyError && (
+              <div className="login-error login-error-passkey">
+                {passkeyError}
+              </div>
+            )}
           </div>
         </div>