Phase1

apps/web/src/components/auth/login-form.tsx

@@ -2,17 +2,25 @@
 
 import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Link } from "@/i18n/navigation";
-import { submitLogin } from "@/lib/api/auth";
+import { Link, useRouter } from "@/i18n/navigation";
+import { ApiError, submitLogin } from "@/lib/api/auth";
 import { createLoginSchema, type LoginFormValues } from "@/lib/schemas/auth";
+import { useAuth } from "@/components/providers/auth-provider";
+
+const inputClassName =
+  "flex h-10 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100";
 
 export function LoginForm() {
   const t = useTranslations("auth");
   const tv = useTranslations("validation");
-  const [submitted, setSubmitted] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { refresh } = useAuth();
+  const [apiError, setApiError] = useState<string | null>(null);
 
   const schema = createLoginSchema({
     emailRequired: tv("emailRequired"),
@@ -31,8 +39,26 @@ export function LoginForm() {
   });
 
   async function onSubmit(values: LoginFormValues) {
-    await submitLogin(values);
-    setSubmitted(true);
+    setApiError(null);
+
+    try {
+      const result = await submitLogin(values);
+
+      if (result.twoFactorRequired && result.challengeId) {
+        router.push(`/login/2fa?challenge=${encodeURIComponent(result.challengeId)}`);
+        return;
+      }
+
+      await refresh();
+      const redirectTo = searchParams.get("redirect");
+      router.push(redirectTo?.startsWith("/") ? redirectTo : "/dashboard");
+    } catch (error) {
+      if (error instanceof ApiError) {
+        setApiError(error.detail ?? error.title);
+      } else {
+        setApiError(t("errors.generic"));
+      }
+    }
   }
 
   return (
@@ -54,7 +80,7 @@ export function LoginForm() {
               placeholder={t("emailPlaceholder")}
               aria-invalid={errors.email ? "true" : "false"}
               aria-describedby={errors.email ? "email-error" : undefined}
-              className="flex h-10 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+              className={inputClassName}
               {...register("email")}
             />
             {errors.email ? (
@@ -65,9 +91,17 @@ export function LoginForm() {
           </div>
 
           <div className="space-y-2">
-            <label htmlFor="password" className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
-              {t("password")}
-            </label>
+            <div className="flex items-center justify-between">
+              <label htmlFor="password" className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                {t("password")}
+              </label>
+              <Link
+                href="/forgot-password"
+                className="text-xs font-medium text-sky-600 hover:underline dark:text-sky-400"
+              >
+                {t("forgotPasswordLink")}
+              </Link>
+            </div>
             <input
               id="password"
               type="password"
@@ -75,7 +109,7 @@ export function LoginForm() {
               placeholder={t("passwordPlaceholder")}
               aria-invalid={errors.password ? "true" : "false"}
               aria-describedby={errors.password ? "password-error" : undefined}
-              className="flex h-10 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+              className={inputClassName}
               {...register("password")}
             />
             {errors.password ? (
@@ -85,9 +119,9 @@ export function LoginForm() {
             ) : null}
           </div>
 
-          {submitted ? (
-            <p className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100">
-              {t("apiPending")}
+          {apiError ? (
+            <p className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100" role="alert">
+              {apiError}
             </p>
           ) : null}