docs: README, Datenschutztexte, Dockerfile und Sicherungsskripte
Damit ist Etappe 1 abgeschlossen und betriebsfertig dokumentiert. README mit beiden Betriebswegen. Docker Compose auf eigenem Server ist der Hauptweg; Vercel und Neon sind vollstaendig beschrieben, aber mit einer klaren Begruendung, warum ich davon abrate: beide Anbieter sind US-Unternehmen und unterliegen auch bei EU-Region potenziell dem CLOUD-Act. Bei Gesundheitsdaten einer nicht entscheidungsfaehigen Person ist das eine Abwaegung, die man bewusst treffen muss. Reverse-Proxy-Beispiele fuer Caddy, nginx und Traefik - der Proxy selbst ist nicht Teil des Compose-Setups, weil er auf dem Zielserver schon steht. Die Datenbank hat keine Portfreigabe. Sicherung: pg_dump schreibt direkt in die Verschluesselung, der Klartext landet nie auf der Platte. Danach eine Selbstpruefung - laesst sich die Datei nicht wieder entschluesseln, endet der Lauf mit Fehler statt mit einem stillen Scheinerfolg. Der jeweils erste Stand eines Monats bleibt dauerhaft stehen. Die README sagt ausdruecklich, was das Backup NICHT enthaelt: den Schluessel ENC_KEY_V1 und die Dateien im Objektspeicher. Dazu eine Anleitung, die Wiederherstellung einmal im Jahr zu ueben - mit dem letzten Schritt, in der Anwendung nachzusehen, ob die Diagnosen im Klartext erscheinen. Erst dann stimmt nicht nur die Datenbank, sondern auch der Schluessel. Verarbeitungsverzeichnis und Datenschutzhinweise als ausfuellbare Textbausteine. Die Hinweise sind in einfacher Sprache geschrieben - sie sollen der betreuten Person vorgelesen werden koennen. Die Seite /datenschutz liest denselben Text aus docs/, damit es nicht zwei Fassungen gibt, die auseinanderlaufen. Dockerfile in drei Stufen mit Tesseract, deutschen Sprachdaten und poppler-utils. Zeitzone Europe/Berlin ist gesetzt - ohne sie rechnet der Server in UTC und verschiebt Fristen um einen Tag. Etappe: 1 Phase: Fundament
This commit is contained in:
Florian Wilde
@@ -0,0 +1,109 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { KeyRound, ShieldCheck } from 'lucide-react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { SeitenKopf } from '@/components/seiten-kopf'
|
||||
import { erfordereBenutzer } from '@/lib/auth/sitzung'
|
||||
import { ROLLEN_BESCHRIFTUNG, ROLLEN_ERKLAERUNG } from '@/lib/auth/rollen'
|
||||
import { formatDatumZeit } from '@/lib/utils'
|
||||
import { PasswortFormular } from './passwort-formular'
|
||||
|
||||
export const metadata: Metadata = { title: 'Mein Konto' }
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function KontoSeite() {
|
||||
const benutzer = await erfordereBenutzer()
|
||||
const codesUebrig = benutzer.wiederherstellungscodes.length
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<SeitenKopf titel="Mein Konto" beschreibung="Zugangsdaten und zweiter Faktor." />
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">Zugang</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<dl className="divide-y">
|
||||
<div className="flex justify-between gap-4 py-2.5">
|
||||
<dt className="text-sm text-muted-foreground">Name</dt>
|
||||
<dd className="font-medium">{benutzer.name}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 py-2.5">
|
||||
<dt className="text-sm text-muted-foreground">E-Mail</dt>
|
||||
<dd className="font-medium">{benutzer.email}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 py-2.5">
|
||||
<dt className="text-sm text-muted-foreground">Rolle</dt>
|
||||
<dd className="text-right">
|
||||
<Badge variant="secondary">{ROLLEN_BESCHRIFTUNG[benutzer.rolle]}</Badge>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{ROLLEN_ERKLAERUNG[benutzer.rolle]}
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 py-2.5">
|
||||
<dt className="text-sm text-muted-foreground">Letzte Anmeldung</dt>
|
||||
<dd className="font-medium">{formatDatumZeit(benutzer.letzteAnmeldung)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<ShieldCheck className="size-5" aria-hidden="true" />
|
||||
Zweiter Faktor
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{benutzer.totpAktiviertAm
|
||||
? `Eingerichtet am ${formatDatumZeit(benutzer.totpAktiviertAm)}.`
|
||||
: 'Noch nicht eingerichtet.'}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-sm">
|
||||
{codesUebrig > 0 ? (
|
||||
<>
|
||||
Noch <strong>{codesUebrig}</strong> Wiederherstellungscode
|
||||
{codesUebrig === 1 ? '' : 's'} übrig.
|
||||
{codesUebrig <= 2 && (
|
||||
<span className="ml-1 text-ampel-orange">
|
||||
Es wird Zeit, neue zu erzeugen.
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-ampel-rot">
|
||||
Keine Wiederherstellungscodes mehr übrig. Geht dein Handy verloren, kommst du
|
||||
nicht mehr an die Daten. Bitte gleich neue erzeugen.
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/konto/zwei-faktor">Zweiten Faktor verwalten</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<KeyRound className="size-5" aria-hidden="true" />
|
||||
Passwort ändern
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Nach dem Ändern werden alle anderen offenen Sitzungen beendet — auch auf Geräten, an
|
||||
denen du gerade nicht sitzt.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PasswortFormular />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
'use client'
|
||||
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { AlertCircle, CheckCircle2, Loader2 } from 'lucide-react'
|
||||
import { passwortAendern, type PasswortZustand } from '@/server/actions/konto'
|
||||
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" disabled={pending}>
|
||||
{pending && <Loader2 className="animate-spin" aria-hidden="true" />}
|
||||
{pending ? 'Wird geändert …' : 'Passwort ändern'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function PasswortFormular() {
|
||||
const [zustand, aktion] = useActionState<PasswortZustand, FormData>(passwortAendern, {})
|
||||
|
||||
if (zustand.erfolg) {
|
||||
return (
|
||||
<Alert variant="erfolg">
|
||||
<CheckCircle2 aria-hidden="true" />
|
||||
<AlertDescription>
|
||||
Passwort geändert. Alle offenen Sitzungen wurden beendet — auch diese hier. Beim
|
||||
nächsten Klick wirst du zur Anmeldung geschickt.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<form action={aktion} className="space-y-4" noValidate>
|
||||
{zustand.fehler && (
|
||||
<Alert variant="fehler">
|
||||
<AlertCircle aria-hidden="true" />
|
||||
<AlertDescription>{zustand.fehler}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Feld id="aktuell" beschriftung="Bisheriges Passwort" fehler={zustand.felder?.aktuell} pflicht>
|
||||
<Input name="aktuell" type="password" autoComplete="current-password" required />
|
||||
</Feld>
|
||||
|
||||
<Feld
|
||||
id="neu"
|
||||
beschriftung="Neues Passwort"
|
||||
erklaerung="Mindestens 12 Zeichen."
|
||||
fehler={zustand.felder?.neu}
|
||||
pflicht
|
||||
>
|
||||
<Input name="neu" type="password" autoComplete="new-password" required />
|
||||
</Feld>
|
||||
|
||||
<Feld
|
||||
id="wiederholung"
|
||||
beschriftung="Neues Passwort wiederholen"
|
||||
fehler={zustand.felder?.wiederholung}
|
||||
pflicht
|
||||
>
|
||||
<Input name="wiederholung" type="password" autoComplete="new-password" required />
|
||||
</Feld>
|
||||
|
||||
<Absenden />
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { Check, Copy, Loader2, RefreshCw } from 'lucide-react'
|
||||
import { wiederherstellungscodesNeu } from '@/server/actions/zwei-faktor'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
/**
|
||||
* Neue Wiederherstellungscodes erzeugen.
|
||||
*
|
||||
* Die Aktion verlangt eine frische Anmeldung. Ist die zu lange her,
|
||||
* leitet der Server zur Bestaetigungsseite um - das passiert im
|
||||
* Hintergrund und braucht hier keine Behandlung.
|
||||
*/
|
||||
export function NeueCodes() {
|
||||
const [codes, setCodes] = useState<string[] | null>(null)
|
||||
const [kopiert, setKopiert] = useState(false)
|
||||
const [laeuft, starten] = useTransition()
|
||||
|
||||
if (codes) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<ul className="grid grid-cols-2 gap-2 rounded-md border bg-muted/50 p-4 font-mono text-sm">
|
||||
{codes.map((code) => (
|
||||
<li key={code} className="tracking-wide">
|
||||
{code}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Diese Liste wird dir nie wieder angezeigt. Drucke sie aus und lege sie zu deinen
|
||||
Betreuungsunterlagen — nicht auf dasselbe Gerät wie die Authenticator-App.
|
||||
</p>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(codes.join('\n')).then(() => {
|
||||
setKopiert(true)
|
||||
setTimeout(() => setKopiert(false), 2500)
|
||||
})
|
||||
}}
|
||||
>
|
||||
{kopiert ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
|
||||
{kopiert ? 'Kopiert' : 'Codes kopieren'}
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={() => window.print()}>
|
||||
Drucken
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={laeuft}
|
||||
onClick={() => {
|
||||
starten(async () => {
|
||||
setCodes(await wiederherstellungscodesNeu())
|
||||
})
|
||||
}}
|
||||
>
|
||||
{laeuft ? <Loader2 className="animate-spin" aria-hidden="true" /> : <RefreshCw aria-hidden="true" />}
|
||||
{laeuft ? 'Wird erzeugt …' : 'Neue Codes erzeugen'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { redirect } from 'next/navigation'
|
||||
import { KeyRound, ShieldCheck } from 'lucide-react'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { SeitenKopf } from '@/components/seiten-kopf'
|
||||
import { erfordereBenutzer } from '@/lib/auth/sitzung'
|
||||
import { formatDatumZeit } from '@/lib/utils'
|
||||
import { NeueCodes } from './neue-codes'
|
||||
|
||||
export const metadata: Metadata = { title: 'Zweiter Faktor' }
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function ZweiFaktorSeite() {
|
||||
const benutzer = await erfordereBenutzer()
|
||||
if (!benutzer.totpAktiviertAm) redirect('/zwei-faktor/einrichten')
|
||||
|
||||
const uebrig = benutzer.wiederherstellungscodes.length
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<SeitenKopf
|
||||
titel="Zweiter Faktor"
|
||||
beschreibung="Der Code aus deiner Authenticator-App und die Wiederherstellungscodes."
|
||||
pfad={[{ titel: 'Mein Konto', href: '/konto' }, { titel: 'Zweiter Faktor' }]}
|
||||
/>
|
||||
|
||||
<Alert variant="erfolg">
|
||||
<ShieldCheck aria-hidden="true" />
|
||||
<AlertTitle>Aktiv seit {formatDatumZeit(benutzer.totpAktiviertAm)}</AlertTitle>
|
||||
<AlertDescription>
|
||||
Jede Anmeldung verlangt zusätzlich den sechsstelligen Code. Abschalten lässt sich das
|
||||
nicht — hier liegen Gesundheits- und Vermögensdaten einer Person, die nicht selbst
|
||||
entscheiden kann.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<KeyRound className="size-5" aria-hidden="true" />
|
||||
Wiederherstellungscodes
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Der einzige Weg zurück, wenn das Handy mit der App verloren geht. Jeder Code
|
||||
funktioniert genau einmal.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm">
|
||||
Noch <strong className="tabular-nums">{uebrig}</strong> von ursprünglich 8 Codes
|
||||
übrig.
|
||||
{uebrig <= 2 && uebrig > 0 && (
|
||||
<span className="ml-1 font-medium text-ampel-orange">
|
||||
Erzeuge besser neue, bevor der letzte aufgebraucht ist.
|
||||
</span>
|
||||
)}
|
||||
{uebrig === 0 && (
|
||||
<span className="ml-1 font-medium text-ampel-rot">
|
||||
Ohne Codes bist du bei Verlust des Handys ausgesperrt.
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<Alert variant="warnung">
|
||||
<AlertDescription>
|
||||
Neue Codes machen die alten sofort ungültig. Für diesen Schritt brauchst du Passwort
|
||||
und Code noch einmal.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<NeueCodes />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user