@lastbrain/module-auth 2.0.16 → 2.0.19

package/src/web/public/SignInPage.tsx

@@ -13,17 +13,22 @@ import {
   Link,
 } from "@lastbrain/ui";
 import { ArrowRight, Lock, Mail, Sparkles } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useModuleTranslation } from "@lastbrain/core";
+import { useLocalizedRouter } from "@lastbrain/core";
 
 function SignInForm() {
   const searchParams = useSearchParams();
+  const t = useModuleTranslation("auth");
+
+  const router = useLocalizedRouter();
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, _setError] = useState<string | null>(null);
   const redirectUrl = searchParams.get("redirect");
-  const router = useRouter();
+
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsLoading(true);
@@ -38,7 +43,7 @@ function SignInForm() {
       if (error) {
         addToast({
           color: "danger",
-          title: "Erreur de connexion",
+          title: t("signin.error_title") || "Erreur de connexion",
           description: error.message,
         });
         setIsLoading(false);
@@ -46,71 +51,23 @@ function SignInForm() {
       }
 
       setIsLoading(false);
-      console.log("Signed in user:", data.user);
+
       addToast({
         color: "success",
-        title: "Connecté avec succès !",
-        description: `Bienvenue ${data.user?.email}`,
+        title: t("signin.success_title") || "Connecté avec succès !",
+        description: `${t("signin.success_welcome") || "Bienvenue"} ${data.user?.email}`,
       });
       router.push(redirectUrl || "/auth/dashboard");
     } catch (err) {
       setIsLoading(false);
       addToast({
         color: "danger",
-        title: "Erreur de connexion",
+        title: t("signin.error_title") || "Erreur de connexion",
         description: `${err instanceof Error ? err.message : String(err)}`,
       });
     }
   };
 
