112 lines
4.3 KiB
TypeScript
112 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { authService } from "@/lib/services/auth.service";
|
|
import { AuthError } from "@/types/auth";
|
|
|
|
interface RegisterFormProps {
|
|
from?: string;
|
|
}
|
|
|
|
export function RegisterForm({ from }: RegisterFormProps) {
|
|
const router = useRouter();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<AuthError | null>(null);
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
const email = formData.get("email") as string;
|
|
const password = formData.get("password") as string;
|
|
const confirmPassword = formData.get("confirmPassword") as string;
|
|
|
|
if (password !== confirmPassword) {
|
|
setError({
|
|
code: "SERVER_ERROR",
|
|
message: "Les mots de passe ne correspondent pas",
|
|
});
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await authService.register(email, password);
|
|
router.push(from || "/");
|
|
router.refresh();
|
|
} catch (error) {
|
|
setError(error as AuthError);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="email"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="password"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
Mot de passe
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="confirmPassword"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
Confirmer le mot de passe
|
|
</label>
|
|
<input
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<div className="rounded-md bg-destructive/15 p-3 text-sm text-destructive">
|
|
{error.message}
|
|
</div>
|
|
)}
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
|
>
|
|
{isLoading ? "Inscription en cours..." : "S'inscrire"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|