fix(auth): correct local cookie security configuration

validation-suite/frontend/atlas/app/(auth)/login/page.tsx

@@ -2,32 +2,79 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { LogIn } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { AuthProvider, useAuth } from "@/components/auth";
 import { BrandLogo } from "@/components/brand/brand-logo";
-import { login } from "@/lib/api";
+import { login, User } from "@/lib/api";
 
 const schema = z.object({
-  email: z.string().email(),
-  password: z.string().min(8)
+  email: z.string().email("Bitte gib eine gueltige E-Mail-Adresse ein."),
+  password: z.string().min(1, "Bitte gib dein Passwort ein.")
 });
 
 type LoginForm = z.infer<typeof schema>;
 
+type LoginError = { status: number; message: string };
+
+function mapLoginError(error: unknown): LoginError {
+  const status = typeof error === "object" && error && "status" in error ? Number((error as { status?: number }).status) : 0;
+  switch (status) {
+    case 401:
+      return { status, message: "E-Mail-Adresse oder Passwort ist falsch." };
+    case 403:
+      return { status, message: "Dieses Benutzerkonto ist deaktiviert." };
+    case 422:
+      return { status, message: "Bitte pruefe deine Eingaben." };
+    case 500:
+    case 502:
+      return { status, message: "Der Anmeldedienst ist momentan nicht erreichbar." };
+    default:
+      return { status, message: "Anmeldung fehlgeschlagen. Bitte erneut versuchen." };
+  }
+}
+
 function LoginPanel() {
-  const router = useRouter();
   const auth = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [toast, setToast] = useState("");
+  const [success, setSuccess] = useState("");
+
   const form = useForm<LoginForm>({
     resolver: zodResolver(schema),
-    defaultValues: { email: "admin@schubamed.de", password: "" }
+    defaultValues: { email: "admin@schubamed.de", password: "" },
+    mode: "onSubmit"
   });
 
-  async function onSubmit(values: LoginForm) {
-    const result = await login(values.email, values.password);
-    auth.setToken(result.access_token);
-    router.push("/dashboard");
+  useEffect(() => {
+    if (!toast) return;
+    const timeout = window.setTimeout(() => setToast(""), 5000);
+    return () => window.clearTimeout(timeout);
+  }, [toast]);
+
+  async function handleSubmit(values: LoginForm) {
+    setLoading(true);
+    setToast("");
+    setSuccess("");
+    try {
+      const result = await login(values.email, values.password);
+      const currentUser = (await auth.refreshUser()) ?? (result.user as User);
+      auth.setUser(currentUser);
+      auth.setToken("authenticated");
+      const target = currentUser.must_change_password ? "/profile/security" : "/dashboard";
+      setSuccess("Anmeldung erfolgreich");
+      window.location.replace(target);
+    } catch (error) {
+      const mapped = mapLoginError(error);
+      if (process.env.NODE_ENV !== "production") {
+        console.error("Login failed", error);
+        console.error("Login failed mapped", mapped.status, mapped.message);
+      }
+      setToast(mapped.message);
+    } finally {
+      setLoading(false);
+    }
   }
 
   return (
@@ -38,7 +85,14 @@ function LoginPanel() {
           <h1 className="mt-2 text-3xl font-semibold text-text">Anmelden</h1>
           <p className="mt-3 text-sm leading-6 text-text-light">Sicherer Zugriff auf Atlas Workspace.</p>
         </div>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            void form.handleSubmit(handleSubmit)(event);
+          }}
+          className="space-y-5"
+          noValidate
+        >
           <label className="block">
             <span className="text-sm font-medium text-text">E-Mail</span>
             <input
@@ -46,6 +100,9 @@ function LoginPanel() {
               className="mt-2 h-12 w-full rounded-lg border border-border bg-white px-4 outline-none transition focus:border-primary"
               {...form.register("email")}
             />
+            {form.formState.errors.email && (
+              <p className="mt-2 text-sm text-danger">{form.formState.errors.email.message}</p>
+            )}
           </label>
           <label className="block">
             <span className="text-sm font-medium text-text">Passwort</span>
@@ -54,13 +111,19 @@ function LoginPanel() {
               className="mt-2 h-12 w-full rounded-lg border border-border bg-white px-4 outline-none transition focus:border-primary"
               {...form.register("password")}
             />
+            {form.formState.errors.password && (
+              <p className="mt-2 text-sm text-danger">{form.formState.errors.password.message}</p>
+            )}
           </label>
+          {toast && <div className="rounded-lg border border-danger/30 bg-white px-4 py-3 text-sm text-danger shadow-soft">{toast}</div>}
+          {success && <div className="rounded-lg border border-success/30 bg-white px-4 py-3 text-sm text-success shadow-soft">{success}</div>}
           <button
             type="submit"
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary px-5 font-semibold text-white shadow-soft transition hover:bg-primary-dark"
+            disabled={loading}
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary px-5 font-semibold text-white shadow-soft transition hover:bg-primary-dark disabled:cursor-not-allowed disabled:opacity-60"
           >
-            <LogIn className="h-5 w-5" />
-            Einloggen
+            {loading ? <span className="spinner" /> : <LogIn className="h-5 w-5" />}
+            <span>{loading ? "Anmeldung läuft…" : "Anmelden"}</span>
           </button>
         </form>
       </section>