Phase1

2026-06-26 11:31:54 +02:00
parent 4fe25e6ec3
commit 58961000eb
123 changed files with 4231 additions and 136 deletions
--- a/apps/web/src/components/auth/forgot-password-form.tsx
+++ b/apps/web/src/components/auth/forgot-password-form.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Link } from "@/i18n/navigation";
+import { ApiError, forgotPassword } from "@/lib/api/auth";
+import { createForgotPasswordSchema, type ForgotPasswordFormValues } from "@/lib/schemas/auth";
+
+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 ForgotPasswordForm() {
+  const t = useTranslations("auth");
+  const tv = useTranslations("validation");
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [submitted, setSubmitted] = useState(false);
+
+  const schema = createForgotPasswordSchema({
+    emailRequired: tv("emailRequired"),
+    emailInvalid: tv("emailInvalid"),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<ForgotPasswordFormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { email: "" },
+  });
+
+  async function onSubmit(values: ForgotPasswordFormValues) {
+    setApiError(null);
+
+    try {
+      await forgotPassword(values.email);
+      setSubmitted(true);
+    } catch (error) {
+      if (error instanceof ApiError) {
+        setApiError(error.detail ?? error.title);
+      } else {
+        setApiError(t("errors.generic"));
+      }
+    }
+  }
+
+  if (submitted) {
+    return (
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>{t("forgotPasswordTitle")}</CardTitle>
+          <CardDescription>{t("forgotPasswordSent")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Link href="/login" className="text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
+            {t("backToLogin")}
+          </Link>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>{t("forgotPasswordTitle")}</CardTitle>
+        <CardDescription>{t("forgotPasswordSubtitle")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
+          <div className="space-y-2">
+            <label htmlFor="email" className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+              {t("email")}
+            </label>
+            <input
+              id="email"
+              type="email"
+              autoComplete="email"
+              placeholder={t("emailPlaceholder")}
+              aria-invalid={errors.email ? "true" : "false"}
+              aria-describedby={errors.email ? "email-error" : undefined}
+              className={inputClassName}
+              {...register("email")}
+            />
+            {errors.email ? (
+              <p id="email-error" className="text-sm text-red-600" role="alert">
+                {errors.email.message}
+              </p>
+            ) : null}
+          </div>
+
+          {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}
+
+          <Button type="submit" className="w-full" isLoading={isSubmitting}>
+            {t("forgotPasswordSubmit")}
+          </Button>
+        </form>
+
+        <p className="mt-4 text-center text-sm text-zinc-600 dark:text-zinc-400">
+          <Link href="/login" className="font-medium text-sky-600 hover:underline dark:text-sky-400">
+            {t("backToLogin")}
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}