Initial commit: Kalendartool (Next.js, Prisma, Docker)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-10-08 14:38:04 +02:00
commit bc49c3074e
94 changed files with 12812 additions and 0 deletions
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+/**
+ * Registrierungsseite (plan.md Abschnitt 3 und 11).
+ * Mit Invite-Token (aus URL) wird dem Kalender automatisch zugeordnet.
+ */
+import { Suspense, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { Button, Card, ErrorMessage, Input, Label } from '@/components/ui/ui';
+
+function RegisterForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const inviteToken = searchParams.get('token') ?? '';
+
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+
+    const formData = new FormData(event.currentTarget);
+    const password = String(formData.get('password') ?? '');
+    const passwordRepeat = String(formData.get('passwordRepeat') ?? '');
+
+    if (password !== passwordRepeat) {
+      setError('Die Passwoerter stimmen nicht ueberein.');
+      setBusy(false);
+      return;
+    }
+
+    try {
+      const username = String(formData.get('username') ?? '').trim();
+
+      const response = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: formData.get('email'),
+          password,
+          ...(username ? { username } : {}),
+          ...(inviteToken ? { inviteToken } : {}),
+        }),
+      });
+
+      if (!response.ok) {
+        const data = (await response.json()) as { error?: string };
+        setError(data.error ?? 'Registrierung fehlgeschlagen.');
+        return;
+      }
+      router.push('/dashboard');
+      router.refresh();
+    } catch {
+      setError('Netzwerkfehler. Bitte erneut versuchen.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Card>
+      {inviteToken && (
+        <p className="mb-4 rounded-md bg-slate-100 px-3 py-2 text-sm text-slate-700 dark:bg-slate-800 dark:text-slate-300">
+          Du wurdest zu einem Kalender eingeladen. Nach der Registrierung siehst du
+          ausschliesslich diesen Kalender.
+        </p>
+      )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <ErrorMessage message={error} />
+        <div>
+          <Label htmlFor="email">E-Mail</Label>
+          <Input id="email" name="email" type="email" required autoComplete="email" />
+        </div>
+        <div>
+          <Label htmlFor="username">Benutzername (optional)</Label>
+          <Input
+            id="username"
+            name="username"
+            type="text"
+            maxLength={32}
+            autoComplete="username"
+            placeholder="z. B. max_mustermann"
+          />
+          <p className="mt-1 text-xs text-slate-500">
+            2-32 Zeichen; Buchstaben, Ziffern, _ - . erlaubt.
+          </p>
+        </div>
+        <div>
+          <Label htmlFor="password">Passwort</Label>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            required
+            minLength={10}
+            autoComplete="new-password"
+          />
+          <p className="mt-1 text-xs text-slate-500">
+            Mindestens 10 Zeichen mit Gross-/Kleinbuchstabe und Ziffer.
+          </p>
+        </div>
+        <div>
+          <Label htmlFor="passwordRepeat">Passwort wiederholen</Label>
+          <Input
+            id="passwordRepeat"
+            name="passwordRepeat"
+            type="password"
+            required
+            autoComplete="new-password"
+          />
+        </div>
+        <Button disabled={busy}>{busy ? 'Registrieren …' : 'Registrieren'}</Button>
+      </form>
+      <p className="mt-4 text-sm">
+        Bereits registriert?{' '}
+        <Link href="/login" className="text-slate-700 underline hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100">
+          Anmelden
+        </Link>
+      </p>
+    </Card>
+  );
+}
+
+export default function RegisterPage() {
+  return (
+    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-4">
+      <h1 className="mb-6 text-center text-2xl font-bold">Konto erstellen</h1>
+      <Suspense fallback={<Card>Wird geladen …</Card>}>
+        <RegisterForm />
+      </Suspense>
+    </main>
+  );
+}