@lastbrain/module-auth 0.1.1 → 0.1.3

package/src/web/public/SignUpPage.tsx

@@ -0,0 +1,293 @@
+"use client";
+
+import {
+  Button,
+  Card,
+  CardBody,
+  Input,
+  Link,
+  Chip,
+  addToast,
+} from "@lastbrain/ui";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useState } from "react";
+import {
+  Mail,
+  Lock,
+  User,
+  ArrowRight,
+  Sparkles,
+  CheckCircle2,
+} from "lucide-react";
+import { supabaseBrowserClient } from "@lastbrain/core";
+
+function SignUpForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [fullName, setFullName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  // Récupérer le paramètre redirect
+  const redirectUrl = searchParams.get("redirect");
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(null);
+    setSuccess(null);
+
+    if (password !== confirmPassword) {
+      setError("Les mots de passe ne correspondent pas.");
+      return;
+    }
+
+    if (password.length < 6) {
+      setError("Le mot de passe doit contenir au moins 6 caractères.");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const { data, error: signUpError } =
+        await supabaseBrowserClient.auth.signUp({
+          email,
+          password,
+          options: {
+            emailRedirectTo: `${window.location.origin}/api/auth/callback${
+              redirectUrl ? `?next=${encodeURIComponent(redirectUrl)}` : ""
+            }`,
+            data: {
+              full_name: fullName,
+            },
+          },
+        });
+
+      if (signUpError) {
+        setError(signUpError.message);
+        return;
+      }
+
+      // Si la confirmation par email est requise
+      if (data.user && !data.session) {
+        setSuccess(
+          "Compte créé avec succès ! Veuillez vérifier votre email pour confirmer votre compte."
+        );
+        return;
+      }
+
+      // Si l'utilisateur est directement connecté (confirmation email désactivée)
+      if (data.session) {
+        if (redirectUrl) {
+          window.location.href = redirectUrl;
+        } else {
+          window.location.href = "/auth/dashboard";
+        }
+        return;
+      }
+
+      setSuccess("Compte créé. Vous pouvez désormais vous connecter.");
+      setTimeout(() => {
+        if (redirectUrl) {
+          router.push(`/signin?redirect=${encodeURIComponent(redirectUrl)}`);
+        } else {
+          router.push("/signin");
+        }
+      }, 2000);
+    } catch (err) {
+      addToast({
+        title: "Erreur",
+        description: "Une erreur inattendue est survenue.",
+        color: "danger",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="pt-12 relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-secondary-50/30 to-primary-50/30 dark:from-secondary-950/50 dark:to-primary-950/50">
+      {/* Background decoration */}
+      <div className="absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800/20 mask-[linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05))]" />
+
+      <div className="relative flex min-h-screen items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md">
+          {/* Header */}
+          <div className="mb-8 text-center">
+            <Chip
+              color="secondary"
+              variant="flat"
+              startContent={<Sparkles className="w-4 h-4" />}
+              className="mb-4 p-2"
+            >
+              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
+              </span>
+            </h1>
+            <p className="text-default-600 dark:text-default-400">
+              Créez votre compte en quelques secondes
+            </p>
+          </div>
+
+          {/* Form Card */}
+          <Card className="border border-default-200/60 bg-background/60 backdrop-blur-md backdrop-saturate-150 shadow-xl">
+            <CardBody className="gap-6 p-8">
+              <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+                <Input
+                  label="Nom complet"
+                  type="text"
+                  placeholder="Jean Dupont"
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value)}
+                  startContent={<User className="h-4 w-4 text-default-400" />}
+                  classNames={{
+                    input: "text-base",
+                    inputWrapper:
+                      "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
+                  }}
+                />
+
+                <Input
+                  label="Email"
+                  type="email"
+                  placeholder="votre@email.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  startContent={<Mail className="h-4 w-4 text-default-400" />}
+                  classNames={{
+                    input: "text-base",
+                    inputWrapper:
+                      "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
+                  }}
+                />
+
+                <Input
+                  label="Mot de passe"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  minLength={6}
+                  startContent={<Lock className="h-4 w-4 text-default-400" />}
+                  classNames={{
+                    input: "text-base",
+                    inputWrapper:
+                      "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
+                  }}
+                  description="Minimum 6 caractères"
+                />
+
+                <Input
+                  label="Confirmer le mot de passe"
+                  type="password"
+                  placeholder="••••••••"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                  minLength={6}
+                  startContent={<Lock className="h-4 w-4 text-default-400" />}
+                  classNames={{
+                    input: "text-base",
+                    inputWrapper:
+                      "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
+                  }}
+                />
+
+                {error && (
+                  <div className="rounded-lg border border-danger-200 bg-danger-50/50 px-4 py-3 dark:border-danger-800 dark:bg-danger-950/50">
+                    <p className="text-sm text-danger-600 dark:text-danger-400">
+                      {error}
+                    </p>
+                  </div>
+                )}
+
+                {success && (
+                  <div className="rounded-lg border border-success-200 bg-success-50/50 px-4 py-3 dark:border-success-800 dark:bg-success-950/50">
+                    <div className="flex items-center gap-2">
+                      <CheckCircle2 className="h-4 w-4 text-success-600 dark:text-success-400" />
+                      <p className="text-sm text-success-600 dark:text-success-400">
+                        {success}
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                <Button
+                  type="submit"
+                  color="secondary"
+                  size="lg"
+                  className="w-full font-semibold"
+                  endContent={
+                    loading ? null : <ArrowRight className="h-5 w-5" />
+                  }
+                  isLoading={loading}
+                >
+                  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>
+                <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 ?{" "}
+                  <Link
+                    href={
+                      redirectUrl
+                        ? `/signin?redirect=${encodeURIComponent(redirectUrl)}`
+                        : "/signin"
+                    }
+                    className="font-semibold text-secondary-600 hover:text-secondary-700"
+                  >
+                    Se connecter
+                  </Link>
+                </p>
+              </div>
+            </CardBody>
+          </Card>
+
+          {/* Footer */}
+          <p className="mt-8 text-center text-xs text-default-400">
+            En créant un compte, vous acceptez nos{" "}
+            <Link
+              href="/legal/terms"
+              className="underline hover:text-secondary-500"
+            >
+              conditions d'utilisation
+            </Link>{" "}
+            et notre{" "}
+            <Link
+              href="/legal/privacy"
+              className="underline hover:text-secondary-500"
+            >
+              politique de confidentialité
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SignUpPage() {
+  return (
+    <Suspense fallback={<div>Chargement...</div>}>
+      <SignUpForm />
+    </Suspense>
+  );
+}