Add Better Auth admin authentication

components/auth-entry.tsx

@@ -1,9 +1,41 @@
-import { ArrowRight, LockKeyhole, UserPlus } from "lucide-react";
+"use client"
+import { type FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowRight, LockKeyhole } from "lucide-react";
 
-import { signInMock, signUpMock } from "@/app/actions/auth";
+import { authClient } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
 
 export function AuthEntry() {
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const router = useRouter();
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+
+    const formData = new FormData(event.currentTarget);
+    const email = String(formData.get("email") ?? "");
+    const password = String(formData.get("password") ?? "");
+
+    const result = await authClient.signIn.email({
+      email,
+      password,
+    });
+
+    setPending(false);
+
+    if (result.error) {
+      setError(result.error.message ?? "Authentifizierung fehlgeschlagen.");
+      return;
+    }
+
+    router.replace("/dashboard");
+    router.refresh();
+  }
+
   return (
     <main className="flex min-h-dvh items-center justify-center bg-background px-6 py-10">
       <section className="grid w-full max-w-5xl overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm md:grid-cols-[1.05fr_0.95fr]">
@@ -19,8 +51,9 @@ export function AuthEntry() {
               Lokale Webdesign-Leads recherchieren, auditieren und freigeben.
             </h1>
             <p className="mt-4 max-w-lg text-sm leading-6 text-muted-foreground sm:text-base">
-              Melde dich an, um Kampagnen, Lead-Qualitaet, Audit-Freigaben und
-              Outreach-Schritte in einem Arbeitsbereich zu steuern.
+              Melde dich mit dem Admin-Konto an, um Kampagnen, Lead-Qualitaet,
+              Audit-Freigaben und Outreach-Schritte in einem Arbeitsbereich zu
+              steuern.
             </p>
           </div>
 
@@ -43,37 +76,56 @@ export function AuthEntry() {
         <div className="flex flex-col justify-center p-6 lg:p-8">
           <div className="mx-auto w-full max-w-sm">
             <h2 className="text-2xl font-semibold tracking-normal">
-              Sign in oder sign up
+              Admin Login
             </h2>
             <p className="mt-2 text-sm leading-6 text-muted-foreground">
-              Die Authentifizierung ist in TASK-1 noch simuliert. Beide
-              Aktionen setzen eine lokale Mock-Session und leiten ins Dashboard.
+              Melde dich mit E-Mail und Passwort an.
             </p>
 
-            <div className="mt-8 grid gap-3">
-              <form action={signInMock}>
-                <Button className="w-full justify-between" size="lg">
-                  <span className="inline-flex items-center gap-2">
-                    <LockKeyhole />
-                    Sign in
-                  </span>
-                  <ArrowRight />
-                </Button>
-              </form>
-              <form action={signUpMock}>
-                <Button
-                  className="w-full justify-between"
-                  size="lg"
-                  variant="outline"
+            <form className="mt-8 grid gap-3" onSubmit={handleSubmit}>
+              <label className="block space-y-2 text-sm font-medium">
+                <span>E-Mail</span>
+                <input
+                  name="email"
+                  type="email"
+                  className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                  autoComplete="email"
+                  required
+                  placeholder="admin@firma.de"
+                />
+              </label>
+              <label className="block space-y-2 text-sm font-medium">
+                <span>Passwort</span>
+                <input
+                  name="password"
+                  type="password"
+                  className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                  autoComplete="current-password"
+                  required
+                  minLength={8}
+                  placeholder="mindestens 8 Zeichen"
+                />
+              </label>
+              {error ? (
+                <p
+                  className="text-sm leading-6 text-destructive"
+                  role="alert"
                 >
-                  <span className="inline-flex items-center gap-2">
-                    <UserPlus />
-                    Sign up
-                  </span>
-                  <ArrowRight />
-                </Button>
-              </form>
-            </div>
+                  {error}
+                </p>
+              ) : null}
+              <Button
+                className="w-full justify-between"
+                size="lg"
+                disabled={pending}
+              >
+                <span className="inline-flex items-center gap-2">
+                  <LockKeyhole />
+                  Anmelden
+                </span>
+                {pending ? "..." : <ArrowRight />}
+              </Button>
+            </form>
           </div>
         </div>
       </section>