-  // return (
-  //   <div className=" min-h-screen h-full  flex flex-col justify-center items-center p-4">
-  //     <Card className="w-full max-w-md">
-  //       <CardHeader className="flex flex-col">
-  //         <h1 className="text-2xl font-semibold text-slate-900 dark:text-white">
-  //           Connexion
-  //         </h1>
-  //         <p className="mt-1 text-sm text-slate-500">
-  //           Utilisez votre adresse email pour vous connecter.
-  //         </p>
-  //       </CardHeader>
-  //       <CardBody>
-  //         <form onSubmit={handleSubmit}>
-  //           <div className="space-y-6">
-  //             <Input
-  //               label="Email"
-  //               type="email"
-  //               className="mb-6"
-  //               required
-  //               value={email}
-  //               onChange={(event) => setEmail(event.target.value)}
-  //             />
-
-  //             <Input
-  //               label="Mot de passe"
-  //               type="password"
-  //               required
-  //               placeholder="Password"
-  //               className="mb-6"
-  //               value={password}
-  //               onChange={(event) => setPassword(event.target.value)}
-  //             />
-
-  //             <Button
-  //               size="lg"
-  //               type="submit"
-  //               className="w-full"
-  //               isLoading={isLoading}
-  //             >
-  //               Se connecter
-  //             </Button>
-  //           </div>
-  //         </form>
-  //       </CardBody>
-  //     </Card>
-  //   </div>
-  // );
-
   return (
     <div className="relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-primary-50/30 to-secondary-50/30 dark:from-primary-950/50 dark:to-secondary-950/50">
       {/* Background decoration */}
@@ -126,15 +83,16 @@ function SignInForm() {
               startContent={<Sparkles className="w-4 h-4" />}
               className="mb-4 p-2"
             >
-              Espace membre
+              {t("signin.chip_label") || "Espace membre"}
             </Chip>
             <h1 className="mb-3 text-4xl font-bold">
               <span className="bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
-                Bon retour
+                {t("signin.title") || "Bon retour"}
               </span>
             </h1>
-            <p className="text-default-600 dark:text-default-400">
-              Connectez-vous pour accéder à votre espace
+            <p className="text-default-600 dark:text-default-700">
+              {t("signin.subtitle") ||
+                "Connectez-vous pour accéder à votre espace"}
             </p>
           </div>
 
@@ -143,9 +101,11 @@ function SignInForm() {
             <CardBody className="gap-6 p-8">
               <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                 <Input
-                  label="Email"
+                  label={t("email") || "Email"}
                   type="email"
-                  placeholder="votre@email.com"
+                  placeholder={
+                    t("signin.email_placeholder") || "votre@email.com"
+                  }
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
@@ -159,7 +119,7 @@ function SignInForm() {
 
                 <div className="flex flex-col gap-2">
                   <Input
-                    label="Mot de passe"
+                    label={t("password") || "Mot de passe"}
                     type="password"
                     placeholder="••••••••"
                     value={password}
@@ -177,7 +137,7 @@ function SignInForm() {
                     href="/forgot-password"
                     className="text-xs text-default-500 hover:text-primary-500 self-end"
                   >
-                    Mot de passe oublié ?
+                    {t("signin.forgot_password") || "Mot de passe oublié ?"}
                   </Link>
                 </div>
 
@@ -199,21 +159,23 @@ function SignInForm() {
                   }
                   isLoading={isLoading}
                 >
-                  Se connecter
+                  {t("signin.submit") || "Se connecter"}
                 </Button>
               </form>
 
               {/* Divider */}
               <div className="relative flex items-center gap-4 py-2">
                 <div className="h-px flex-1 bg-default-200" />
-                <span className="text-xs text-default-400">OU</span>
+                <span className="text-xs text-default-400">
+                  {t("or") || "OU"}
+                </span>
                 <div className="h-px flex-1 bg-default-200" />
               </div>
 
               {/* Sign up link */}
               <div className="text-center">
                 <p className="text-sm text-default-600">
-                  Pas encore de compte ?{" "}
+                  {t("signin.no_account") || "Pas encore de compte ?"}{" "}
                   <Link
                     href={
                       redirectUrl
@@ -222,7 +184,7 @@ function SignInForm() {
                     }
                     className="font-semibold text-primary-600 hover:text-primary-700"
                   >
-                    Créer un compte
+                    {t("signin.sign_up") || "Créer un compte"}
                   </Link>
                 </p>
               </div>
@@ -230,13 +192,13 @@ function SignInForm() {
           </Card>
 
           {/* Footer */}
-          <p className="mt-8 text-center text-xs text-default-400">
-            En vous connectant, vous acceptez nos{" "}
+          <p className="mt-8 text-center text-sm text-default-700">
+            {t("signin.accept_terms")}{" "}
             <Link
               href="/legal/terms"
               className="underline hover:text-primary-500"
             >
-              conditions d'utilisation
+              {t("signin.term")}
             </Link>
           </p>
         </div>

package/src/web/public/SignUpPage.tsx

@@ -9,7 +9,7 @@ import {
   Chip,
   addToast,
 } from "@lastbrain/ui";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { Suspense, useState } from "react";
 import {
   Mail,
@@ -19,11 +19,14 @@ import {
   Sparkles,
   CheckCircle2,
 } from "lucide-react";
-import { supabaseBrowserClient } from "@lastbrain/core";
+import { useModuleTranslation } from "@lastbrain/core";
+import { useLocalizedRouter } from "@lastbrain/core";
 
 function SignUpForm() {
-  const router = useRouter();
+  const router = useLocalizedRouter();
   const searchParams = useSearchParams();
+
+  const t = useModuleTranslation("auth");
   const [fullName, setFullName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -41,12 +44,18 @@ function SignUpForm() {
     setSuccess(null);
 
     if (password !== confirmPassword) {
-      setError("Les mots de passe ne correspondent pas.");
+      setError(
+        t("signup.password_mismatch") ||
+          "Les mots de passe ne correspondent pas."
+      );
       return;
     }
 
     if (password.length < 6) {
-      setError("Le mot de passe doit contenir au moins 6 caractères.");
+      setError(
+        t("signup.password_too_short") ||
+          "Le mot de passe doit contenir au moins 6 caractères."
+      );
       return;
     }
 
@@ -86,7 +95,7 @@ function SignUpForm() {
         if (redirectUrl) {
           router.push(`/signin?redirect=${encodeURIComponent(redirectUrl)}`);
         } else {
-          router.push("/signin");
+          router.push(`/signin`);
         }
       }, 2000);
     } catch {
@@ -115,15 +124,16 @@ function SignUpForm() {
               startContent={<Sparkles className="w-4 h-4" />}
               className="mb-4 p-2"
             >
-              Rejoignez-nous
+              {t("signup.chip_label") || "Rejoignez-nous"}
             </Chip>
             <h1 className="mb-3 text-4xl font-bold">
               <span className="bg-gradient-to-r from-secondary-600 to-primary-600 bg-clip-text text-transparent">
-                Commencer gratuitement
+                {t("signup.title") || "Commencer gratuitement"}
               </span>
             </h1>
-            <p className="text-default-600 dark:text-default-400">
-              Créez votre compte en quelques secondes
+            <p className="text-default-600 dark:text-default-700">
+              {t("signup.subtitle") ||
+                "Créez votre compte en quelques secondes"}
             </p>
           </div>
 
@@ -132,9 +142,11 @@ function SignUpForm() {
             <CardBody className="gap-6 p-8">
               <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                 <Input
-                  label="Nom complet"
+                  label={t("signup.full_name") || "Nom complet"}
                   type="text"
-                  placeholder="Jean Dupont"
+                  placeholder={
+                    t("signup.full_name_placeholder") || "Jean Dupont"
+                  }
                   value={fullName}
                   onChange={(e) => setFullName(e.target.value)}
                   startContent={<User className="h-4 w-4 text-default-400" />}
@@ -146,9 +158,11 @@ function SignUpForm() {
                 />
 
                 <Input
-                  label="Email"
+                  label={t("email") || "Email"}
                   type="email"
-                  placeholder="votre@email.com"
+                  placeholder={
+                    t("signin.email_placeholder") || "votre@email.com"
+                  }
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
@@ -161,7 +175,7 @@ function SignUpForm() {
                 />
 
                 <Input
-                  label="Mot de passe"
+                  label={t("password") || "Mot de passe"}
                   type="password"
                   placeholder="••••••••"
                   value={password}
@@ -174,11 +188,15 @@ function SignUpForm() {
                     inputWrapper:
                       "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
                   }}
-                  description="Minimum 6 caractères"
+                  description={
+                    t("signup.password_hint") || "Minimum 6 caractères"
+                  }
                 />
 
                 <Input
-                  label="Confirmer le mot de passe"
+                  label={
+                    t("signup.confirm_password") || "Confirmer le mot de passe"
+                  }
                   type="password"
                   placeholder="••••••••"
                   value={confirmPassword}
@@ -222,21 +240,23 @@ function SignUpForm() {
                   }
                   isLoading={loading}
                 >
-                  Créer mon compte
+                  {t("signup.submit") || "Créer mon compte"}
                 </Button>
               </form>
 
               {/* Divider */}
               <div className="relative flex items-center gap-4 py-2">
                 <div className="h-px flex-1 bg-default-200" />
-                <span className="text-xs text-default-400">OU</span>
+                <span className="text-xs text-default-400">
+                  {t("signup.or") || "OU"}
+                </span>
                 <div className="h-px flex-1 bg-default-200" />
               </div>
 
               {/* Sign in link */}
               <div className="text-center">
                 <p className="text-sm text-default-600">
-                  Déjà inscrit ?{" "}
+                  {t("signup.have_account") || "Déjà inscrit ?"}{" "}
                   <Link
                     href={
                       redirectUrl
@@ -245,7 +265,7 @@ function SignUpForm() {
                     }
                     className="font-semibold text-secondary-600 hover:text-secondary-700"
                   >
-                    Se connecter
+                    {t("signin.submit") || "Se connecter"}
                   </Link>
                 </p>
               </div>
@@ -253,20 +273,22 @@ function SignUpForm() {
           </Card>
 
           {/* Footer */}
-          <p className="mt-8 text-center text-xs text-default-400">
-            En créant un compte, vous acceptez nos{" "}
+
+          <p className="mt-8 text-center text-sm text-default-700">
+            {t("signup.legal_prefix") ||
+              "En créant un compte, vous acceptez nos"}{" "}
             <Link
               href="/legal/terms"
               className="underline hover:text-secondary-500"
             >
-              conditions d'utilisation
+              {t("signup.terms") || "conditions d'utilisation"}
             </Link>{" "}
-            et notre{" "}
+            {t("signup.legal_and") || "et notre"}{" "}
             <Link
               href="/legal/privacy"
               className="underline hover:text-secondary-500"
             >
-              politique de confidentialité
+              {t("signup.privacy") || "politique de confidentialité"}
             </Link>
           </p>
         </div>