// Login page — MedLink. Two-pane auth with role picker + 2FA step. // ---- WebAuthn helpers (biometric login: Face ID / Touch ID / Windows Hello) ---- const webAuthnSupported = () => typeof window !== "undefined" && !!window.PublicKeyCredential && !!window.crypto?.subtle && typeof navigator.credentials?.create === "function"; const BIO_STORAGE_KEY = "medlink.bio.cred"; const b64u = { enc: (buf) => btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, ""), dec: (s) => Uint8Array.from(atob(s.replace(/-/g, "+").replace(/_/g, "/") + "==".slice(0, (4 - s.length % 4) % 4)), (c) => c.charCodeAt(0)), }; const randomBytes = (n = 32) => { const b = new Uint8Array(n); crypto.getRandomValues(b); return b; }; const registerBiometric = async (role) => { const challenge = randomBytes(32); const userId = randomBytes(16); const cred = await navigator.credentials.create({ publicKey: { challenge, rp: { name: "MedLink", id: location.hostname }, user: { id: userId, name: `medlink-${role}`, displayName: `MedLink ${role}` }, pubKeyCredParams: [{ type: "public-key", alg: -7 }, { type: "public-key", alg: -257 }], authenticatorSelection: { userVerification: "preferred", residentKey: "preferred" }, timeout: 60000, attestation: "none", }, }); if (!cred) throw new Error("no credential"); const rawId = b64u.enc(cred.rawId); const stored = { id: rawId, role, enrolledAt: new Date().toISOString() }; localStorage.setItem(BIO_STORAGE_KEY, JSON.stringify(stored)); return stored; }; const authenticateBiometric = async () => { const raw = localStorage.getItem(BIO_STORAGE_KEY); if (!raw) throw new Error("not enrolled"); const stored = JSON.parse(raw); const challenge = randomBytes(32); const assertion = await navigator.credentials.get({ publicKey: { challenge, rpId: location.hostname, allowCredentials: [{ id: b64u.dec(stored.id), type: "public-key" }], userVerification: "preferred", timeout: 60000, }, }); if (!assertion) throw new Error("no assertion"); return stored; }; const clearBiometric = () => { localStorage.removeItem(BIO_STORAGE_KEY); }; const LoginPage = ({ onLogin }) => { const [step, setStep] = React.useState("credentials"); // credentials | otp const [role, setRole] = React.useState("pflege"); const [arztId, setArztId] = React.useState("schn"); const [email, setEmail] = React.useState("maria.lehmann@rosenhof.de"); const [password, setPassword] = React.useState("••••••••••"); const [otp, setOtp] = React.useState(["","","","","",""]); const [bioStatus, setBioStatus] = React.useState(""); // "" | "busy" | "error" const [bioMsg, setBioMsg] = React.useState(""); const [bioAvail, setBioAvail] = React.useState(false); const [bioEnrolled, setBioEnrolled] = React.useState(false); const inputs = React.useRef([]); React.useEffect(() => { if (!webAuthnSupported()) return; setBioAvail(true); setBioEnrolled(!!localStorage.getItem(BIO_STORAGE_KEY)); // Falls Platform-Authenticator (Face ID / TouchID) verfügbar: nachgewiesen prüfen try { window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable?.().then((avail) => { setBioAvail(avail === true); }); } catch {} }, []); const handleBiometric = async () => { if (bioStatus === "busy") return; setBioStatus("busy"); setBioMsg(""); try { if (bioEnrolled) { const stored = await authenticateBiometric(); setBioStatus(""); setBioMsg("Erfolg"); setTimeout(() => onLogin(stored.role || role, { arztId }), 300); } else { await registerBiometric(role); setBioEnrolled(true); setBioStatus(""); setBioMsg("Biometrie aktiviert — bitte erneut tippen"); } } catch (err) { setBioStatus("error"); setBioMsg(err?.message?.includes("not enrolled") ? "Noch nicht eingerichtet" : err?.name === "NotAllowedError" ? "Abgebrochen" : "Fehler bei der Biometrie"); setTimeout(() => { setBioStatus(""); setBioMsg(""); }, 2500); } }; const roleMap = [ { id: "pflege", nm: "Pflegekraft / Leitung", sub: "Heim-Portal", icon: "home" }, { id: "arzt", nm: "Arzt", sub: "Multi-Heim Queue", icon: "stethoscope" }, { id: "apotheke", nm: "Apotheke", sub: "Rezept-Eingang", icon: "pill" }, { id: "therapeut", nm: "Therapeut", sub: "Physio · Ergo · Logo",icon: "activity" }, { id: "admin", nm: "Administrator", sub: "MedLink Betrieb", icon: "shield" }, ]; const onOtpChange = (i, v) => { const next = [...otp]; next[i] = v.slice(-1); setOtp(next); if (v && i < 5) inputs.current[i+1]?.focus(); }; const submit = (e) => { e.preventDefault(); if (step === "credentials") setStep("otp"); else onLogin(role, { arztId }); }; return (

{step === "credentials" ? "Anmelden" : "Zwei-Faktor-Bestätigung"}

{step === "credentials" ? "Wählen Sie Ihre Rolle und melden Sie sich an." : <>Code aus Ihrer Authenticator-App (6 Stellen) · Hilfe}
{step === "credentials" && (
{roleMap.map(r => ( ))}
{role === "arzt" && (
{(window.DOCTORS || []).map(d => { const tone = { Hausarzt: "teal", Internist: "amber", Geriater: "teal", Nervenarzt: "violet", Palliativ: "rose", Urologe: "indigo" }[d.spec] || "teal"; const isSel = arztId === d.id; return ( ); })}
)}
setEmail(e.target.value)} autoComplete="email" />
setPassword(e.target.value)} autoComplete="current-password" />
{bioAvail && ( <>
Biometrisch
{bioEnrolled && ( )} )}
SSO
Mit der Anmeldung stimmen Sie unseren Nutzungsbedingungen und der Datenschutzerklärung zu.
AVV nach Art. 28 DSGVO liegt zwischen Mandant und MedLink GmbH vor.
)} {step === "otp" && (
{otp.map((v, i) => ( inputs.current[i] = el} inputMode="numeric" maxLength="1" value={v} onChange={e => onOtpChange(i, e.target.value)} autoFocus={i === 0} /> ))}
Code erneuert sich alle 30 Sekunden · Hardware-Token verwenden
Angemeldet als {email} · Rolle: {roleMap.find(r => r.id === role)?.nm}
)}
); }; window.LoginPage = LoginPage;