feat: revue de code, doc CODE_REVIEW, forfaits 2026, traduction LLM, providers avec modèle

Made-with: Cursor

frontend/src/app/auth/login/LoginForm.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Eye, EyeOff, Mail, Lock, ArrowRight, Loader2, Languages } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useNotification } from '@/components/ui/notification';
+import { useLogin } from './useLogin';
+
+export function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+
+  const loginMutation = useLogin();
+  const { notify } = useNotification();
+
+  useEffect(() => {
+    if (loginMutation.isError && loginMutation.error) {
+      notify({
+        title: 'Erreur de connexion',
+        description: loginMutation.error.message,
+        variant: 'destructive',
+      });
+    }
+  }, [loginMutation.isError, loginMutation.error, notify]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    loginMutation.mutate({ email, password });
+  };
+
+  return (
+    <Card variant="elevated" className="w-full max-w-md mx-auto" hover={false}>
+      <CardHeader className="text-center pb-6">
+        <Link href="/" className="inline-flex items-center gap-3 mb-6 group">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg">
+            <Languages className="h-6 w-6" />
+          </div>
+          <span className="text-2xl font-semibold text-foreground">
+            Office Translator
+          </span>
+        </Link>
+
+        <CardTitle className="text-2xl font-bold">
+          Welcome back
+        </CardTitle>
+        <CardDescription>
+          Sign in to continue translating
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              leftIcon={<Mail className="h-4 w-4" />}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <Label htmlFor="password">Password</Label>
+              <Link href="/auth/forgot-password" className="text-sm text-primary hover:underline">
+                Forgot password?
+              </Link>
+            </div>
+            <div className="relative">
+              <Input
+                id="password"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                leftIcon={<Lock className="h-4 w-4" />}
+                required
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+          </div>
+
+          <Button
+            type="submit"
+            disabled={loginMutation.isPending || !email || !password}
+            className="w-full"
+          >
+            {loginMutation.isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Signing in...
+              </>
+            ) : (
+              <>
+                Sign In
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </>
+            )}
+          </Button>
+        </form>
+
+        <p className="text-center text-sm text-muted-foreground">
+          Don&apos;t have an account?{' '}
+          <Link href="/auth/register" className="text-primary hover:underline">
+            Sign up for free
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/app/auth/login/page.tsx

