feat: revue de code, doc CODE_REVIEW, forfaits 2026, traduction LLM, providers avec modèle
Made-with: Cursor
This commit is contained in:
Sepehr Ramezani
293
frontend/src/app/auth/register/RegisterForm.tsx
Normal file
293
frontend/src/app/auth/register/RegisterForm.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user