294 lines
10 KiB
TypeScript
294 lines
10 KiB
TypeScript
'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>
|
|
);
|
|
}
|