init

frontend/components/auth/signin-form.tsx

@@ -0,0 +1,117 @@
+"use client";
+import { useForm } from "react-hook-form";
+import { signin } from "./actions"; // optional: remove if you use your own API
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { toast, Bounce } from "react-toastify";
+import { useRouter } from "next/navigation";
+
+type FormData = {
+  name: string;
+  password: string;
+};
+
+export default function SignInPage() {
+  const { register, handleSubmit, formState } = useForm<FormData>({
+    mode: "onSubmit",
+  });
+  const router = useRouter();
+
+  async function onSubmit(data: FormData) {
+    // Example with next-auth credential sign in (optional)
+    // If you use your own API, replace this block with a fetch to /api/auth/signin
+    const res = await signin(data.name, data.password);
+    if (res) {
+      router.push("/dashboard");
+    } else {
+      toast.error("Falsche Anmeldedaten!", {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        transition: Bounce,
+      });
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Anmelden</CardTitle>
+          <CardDescription>
+            Nutze deinen Namen und Passwort zum anmelden.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            id="signin-form"
+            onSubmit={handleSubmit(onSubmit)}
+            className="space-y-4"
+          >
+            <div>
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                placeholder="Dein Name"
+                suppressHydrationWarning={true}
+                {...register("name", { required: "Name is required" })}
+                aria-invalid={Boolean(formState.errors.name)}
+              />
+              {formState.errors.name && (
+                <p className="text-sm text-red-600 mt-1">
+                  {formState.errors.name.message}
+                </p>
+              )}
+            </div>
+            <div>
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Dein Passwort"
+                suppressHydrationWarning={true}
+                {...register("password", {
+                  required: "Password is required",
+                  minLength: 4,
+                })}
+                aria-invalid={Boolean(formState.errors.password)}
+              />
+              {formState.errors.password && (
+                <p className="text-sm text-red-600 mt-1">
+                  {formState.errors.password.type === "minLength"
+                    ? "Password must be at least 6 characters"
+                    : formState.errors.password.message}
+                </p>
+              )}
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter>
+          <div className="w-full flex justify-end">
+            <Button
+              form="signin-form"
+              type="submit"
+              disabled={formState.isSubmitting}
+            >
+              {formState.isSubmitting ? "Anmelden..." : "Anmelden"}
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}