220 lines
9.1 KiB
TypeScript
220 lines
9.1 KiB
TypeScript
"use client"
|
||
|
||
import Link from "next/link"
|
||
import { useState } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
import { useForm } from "react-hook-form"
|
||
import { zodResolver } from "@hookform/resolvers/zod"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Mail, Lock, AlertCircle, CheckCircle } from "lucide-react"
|
||
import { useAuth } from "@/lib/auth-context"
|
||
import { registerSchema, type RegisterFormData } from "@/lib/validation"
|
||
|
||
export default function RegisterPage() {
|
||
const router = useRouter()
|
||
const { register: registerUser, isLoading } = useAuth()
|
||
const [apiError, setApiError] = useState("")
|
||
const [success, setSuccess] = useState(false)
|
||
|
||
const {
|
||
register,
|
||
handleSubmit,
|
||
formState: { errors, isSubmitting },
|
||
} = useForm<RegisterFormData>({
|
||
resolver: zodResolver(registerSchema),
|
||
})
|
||
|
||
const onSubmit = async (data: RegisterFormData) => {
|
||
setApiError("")
|
||
setSuccess(false)
|
||
|
||
try {
|
||
await registerUser(data.email, data.password, data.firstName, data.lastName, data.citizenId)
|
||
setSuccess(true)
|
||
setTimeout(() => {
|
||
router.push("/dashboard")
|
||
}, 500)
|
||
} catch (err) {
|
||
setApiError("Une erreur s'est produite lors de l'inscription")
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen grid grid-cols-1 md:grid-cols-2">
|
||
{/* Left side - Illustration */}
|
||
<div className="hidden md:flex items-center justify-center p-8 bg-gradient-to-br from-card to-background">
|
||
<div className="text-center space-y-8 max-w-sm">
|
||
<div className="text-7xl">🗳️</div>
|
||
<div className="space-y-4">
|
||
<h2 className="text-3xl font-bold">Rejoignez-nous</h2>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Créez un compte pour participer à des élections sécurisées et transparentes
|
||
</p>
|
||
</div>
|
||
<div className="space-y-4 pt-4">
|
||
<div className="flex items-center gap-4 text-left">
|
||
<CheckCircle className="w-6 h-6 text-accent flex-shrink-0" />
|
||
<p className="font-semibold text-foreground">Inscription gratuite</p>
|
||
</div>
|
||
<div className="flex items-center gap-4 text-left">
|
||
<CheckCircle className="w-6 h-6 text-accent flex-shrink-0" />
|
||
<p className="font-semibold text-foreground">Sécurité maximale</p>
|
||
</div>
|
||
<div className="flex items-center gap-4 text-left">
|
||
<CheckCircle className="w-6 h-6 text-accent flex-shrink-0" />
|
||
<p className="font-semibold text-foreground">Aucune données</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right side - Form */}
|
||
<div className="flex items-center justify-center p-4 md:p-8 bg-background">
|
||
<div className="w-full max-w-sm space-y-8">
|
||
<div className="space-y-2 text-center">
|
||
<h1 className="text-3xl font-bold">S'inscrire</h1>
|
||
<p className="text-muted-foreground">Créez votre compte E-Voting</p>
|
||
</div>
|
||
|
||
<Card>
|
||
<CardContent className="pt-6">
|
||
{apiError && (
|
||
<div className="mb-4 p-4 rounded-md bg-destructive/10 border border-destructive/50 flex gap-3">
|
||
<AlertCircle className="w-5 h-5 text-destructive flex-shrink-0 mt-0.5" />
|
||
<div>
|
||
<p className="text-sm font-medium text-destructive">Erreur</p>
|
||
<p className="text-sm text-destructive/80">{apiError}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{success && (
|
||
<div className="mb-4 p-4 rounded-md bg-accent/10 border border-accent/50 flex gap-3">
|
||
<CheckCircle className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
|
||
<div>
|
||
<p className="text-sm font-medium text-accent">Succès</p>
|
||
<p className="text-sm text-accent/80">Votre compte a été créé avec succès</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="firstName">Prénom</Label>
|
||
<Input
|
||
id="firstName"
|
||
placeholder="Jean"
|
||
{...register("firstName")}
|
||
disabled={isLoading || isSubmitting}
|
||
className={errors.firstName ? "border-destructive" : ""}
|
||
/>
|
||
{errors.firstName && (
|
||
<p className="text-sm text-destructive">{errors.firstName.message}</p>
|
||
)}
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="lastName">Nom</Label>
|
||
<Input
|
||
id="lastName"
|
||
placeholder="Dupont"
|
||
{...register("lastName")}
|
||
disabled={isLoading || isSubmitting}
|
||
className={errors.lastName ? "border-destructive" : ""}
|
||
/>
|
||
{errors.lastName && (
|
||
<p className="text-sm text-destructive">{errors.lastName.message}</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email">Email</Label>
|
||
<div className="relative">
|
||
<Mail className="absolute left-3 top-3 w-5 h-5 text-muted-foreground" />
|
||
<Input
|
||
id="email"
|
||
type="email"
|
||
placeholder="votre@email.com"
|
||
{...register("email")}
|
||
disabled={isLoading || isSubmitting}
|
||
className={`pl-10 ${errors.email ? "border-destructive" : ""}`}
|
||
/>
|
||
</div>
|
||
{errors.email && (
|
||
<p className="text-sm text-destructive">{errors.email.message}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="citizenId">Numéro de Citoyen (CNI/ID)</Label>
|
||
<Input
|
||
id="citizenId"
|
||
placeholder="Ex: 12345ABC678"
|
||
{...register("citizenId")}
|
||
disabled={isLoading || isSubmitting}
|
||
className={errors.citizenId ? "border-destructive" : ""}
|
||
/>
|
||
{errors.citizenId && (
|
||
<p className="text-sm text-destructive">{errors.citizenId.message}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password">Mot de passe</Label>
|
||
<div className="relative">
|
||
<Lock className="absolute left-3 top-3 w-5 h-5 text-muted-foreground" />
|
||
<Input
|
||
id="password"
|
||
type="password"
|
||
placeholder="••••••••"
|
||
{...register("password")}
|
||
disabled={isLoading || isSubmitting}
|
||
className={`pl-10 ${errors.password ? "border-destructive" : ""}`}
|
||
/>
|
||
</div>
|
||
{errors.password && (
|
||
<p className="text-sm text-destructive">{errors.password.message}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="passwordConfirm">Confirmer le mot de passe</Label>
|
||
<div className="relative">
|
||
<Lock className="absolute left-3 top-3 w-5 h-5 text-muted-foreground" />
|
||
<Input
|
||
id="passwordConfirm"
|
||
type="password"
|
||
placeholder="••••••••"
|
||
{...register("passwordConfirm")}
|
||
disabled={isLoading || isSubmitting}
|
||
className={`pl-10 ${errors.passwordConfirm ? "border-destructive" : ""}`}
|
||
/>
|
||
</div>
|
||
{errors.passwordConfirm && (
|
||
<p className="text-sm text-destructive">{errors.passwordConfirm.message}</p>
|
||
)}
|
||
</div>
|
||
|
||
<Button type="submit" className="w-full" disabled={isLoading || isSubmitting}>
|
||
{isLoading || isSubmitting ? "Inscription en cours..." : "S'inscrire"}
|
||
</Button>
|
||
</form>
|
||
|
||
<p className="text-center text-sm text-muted-foreground mt-6">
|
||
Déjà un compte?{" "}
|
||
<Link href="/auth/login" className="text-accent font-medium hover:underline">
|
||
Se connecter
|
||
</Link>
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|