Initial commit

2026-04-08 16:30:44 +02:00
commit f9b17e9964
65 changed files with 7574 additions and 0 deletions
--- a/src/components/login-form.tsx
+++ b/src/components/login-form.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { Alert, Box, Button, Card, CardContent, Chip, Stack, TextField, Typography } from "@mui/material";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import type { FormEvent } from "react";
+import { useState } from "react";
+
+const demoAccounts = [
+  { label: "Vorstand A", username: "vorstand-a" },
+  { label: "Vorstand B", username: "vorstand-b" },
+  { label: "Finanz-AG", username: "finanzen" },
+  { label: "Deko Mitglied", username: "deko" }
+];
+
+export function LoginForm() {
+  const router = useRouter();
+  const [identifier, setIdentifier] = useState("vorstand-a");
+  const [password, setPassword] = useState("demo123!");
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setIsLoading(true);
+
+    const result = await signIn("credentials", {
+      identifier,
+      password,
+      redirect: false
+    });
+
+    setIsLoading(false);
+
+    if (result?.error) {
+      setError("Anmeldung fehlgeschlagen. Bitte Zugangsdaten pr\u00fcfen.");
+      return;
+    }
+
+    router.push("/");
+    router.refresh();
+  }
+
+  return (
+    <Card
+      sx={{
+        maxWidth: 520,
+        width: "100%",
+        mx: "auto",
+        overflow: "visible"
+      }}
+    >
+      <CardContent sx={{ p: { xs: 3, md: 4 } }}>
+        <Stack spacing={3}>
+          <Box>
+            <Typography variant="h2" gutterBottom>
+              Anmeldung
+            </Typography>
+            <Typography color="text.secondary">
+              Melde dich mit deinem Login-Namen und Passwort an.
+            </Typography>
+          </Box>
+
+          <Stack direction="row" useFlexGap flexWrap="wrap" gap={1}>
+            {demoAccounts.map((account) => (
+              <Chip
+                key={account.username}
+                label={account.label}
+                onClick={() => {
+                  setIdentifier(account.username);
+                  setPassword("demo123!");
+                }}
+                variant="outlined"
+              />
+            ))}
+          </Stack>
+
+          <Alert severity="info">{"Demo-Passwort f\u00fcr alle Konten: demo123!"}</Alert>
+
+          {error ? <Alert severity="error">{error}</Alert> : null}
+
+          <Box component="form" onSubmit={handleSubmit}>
+            <Stack spacing={2}>
+              <TextField
+                label="Login-Name"
+                value={identifier}
+                onChange={(event) => setIdentifier(event.target.value)}
+                fullWidth
+                required
+              />
+              <TextField
+                label="Passwort"
+                type="password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                fullWidth
+                required
+              />
+              <Button type="submit" size="large" variant="contained" disabled={isLoading}>
+                {isLoading ? "Anmeldung l\u00e4uft..." : "Einloggen"}
+              </Button>
+            </Stack>
+          </Box>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}