initial commit

2026-06-26 10:45:08 +02:00
commit e37ea87b35
118 changed files with 7726 additions and 0 deletions
--- a/apps/web/src/components/auth/login-form.tsx
+++ b/apps/web/src/components/auth/login-form.tsx
@@ -0,0 +1,108 @@
+"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 { submitLogin } from "@/lib/api/auth";
+import { createLoginSchema, type LoginFormValues } from "@/lib/schemas/auth";
+
+export function LoginForm() {
+  const t = useTranslations("auth");
+  const tv = useTranslations("validation");
+  const [submitted, setSubmitted] = useState(false);
+
+  const schema = createLoginSchema({
+    emailRequired: tv("emailRequired"),
+    emailInvalid: tv("emailInvalid"),
+    passwordRequired: tv("passwordRequired"),
+    passwordMin: tv("passwordMin"),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginFormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { email: "", password: "" },
+  });
+
+  async function onSubmit(values: LoginFormValues) {
+    await submitLogin(values);
+    setSubmitted(true);
+  }
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>{t("loginTitle")}</CardTitle>
+        <CardDescription>{t("loginSubtitle")}</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="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"
+              {...register("email")}
+            />
+            {errors.email ? (
+              <p id="email-error" className="text-sm text-red-600" role="alert">
+                {errors.email.message}
+              </p>
+            ) : null}
+          </div>
+
+          <div className="space-y-2">
+            <label htmlFor="password" className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+              {t("password")}
+            </label>
+            <input
+              id="password"
+              type="password"
+              autoComplete="current-password"
+              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"
+              {...register("password")}
+            />
+            {errors.password ? (
+              <p id="password-error" className="text-sm text-red-600" role="alert">
+                {errors.password.message}
+              </p>
+            ) : 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")}
+            </p>
+          ) : null}
+
+          <Button type="submit" className="w-full" isLoading={isSubmitting}>
+            {t("loginTitle")}
+          </Button>
+        </form>
+
+        <p className="mt-4 text-center text-sm text-zinc-600 dark:text-zinc-400">
+          {t("noAccount")}{" "}
+          <Link href="/register" className="font-medium text-sky-600 hover:underline dark:text-sky-400">
+            {t("registerTitle")}
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}