@@ -1,381 +1,36 @@
-"use client";
-
-import { useState, Suspense } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import Link from "next/link";
-import { Eye, EyeOff, Mail, Lock, ArrowRight, Loader2, Shield, CheckCircle, AlertTriangle } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-
-function LoginForm() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const redirect = searchParams.get("redirect") || "/";
-  
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [isValidating, setIsValidating] = useState({
-    email: false,
-    password: false,
-  });
-  const [isFocused, setIsFocused] = useState({
-    email: false,
-    password: false,
-  });
-  const [showSuccess, setShowSuccess] = useState(false);
-
-  const validateEmail = (email: string) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  };
-
-  const validatePassword = (password: string) => {
-    return password.length >= 8;
-  };
-
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setEmail(value);
-    setIsValidating(prev => ({ ...prev, email: value.length > 0 }));
-  };
-
-  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setPassword(value);
-    setIsValidating(prev => ({ ...prev, password: value.length > 0 }));
-  };
-
-  const handleEmailBlur = () => {
-    setIsValidating(prev => ({ ...prev, email: false }));
-    setIsFocused(prev => ({ ...prev, email: false }));
-  };
-
-  const handlePasswordBlur = () => {
-    setIsValidating(prev => ({ ...prev, password: false }));
-    setIsFocused(prev => ({ ...prev, password: false }));
-  };
-
-  const handleEmailFocus = () => {
-    setIsFocused(prev => ({ ...prev, email: true }));
-  };
-
-  const handlePasswordFocus = () => {
-    setIsFocused(prev => ({ ...prev, password: true }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
-
-    try {
-      const res = await fetch("http://localhost:8000/api/auth/login", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email, password }),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok) {
-        throw new Error(data.detail || "Login failed");
-      }
-
-      // Store tokens
-      localStorage.setItem("token", data.access_token);
-      localStorage.setItem("refresh_token", data.refresh_token);
-      localStorage.setItem("user", JSON.stringify(data.user));
-
-      // Show success animation
-      setShowSuccess(true);
-      setTimeout(() => {
-        router.push(redirect);
-      }, 1000);
-
-    } catch (err: any) {
-      setError(err.message || "Login failed");
-      setLoading(false);
-    }
-  };
-
-  const getEmailValidationState = () => {
-    if (!isValidating.email) return "";
-    if (email.length === 0) return "";
-    return validateEmail(email) ? "valid" : "invalid";
-  };
-
-  const getPasswordValidationState = () => {
-    if (!isValidating.password) return "";
-    if (password.length === 0) return "";
-    return validatePassword(password) ? "valid" : "invalid";
-  };
-
-  return (
-    <>
-      {/* Enhanced Login Card */}
-      <Card 
-        variant="elevated" 
-        className="w-full max-w-md mx-auto overflow-hidden animate-fade-in"
-      >
-        <CardHeader className="text-center pb-6">
-          {/* Logo */}
-          <Link href="/" className="inline-flex items-center gap-3 mb-6 group">
-            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-accent text-white font-bold text-xl shadow-lg group-hover:shadow-xl group-hover:shadow-primary/25 transition-all duration-300 group-hover:-translate-y-0.5">
-              文A
-            </div>
-            <span className="text-2xl font-semibold text-white group-hover:text-primary transition-colors duration-300">
-              Translate Co.
-            </span>
-          </Link>
-
-          <CardTitle className="text-2xl font-bold text-white mb-2">
-            Welcome back
-          </CardTitle>
-          <CardDescription className="text-text-secondary">
-            Sign in to continue translating
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          {/* Success Message */}
-          {showSuccess && (
-            <div className="rounded-lg bg-success/10 border border-success/30 p-4 animate-slide-up">
-              <div className="flex items-center gap-3">
-                <CheckCircle className="h-5 w-5 text-success" />
-                <span className="text-success font-medium">Login successful! Redirecting...</span>
-              </div>
-            </div>
-          )}
-
-          {/* Error Message */}
-          {error && (
-            <div className="rounded-lg bg-destructive/10 border border-destructive/30 p-4 animate-slide-up">
-              <div className="flex items-start gap-3">
-                <AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
-                <div>
-                  <p className="text-destructive font-medium">Authentication Error</p>
-                  <p className="text-destructive/80 text-sm mt-1">{error}</p>
-                </div>
-              </div>
-            </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="space-y-6">
-            {/* Email Field */}
-            <div className="space-y-3">
-              <Label htmlFor="email" className="text-text-secondary font-medium">
-                Email Address
-              </Label>
-              <div className="relative">
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="you@example.com"
-                  value={email}
-                  onChange={handleEmailChange}
-                  onBlur={handleEmailBlur}
-                  onFocus={handleEmailFocus}
-                  required
-                  className={cn(
-                    "pl-12 h-12 text-lg",
-                    getEmailValidationState() === "valid" && "border-success focus:border-success",
-                    getEmailValidationState() === "invalid" && "border-destructive focus:border-destructive",
-                    isFocused.email && "ring-2 ring-primary/20"
-                  )}
-                  leftIcon={<Mail className="h-5 w-5" />}
-                />
-                
-                {/* Validation Indicator */}
-                {isValidating.email && (
-                  <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                    {getEmailValidationState() === "valid" && (
-                      <CheckCircle className="h-5 w-5 text-success animate-fade-in" />
-                    )}
-                    {getEmailValidationState() === "invalid" && (
-                      <AlertTriangle className="h-5 w-5 text-destructive animate-fade-in" />
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Password Field */}
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="password" className="text-text-secondary font-medium">
-                  Password
-                </Label>
-                <Link 
-                  href="/auth/forgot-password" 
-                  className="text-sm text-primary hover:text-primary/80 transition-colors duration-200"
-                >
-                  Forgot password?
-                </Link>
-              </div>
-              <div className="relative">
-                <Input
-                  id="password"
-                  type={showPassword ? "text" : "password"}
-                  placeholder="••••••••••"
-                  value={password}
-                  onChange={handlePasswordChange}
-                  onBlur={handlePasswordBlur}
-                  onFocus={handlePasswordFocus}
-                  required
-                  className={cn(
-                    "pl-12 pr-12 h-12 text-lg",
-                    getPasswordValidationState() === "valid" && "border-success focus:border-success",
-                    getPasswordValidationState() === "invalid" && "border-destructive focus:border-destructive",
-                    isFocused.password && "ring-2 ring-primary/20"
-                  )}
-                  leftIcon={<Lock className="h-5 w-5" />}
-                  rightIcon={
-                    <button
-                      type="button"
-                      onClick={() => setShowPassword(!showPassword)}
-                      className="text-muted-foreground hover:text-foreground transition-colors duration-200"
-                    >
-                      {showPassword ? (
-                        <EyeOff className="h-5 w-5" />
-                      ) : (
-                        <Eye className="h-5 w-5" />
-                      )}
-                    </button>
-                  }
-                />
-                
-                {/* Validation Indicator */}
-                {isValidating.password && (
-                  <div className="absolute right-12 top-1/2 -translate-y-1/2">
-                    {getPasswordValidationState() === "valid" && (
-                      <CheckCircle className="h-5 w-5 text-success animate-fade-in" />
-                    )}
-                    {getPasswordValidationState() === "invalid" && (
-                      <AlertTriangle className="h-5 w-5 text-destructive animate-fade-in" />
-                    )}
-                  </div>
-                )}
-              </div>
-              
-              {/* Password Strength Indicator */}
-              {isValidating.password && password.length > 0 && (
-                <div className="mt-2 space-y-1">
-                  <div className="flex justify-between text-xs text-text-tertiary">
-                    <span>Password strength</span>
-                    <span className={cn(
-                      password.length < 8 && "text-destructive",
-                      password.length >= 8 && password.length < 12 && "text-warning",
-                      password.length >= 12 && "text-success"
-                    )}>
-                      {password.length < 8 && "Weak"}
-                      {password.length >= 8 && password.length < 12 && "Fair"}
-                      {password.length >= 12 && "Strong"}
-                    </span>
-                  </div>
-                  <div className="w-full bg-border-subtle rounded-full h-1 overflow-hidden">
-                    <div 
-                      className={cn(
-                        "h-full transition-all duration-300 ease-out",
-                        password.length < 8 && "bg-destructive w-1/3",
-                        password.length >= 8 && password.length < 12 && "bg-warning w-2/3",
-                        password.length >= 12 && "bg-success w-full"
-                      )}
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Submit Button */}
-            <Button
-              type="submit"
-              disabled={loading || !email || !password}
-              variant="premium"
-              size="lg"
-              className="w-full h-12 text-lg group"
-            >
-              {loading ? (
-                <>
-                  <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                  Signing in...
-                </>
-              ) : (
-                <>
-                  Sign In
-                  <ArrowRight className="ml-2 h-5 w-5 transition-transform duration-200 group-hover:translate-x-1" />
-                </>
-              )}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-
-      {/* Enhanced Footer */}
-      <div className="mt-8 text-center">
-        <p className="text-sm text-text-tertiary mb-6">
-          Don't have an account?{" "}
-          <Link
-            href={`/auth/register${redirect !== "/" ? `?redirect=${redirect}` : ""}`}
-            className="text-primary hover:text-primary/80 font-medium transition-colors duration-200"
-          >
-            Sign up for free
-          </Link>
-        </p>
-        
-        {/* Trust Indicators */}
-        <div className="flex flex-wrap justify-center gap-6 text-xs text-text-tertiary">
-          <div className="flex items-center gap-2">
-            <Shield className="h-4 w-4 text-success" />
-            <span>Secure login</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <CheckCircle className="h-4 w-4 text-primary" />
-            <span>SSL encrypted</span>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
+import { Suspense } from 'react';
+import { LoginForm } from './LoginForm';
+import { Loader2, Languages } from 'lucide-react';
 
 function LoadingFallback() {
   return (
-    <Card variant="elevated" className="w-full max-w-md mx-auto">
-      <CardContent className="flex items-center justify-center py-16">
-        <div className="text-center space-y-4">
-          <Loader2 className="h-12 w-12 animate-spin text-primary mx-auto" />
-          <p className="text-lg font-medium text-foreground">Loading...</p>
-          <div className="w-16 h-1 bg-border-subtle rounded-full overflow-hidden">
-            <div className="h-full bg-primary animate-loading-shimmer" />
+    <div className="w-full max-w-md mx-auto">
+      <div className="rounded-xl bg-card border border-border shadow-lg p-8">
+        <div className="flex flex-col items-center justify-center py-8 space-y-4">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground">
+            <Languages className="h-6 w-6" />
           </div>
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p className="text-muted-foreground">Loading...</p>
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }
 
 export default function LoginPage() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-surface via-surface-elevated to-background flex items-center justify-center p-4 relative overflow-hidden">
-      {/* Background Effects */}
       <div className="absolute inset-0">
         <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
         <div className="absolute inset-0 bg-[url('/grid.svg')] opacity-5" />
         <div className="absolute inset-0 bg-gradient-to-t from-background via-background/90 to-background/50" />
       </div>
       
-      {/* Animated Background Elements */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute top-20 left-10 w-32 h-32 bg-primary/5 rounded-full blur-3xl animate-float" />
-        <div className="absolute bottom-20 right-20 w-24 h-24 bg-accent/5 rounded-full blur-2xl animate-float-delayed" />
-        <div className="absolute top-1/2 right-1/4 w-16 h-16 bg-success/5 rounded-full blur-xl animate-float-slow" />
+        <div className="absolute top-20 left-10 w-32 h-32 bg-primary/5 rounded-full blur-3xl animate-pulse" />
+        <div className="absolute bottom-20 right-20 w-24 h-24 bg-accent/5 rounded-full blur-2xl animate-pulse" />
+        <div className="absolute top-1/2 right-1/4 w-16 h-16 bg-success/5 rounded-full blur-xl animate-pulse" />
       </div>
       
       <Suspense fallback={<LoadingFallback />}>

frontend/src/app/auth/login/types.ts

@@ -0,0 +1,16 @@
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  tier: 'free' | 'pro';
+}
+
+export interface LoginResponse {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+}

frontend/src/app/auth/login/useLogin.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { apiClient, ApiClientError } from '@/lib/apiClient';
+import type { LoginRequest, LoginResponse } from './types';
+
+export function useLogin() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirect = searchParams.get('redirect') || '/dashboard';
+
+  return useMutation<LoginResponse, ApiClientError, LoginRequest>({
+    mutationFn: async (credentials: LoginRequest) => {
+      const response = await apiClient.post<LoginResponse>(
+        '/api/v1/auth/login',
+        credentials
+      );
+      return response.data;
+    },
+    onSuccess: (data) => {
+      localStorage.setItem('token', data.access_token);
+      localStorage.setItem('refresh_token', data.refresh_token);
+      router.push(redirect);
+    },
+  });
+}

frontend/src/app/auth/register/RegisterForm.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import {
+  Eye,
+  EyeOff,
+  Mail,
+  Lock,
+  ArrowRight,
+  Loader2,
+  CheckCircle,
+  AlertTriangle,
+  UserPlus,
+  Languages,
+  User,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useRegister } from './useRegister';
+import { cn } from '@/lib/utils';
+
+function validateEmail(email: string) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+function validatePassword(password: string) {
+  return password.length >= 8;
+}
+
+function getPasswordStrength(password: string) {
+  if (password.length === 0) return { score: 0, label: '', color: '' };
+  let score = 0;
+  if (password.length >= 8) score++;
+  if (password.length >= 12) score++;
+  if (/[A-Z]/.test(password)) score++;
+  if (/[a-z]/.test(password)) score++;
+  if (/[0-9]/.test(password)) score++;
+  if (/[^A-Za-z0-9]/.test(password)) score++;
+
+  if (score <= 2) return { score, label: 'Faible', color: 'bg-destructive' };
+  if (score <= 4) return { score, label: 'Moyen', color: 'bg-yellow-500' };
+  return { score, label: 'Fort', color: 'bg-green-500' };
+}
+
+function PasswordToggleIcon({ visible, onToggle, label }: { visible: boolean; onToggle: () => void; label: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className="text-muted-foreground hover:text-foreground transition-colors duration-200 pointer-events-auto"
+      tabIndex={-1}
+      aria-label={label}
+    >
+      {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+    </button>
+  );
+}
+
+export function RegisterForm() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [touched, setTouched] = useState({ name: false, email: false, password: false, confirmPassword: false });
+
+  const registerMutation = useRegister();
+
+  const nameError = touched.name && name.length > 0 && name.length < 2
+    ? 'Le nom doit contenir au moins 2 caractères'
+    : undefined;
+
+  const emailError = touched.email && email.length > 0 && !validateEmail(email)
+    ? 'Adresse email invalide'
+    : undefined;
+
+  const passwordError = touched.password && password.length > 0 && !validatePassword(password)
+    ? 'Mot de passe trop court (minimum 8 caractères)'
+    : undefined;
+
+  const confirmError = touched.confirmPassword && confirmPassword.length > 0 && password !== confirmPassword
+    ? 'Les mots de passe ne correspondent pas'
+    : undefined;
+
+  const passwordStrength = getPasswordStrength(password);
+
+  const isFormValid =
+    name.length >= 2 &&
+    validateEmail(email) &&
+    validatePassword(password) &&
+    password === confirmPassword;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setTouched({ name: true, email: true, password: true, confirmPassword: true });
+    if (!isFormValid) return;
+    registerMutation.mutate({ name, email, password });
+  };
+
+  const getConfirmRightIcon = () => {
+    if (touched.confirmPassword && confirmPassword.length > 0 && password === confirmPassword) {
+      return <CheckCircle className="h-4 w-4 text-green-500" />;
+    }
+    return (
+      <PasswordToggleIcon
+        visible={showConfirm}
+        onToggle={() => setShowConfirm(!showConfirm)}
+        label={showConfirm ? 'Masquer' : 'Afficher'}
+      />
+    );
+  };
+
+  return (
+    <Card variant="elevated" className="w-full max-w-md mx-auto" hover={false}>
+      <CardHeader className="text-center pb-6">
+        <Link href="/" className="inline-flex items-center gap-3 mb-6 group">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg group-hover:shadow-xl group-hover:shadow-primary/25 transition-all duration-300 group-hover:-translate-y-0.5">
+            <Languages className="h-6 w-6" />
+          </div>
+          <span className="text-2xl font-semibold text-foreground group-hover:text-primary transition-colors duration-300">
+            Office Translator
+          </span>
+        </Link>
+
+        <CardTitle className="text-2xl font-bold">Créer un compte</CardTitle>
+        <CardDescription>Commencez à traduire gratuitement</CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-5">
+        {registerMutation.isError && (
+          <div className="rounded-lg bg-destructive/10 border border-destructive/30 p-4">
+            <div className="flex items-start gap-3">
+              <AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-destructive">
+                {registerMutation.error?.message || "L'inscription a échoué"}
+              </p>
+            </div>
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Nom</Label>
+            <Input
+              id="name"
+              type="text"
+              placeholder="Votre nom"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onBlur={() => setTouched((t) => ({ ...t, name: true }))}
+              leftIcon={<User className="h-4 w-4" />}
+              rightIcon={
+                touched.name && name.length > 0
+                  ? name.length >= 2
+                    ? <CheckCircle className="h-4 w-4 text-green-500" />
+                    : <AlertTriangle className="h-4 w-4 text-destructive" />
+                  : undefined
+              }
+              error={nameError}
+              required
+              autoComplete="name"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="email">Adresse email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="vous@exemple.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              onBlur={() => setTouched((t) => ({ ...t, email: true }))}
+              leftIcon={<Mail className="h-4 w-4" />}
+              rightIcon={
+                touched.email && email.length > 0
+                  ? validateEmail(email)
+                    ? <CheckCircle className="h-4 w-4 text-green-500" />
+                    : <AlertTriangle className="h-4 w-4 text-destructive" />
+                  : undefined
+              }
+              error={emailError}
+              required
+              autoComplete="email"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">Mot de passe</Label>
+            <Input
+              id="password"
+              type={showPassword ? 'text' : 'password'}
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              onBlur={() => setTouched((t) => ({ ...t, password: true }))}
+              leftIcon={<Lock className="h-4 w-4" />}
+              rightIcon={
+                <PasswordToggleIcon
+                  visible={showPassword}
+                  onToggle={() => setShowPassword(!showPassword)}
+                  label={showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
+                />
+              }
+              error={passwordError}
+              required
+              minLength={8}
+              autoComplete="new-password"
+            />
+            {password.length > 0 && (
+              <div className="space-y-1 pt-1">
+                <div className="flex gap-1">
+                  {[1, 2, 3, 4].map((level) => (
+                    <div
+                      key={level}
+                      className={cn(
+                        'h-1 flex-1 rounded-full transition-all duration-300',
+                        level <= Math.ceil((passwordStrength.score / 6) * 4)
+                          ? passwordStrength.color
+                          : 'bg-border'
+                      )}
+                    />
+                  ))}
+                </div>
+                <p className={cn('text-xs', passwordStrength.score <= 2 ? 'text-destructive' : passwordStrength.score <= 4 ? 'text-muted-foreground' : 'text-green-500')}>
+                  Force : {passwordStrength.label}
+                </p>
+              </div>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Confirmer le mot de passe</Label>
+            <Input
+              id="confirmPassword"
+              type={showConfirm ? 'text' : 'password'}
+              placeholder="••••••••"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              onBlur={() => setTouched((t) => ({ ...t, confirmPassword: true }))}
+              leftIcon={<Lock className="h-4 w-4" />}
+              rightIcon={getConfirmRightIcon()}
+              error={confirmError}
+              required
+              autoComplete="new-password"
+            />
+          </div>
+
+          <Button
+            type="submit"
+            variant="premium"
+            size="lg"
+            className="w-full"
+            disabled={registerMutation.isPending}
+            loading={registerMutation.isPending}
+          >
+            {registerMutation.isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Création du compte...
+              </>
+            ) : (
+              <>
+                <UserPlus className="mr-2 h-4 w-4" />
+                Créer mon compte
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </>
+            )}
+          </Button>
+        </form>
+
+        <p className="text-center text-sm text-muted-foreground">
+          Vous avez déjà un compte ?{' '}
+          <Link href="/auth/login" className="text-primary hover:underline font-medium">
+            Se connecter
+          </Link>
+        </p>
+
+        <p className="text-center text-xs text-muted-foreground">
+          En créant un compte, vous acceptez notre{' '}
+          <span className="text-muted-foreground">
+            utilisation du service
+          </span>
+          .
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/app/auth/register/page.tsx

@@ -1,601 +1,42 @@
-"use client";
-
-import { useState, Suspense } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import Link from "next/link";
-import { 
-  Eye, 
-  EyeOff, 
-  Mail, 
-  Lock, 
-  User, 
-  ArrowRight, 
-  Loader2, 
-  Shield, 
-  CheckCircle, 
-  AlertTriangle, 
-  UserPlus,
-  Info
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-
-function RegisterForm() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const redirect = searchParams.get("redirect") || "/";
-  
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [step, setStep] = useState(1);
-  const [showSuccess, setShowSuccess] = useState(false);
-  
-  const [isValidating, setIsValidating] = useState({
-    name: false,
-    email: false,
-    password: false,
-    confirmPassword: false,
-  });
-
-  const [isFocused, setIsFocused] = useState({
-    name: false,
-    email: false,
-    password: false,
-    confirmPassword: false,
-  });
-
-  const validateName = (name: string) => {
-    return name.trim().length >= 2;
-  };
-
-  const validateEmail = (email: string) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  };
-
-  const validatePassword = (password: string) => {
-    return password.length >= 8;
-  };
-
-  const validateConfirmPassword = (password: string, confirmPassword: string) => {
-    return password === confirmPassword && password.length > 0;
-  };
-
-  // Real-time validation
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setName(value);
-    setIsValidating(prev => ({ ...prev, name: value.length > 0 }));
-  };
-
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setEmail(value);
-    setIsValidating(prev => ({ ...prev, email: value.length > 0 }));
-  };
-
-  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setPassword(value);
-    setIsValidating(prev => ({ ...prev, password: value.length > 0 }));
-  };
-
-  const handleConfirmPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setConfirmPassword(value);
-    setIsValidating(prev => ({ ...prev, confirmPassword: value.length > 0 }));
-  };
-
-  const handleNameBlur = () => {
-    setIsValidating(prev => ({ ...prev, name: false }));
-    setIsFocused(prev => ({ ...prev, name: false }));
-  };
-
-  const handleEmailBlur = () => {
-    setIsValidating(prev => ({ ...prev, email: false }));
-    setIsFocused(prev => ({ ...prev, email: false }));
-  };
-
-  const handlePasswordBlur = () => {
-    setIsValidating(prev => ({ ...prev, password: false }));
-    setIsFocused(prev => ({ ...prev, password: false }));
-  };
-
-  const handleConfirmPasswordBlur = () => {
-    setIsValidating(prev => ({ ...prev, confirmPassword: false }));
-    setIsFocused(prev => ({ ...prev, confirmPassword: false }));
-  };
-
-  const handleNameFocus = () => {
-    setIsFocused(prev => ({ ...prev, name: true }));
-  };
-
-  const handleEmailFocus = () => {
-    setIsFocused(prev => ({ ...prev, email: true }));
-  };
-
-  const handlePasswordFocus = () => {
-    setIsFocused(prev => ({ ...prev, password: true }));
-  };
-
-  const handleConfirmPasswordFocus = () => {
-    setIsFocused(prev => ({ ...prev, confirmPassword: true }));
-  };
-
-  const getNameValidationState = () => {
-    if (!isValidating.name) return "";
-    if (name.length === 0) return "";
-    return validateName(name) ? "valid" : "invalid";
-  };
-
-  const getEmailValidationState = () => {
-    if (!isValidating.email) return "";
-    if (email.length === 0) return "";
-    return validateEmail(email) ? "valid" : "invalid";
-  };
-
-  const getPasswordValidationState = () => {
-    if (!isValidating.password) return "";
-    if (password.length === 0) return "";
-    return validatePassword(password) ? "valid" : "invalid";
-  };
-
-  const getConfirmPasswordValidationState = () => {
-    if (!isValidating.confirmPassword) return "";
-    if (confirmPassword.length === 0) return "";
-    return validateConfirmPassword(password, confirmPassword) ? "valid" : "invalid";
-  };
-
-  const getPasswordStrength = () => {
-    if (password.length === 0) return { strength: 0, text: "", color: "" };
-    
-    let strength = 0;
-    let text = "";
-    let color = "";
-
-    if (password.length >= 8) strength++;
-    if (password.length >= 12) strength++;
-    if (/[A-Z]/.test(password)) strength++;
-    if (/[a-z]/.test(password)) strength++;
-    if (/[0-9]/.test(password)) strength++;
-    if (/[^A-Za-z0-9]/.test(password)) strength++;
-
-    if (strength <= 2) {
-      text = "Weak";
-      color = "text-destructive";
-    } else if (strength <= 3) {
-      text = "Fair";
-      color = "text-warning";
-    } else {
-      text = "Strong";
-      color = "text-success";
-    }
-
-    return { strength, text, color };
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    
-    // Validate all fields
-    if (!validateName(name)) {
-      setError("Name must be at least 2 characters");
-      return;
-    }
-    
-    if (!validateEmail(email)) {
-      setError("Please enter a valid email address");
-      return;
-    }
-    
-    if (!validatePassword(password)) {
-      setError("Password must be at least 8 characters");
-      return;
-    }
-    
-    if (!validateConfirmPassword(password, confirmPassword)) {
-      setError("Passwords do not match");
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      const res = await fetch("http://localhost:8000/api/auth/register", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, email, password }),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok) {
-        throw new Error(data.detail || "Registration failed");
-      }
-
-      // Store tokens
-      localStorage.setItem("token", data.access_token);
-      localStorage.setItem("refresh_token", data.refresh_token);
-      localStorage.setItem("user", JSON.stringify(data.user));
-
-      // Show success animation
-      setShowSuccess(true);
-      setTimeout(() => {
-        router.push(redirect);
-      }, 1500);
-
-    } catch (err: any) {
-      setError(err.message || "Registration failed");
-      setLoading(false);
-    }
-  };
-
-  const passwordStrength = getPasswordStrength();
-
-  return (
-    <>
-      {/* Enhanced Registration Card */}
-      <Card 
-        variant="elevated" 
-        className={cn(
-          "w-full max-w-md mx-auto overflow-hidden animate-fade-in",
-          showSuccess && "scale-95 opacity-0"
-        )}
-      >
-        <CardHeader className="text-center pb-6">
-          {/* Logo */}
-          <Link href="/" className="inline-flex items-center gap-3 mb-6 group">
-            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-accent text-white font-bold text-xl shadow-lg group-hover:shadow-xl group-hover:shadow-primary/25 transition-all duration-300 group-hover:-translate-y-0.5">
-              文A
-            </div>
-            <span className="text-2xl font-semibold text-white group-hover:text-primary transition-colors duration-300">
-              Translate Co.
-            </span>
-          </Link>
-
-          <CardTitle className="text-2xl font-bold text-white mb-2">
-            Create an account
-          </CardTitle>
-          <CardDescription className="text-text-secondary">
-            Start translating documents for free
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          {/* Success Message */}
-          {showSuccess && (
-            <div className="rounded-lg bg-success/10 border border-success/30 p-6 mb-6 animate-slide-up">
-              <div className="flex items-center gap-3">
-                <CheckCircle className="h-8 w-8 text-success animate-pulse" />
-                <div>
-                  <p className="text-lg font-medium text-success mb-1">Registration Successful!</p>
-                  <p className="text-sm text-success/80">Redirecting to your dashboard...</p>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Error Message */}
-          {error && (
-            <div className="rounded-lg bg-destructive/10 border border-destructive/30 p-4 mb-6 animate-slide-up">
-              <div className="flex items-start gap-3">
-                <AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
-                <div>
-                  <p className="text-sm font-medium text-destructive mb-1">Registration Error</p>
-                  <p className="text-sm text-destructive/80">{error}</p>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Progress Steps */}
-          <div className="flex items-center justify-center mb-8">
-            {[1, 2, 3].map((stepNumber) => (
-              <div
-                key={stepNumber}
-                className={cn(
-                  "flex items-center justify-center w-8 h-8 rounded-full transition-all duration-300",
-                  step === stepNumber
-                    ? "bg-primary text-white scale-110"
-                    : "bg-surface text-text-tertiary"
-                )}
-              >
-                <span className="text-sm font-medium">{stepNumber}</span>
-              </div>
-            ))}
-            <div className="h-0.5 bg-border-subtle flex-1 mx-2" />
-          </div>
-
-          <form onSubmit={handleSubmit} className="space-y-6">
-            {/* Name Field */}
-            <div className="space-y-3">
-              <Label htmlFor="name" className="text-text-secondary font-medium">
-                Full Name
-              </Label>
-              <div className="relative">
-                <Input
-                  id="name"
-                  type="text"
-                  placeholder="John Doe"
-                  value={name}
-                  onChange={handleNameChange}
-                  onBlur={handleNameBlur}
-                  onFocus={handleNameFocus}
-                  required
-                  className={cn(
-                    "pl-12 h-12 text-lg",
-                    getNameValidationState() === "valid" && "border-success focus:border-success",
-                    getNameValidationState() === "invalid" && "border-destructive focus:border-destructive",
-                    isFocused.name && "ring-2 ring-primary/20"
-                  )}
-                  leftIcon={<User className="h-5 w-5" />}
-                />
-                
-                {/* Validation Indicator */}
-                {isValidating.name && (
-                  <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                    {getNameValidationState() === "valid" && (
-                      <CheckCircle className="h-5 w-5 text-success animate-fade-in" />
-                    )}
-                    {getNameValidationState() === "invalid" && (
-                      <AlertTriangle className="h-5 w-5 text-destructive animate-fade-in" />
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Email Field */}
-            <div className="space-y-3">
-              <Label htmlFor="email" className="text-text-secondary font-medium">
-                Email Address
-              </Label>
-              <div className="relative">
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="you@example.com"
-                  value={email}
-                  onChange={handleEmailChange}
-                  onBlur={handleEmailBlur}
-                  onFocus={handleEmailFocus}
-                  required
-                  className={cn(
-                    "pl-12 h-12 text-lg",
-                    getEmailValidationState() === "valid" && "border-success focus:border-success",
-                    getEmailValidationState() === "invalid" && "border-destructive focus:border-destructive",
-                    isFocused.email && "ring-2 ring-primary/20"
-                  )}
-                  leftIcon={<Mail className="h-5 w-5" />}
-                />
-                
-                {/* Validation Indicator */}
-                {isValidating.email && (
-                  <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                    {getEmailValidationState() === "valid" && (
-                      <CheckCircle className="h-5 w-5 text-success animate-fade-in" />
-                    )}
-                    {getEmailValidationState() === "invalid" && (
-                      <AlertTriangle className="h-5 w-5 text-destructive animate-fade-in" />
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Password Field */}
-            <div className="space-y-3">
-              <Label htmlFor="password" className="text-text-secondary font-medium">
-                Password
-              </Label>
-              <div className="relative">
-                <Input
-                  id="password"
-                  type={showPassword ? "text" : "password"}
-                  placeholder="•••••••••••"
-                  value={password}
-                  onChange={handlePasswordChange}
-                  onBlur={handlePasswordBlur}
-                  onFocus={handlePasswordFocus}
-                  required
-                  minLength={8}
-                  className={cn(
-                    "pl-12 pr-12 h-12 text-lg",
-                    getPasswordValidationState() === "valid" && "border-success focus:border-success",
-                    getPasswordValidationState() === "invalid" && "border-destructive focus:border-destructive",
-                    isFocused.password && "ring-2 ring-primary/20"
-                  )}
-                  leftIcon={<Lock className="h-5 w-5" />}
-                  rightIcon={
-                    <button
-                      type="button"
-                      onClick={() => setShowPassword(!showPassword)}
-                      className="text-muted-foreground hover:text-foreground transition-colors duration-200"
-                    >
-                      {showPassword ? (
-                        <EyeOff className="h-5 w-5" />
-                      ) : (
-                        <Eye className="h-5 w-5" />
-                      )}
-                    </button>
-                  }
-                />
-                
-                {/* Password Strength Indicator */}
-                {password.length > 0 && (
-                  <div className="absolute right-12 top-1/2 -translate-y-1/2">
-                    <div className="flex items-center gap-1">
-                      <div className="flex space-x-1">
-                        {[1, 2, 3, 4].map((level) => (
-                          <div
-                            key={level}
-                            className={cn(
-                              "w-1 h-1 rounded-full",
-                              level <= passwordStrength.strength ? "bg-success" : "bg-border"
-                            )}
-                          />
-                        ))}
-                      </div>
-                      <span className={cn("text-xs", passwordStrength.color)}>
-                        {passwordStrength.text}
-                      </span>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Confirm Password Field */}
-            <div className="space-y-3">
-              <Label htmlFor="confirmPassword" className="text-text-secondary font-medium">
-                Confirm Password
-              </Label>
-              <div className="relative">
-                <Input
-                  id="confirmPassword"
-                  type={showConfirmPassword ? "text" : "password"}
-                  placeholder="•••••••••••"
-                  value={confirmPassword}
-                  onChange={handleConfirmPasswordChange}
-                  onBlur={handleConfirmPasswordBlur}
-                  onFocus={handleConfirmPasswordFocus}
-                  required
-                  className={cn(
-                    "pl-12 pr-12 h-12 text-lg",
-                    getConfirmPasswordValidationState() === "valid" && "border-success focus:border-success",
-                    getConfirmPasswordValidationState() === "invalid" && "border-destructive focus:border-destructive",
-                    isFocused.confirmPassword && "ring-2 ring-primary/20"
-                  )}
-                  leftIcon={<Lock className="h-5 w-5" />}
-                  rightIcon={
-                    <button
-                      type="button"
-                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                      className="text-muted-foreground hover:text-foreground transition-colors duration-200"
-                    >
-                      {showConfirmPassword ? (
-                        <EyeOff className="h-5 w-5" />
-                      ) : (
-                        <Eye className="h-5 w-5" />
-                      )}
-                    </button>
-                  }
-                />
-                
-                {/* Validation Indicator */}
-                {isValidating.confirmPassword && (
-                  <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                    {getConfirmPasswordValidationState() === "valid" && (
-                      <CheckCircle className="h-5 w-5 text-success animate-fade-in" />
-                    )}
-                    {getConfirmPasswordValidationState() === "invalid" && (
-                      <AlertTriangle className="h-5 w-5 text-destructive animate-fade-in" />
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Submit Button */}
-            <Button
-              type="submit"
-              disabled={loading || !name || !email || !password || !confirmPassword}
-              variant="premium"
-              size="lg"
-              className="w-full h-12 text-lg group"
-            >
-              {loading ? (
-                <>
-                  <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                  Creating Account...
-                </>
-              ) : (
-                <>
-                  <UserPlus className="mr-2 h-5 w-5 transition-transform duration-200 group-hover:scale-110" />
-                  Create Account
-                  <ArrowRight className="ml-2 h-5 w-5 transition-transform duration-200 group-hover:translate-x-1" />
-                </>
-              )}
-            </Button>
-          </form>
-
-          {/* Sign In Link */}
-          <div className="text-center">
-            <p className="text-sm text-text-tertiary mb-4">
-              Already have an account?{" "}
-              <Link
-                href={`/auth/login${redirect !== "/" ? `?redirect=${redirect}` : ""}`}
-                className="text-primary hover:text-primary/80 font-medium transition-colors duration-200"
-              >
-                Sign in
-              </Link>
-            </p>
-          </div>
-
-          {/* Terms and Privacy */}
-          <div className="text-center text-xs text-text-tertiary space-y-2">
-            <p>
-              By creating an account, you agree to our{" "}
-              <Link href="/terms" className="text-primary hover:text-primary/80 transition-colors duration-200">
-                Terms of Service
-              </Link>
-              {" "} and{" "}
-              <Link href="/privacy" className="text-primary hover:text-primary/80 transition-colors duration-200">
-                Privacy Policy
-              </Link>
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-    </>
-  );
-}
+import { Suspense } from 'react';
+import { Languages, Loader2 } from 'lucide-react';
+import { RegisterForm } from './RegisterForm';
 
 function LoadingFallback() {
   return (
-    <Card variant="elevated" className="w-full max-w-md mx-auto">
-      <CardContent className="flex items-center justify-center py-16">
-        <div className="text-center space-y-4">
-          <Loader2 className="h-12 w-12 animate-spin text-primary mx-auto" />
-          <p className="text-lg font-medium text-foreground">Creating your account...</p>
-          <div className="w-16 h-1 bg-border-subtle rounded-full overflow-hidden">
-            <div className="h-full bg-primary animate-loading-shimmer" />
+    <div className="w-full max-w-md mx-auto">
+      <div className="rounded-xl bg-card border border-border shadow-lg p-8">
+        <div className="flex flex-col items-center justify-center py-8 space-y-4">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-primary-foreground">
+            <Languages className="h-6 w-6" />
           </div>
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p className="text-muted-foreground">Chargement...</p>
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }
 
 export default function RegisterPage() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-surface via-surface-elevated to-background flex items-center justify-center p-4 relative overflow-hidden">
-      {/* Background Effects */}
+      {/* Fond dégradé */}
       <div className="absolute inset-0">
         <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
         <div className="absolute inset-0 bg-[url('/grid.svg')] opacity-5" />
         <div className="absolute inset-0 bg-gradient-to-t from-background via-background/90 to-background/50" />
       </div>
-      
-      {/* Floating Elements */}
+
+      {/* Éléments flottants décoratifs */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
         <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl animate-pulse" />
-        <div className="absolute top-40 right-20 w-32 h-32 bg-accent/10 rounded-full blur-2xl animate-pulse animation-delay-2000" />
-        <div className="absolute bottom-20 left-1/4 w-16 h-16 bg-success/10 rounded-full blur-lg animate-pulse animation-delay-4000" />
+        <div className="absolute top-40 right-20 w-32 h-32 bg-accent/10 rounded-full blur-2xl animate-pulse" />
+        <div className="absolute bottom-20 left-1/4 w-16 h-16 bg-success/10 rounded-full blur-lg animate-pulse" />
       </div>
-      
-      <div className="w-full max-w-md">
+
+      {/* Formulaire — Suspense requis par useSearchParams() dans useRegister */}
+      <div className="relative z-10 w-full max-w-md">
         <Suspense fallback={<LoadingFallback />}>
           <RegisterForm />
         </Suspense>

frontend/src/app/auth/register/types.ts

@@ -0,0 +1,11 @@
+export interface RegisterRequest {
+  email: string;
+  password: string;
+  name?: string;
+}
+
+export interface RegisterResponse {
+  id: string;
+  email: string;
+  tier: 'free' | 'pro';
+}

frontend/src/app/auth/register/useRegister.ts

@@ -0,0 +1,38 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { apiClient } from '@/lib/apiClient';
+import type { RegisterRequest, RegisterResponse } from './types';
+import type { LoginResponse } from '../login/types';
+
+interface ApiError {
+  message: string;
+  error?: string;
+}
+
+export function useRegister() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirect = searchParams.get('redirect') || '/dashboard';
+
+  return useMutation({
+    mutationFn: async (data: RegisterRequest) => {
+      await apiClient.post<RegisterResponse>('/api/v1/auth/register', data);
+
+      const loginResponse = await apiClient.post<LoginResponse>(
+        '/api/v1/auth/login',
+        { email: data.email, password: data.password }
+      );
+      return loginResponse.data;
+    },
+    onSuccess: (data) => {
+      localStorage.setItem('token', data.access_token);
+      localStorage.setItem('refresh_token', data.refresh_token);
+      router.push(redirect);
+    },
+    onError: (error: ApiError) => {
+      console.error('[useRegister] Registration failed:', error.message);
+    },
+  });
+}