240 lines
8.4 KiB
JavaScript
240 lines
8.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Mail, User, Lock } from 'lucide-react';
|
|
import { useNavigate, Link} from 'react-router-dom';
|
|
import { useTranslation } from "react-i18next";
|
|
import { API_BASE_URL } from "../config.js";
|
|
|
|
function Signup() {
|
|
const { t } = useTranslation();
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
surname: '',
|
|
pseudo:'',
|
|
email: '',
|
|
gender: '',
|
|
password: '',
|
|
confirmPassword: ''
|
|
});
|
|
const navigate = useNavigate();
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (formData.password !== formData.confirmPassword) {
|
|
alert(t('auth.signup.passNoMatch'));
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/signup`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || t('auth.signup.error'));
|
|
}
|
|
|
|
alert(t('auth.signup.success'));
|
|
|
|
|
|
navigate("/");
|
|
} catch (error) {
|
|
alert(error.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="w-full md:w-96 bg-white rounded-lg shadow-md p-6 mx-auto">
|
|
<h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">{t('auth.signup.title')}</h2>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('auth.signup.firstNameLabel')}
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<User className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('auth.signup.lastNameLabel')}
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<User className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
name="surname"
|
|
value={formData.surname}
|
|
onChange={handleChange}
|
|
className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('auth.signup.pseudoLabel')}
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<User className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
name="pseudo"
|
|
value={formData.pseudo}
|
|
onChange={handleChange}
|
|
className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sexe */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('auth.signup.genderLabel')}
|
|
</label>
|
|
<div className="flex gap-6 items-center">
|
|
<label className="inline-flex items-center">
|
|
<input
|
|
type="radio"
|
|
name="gender"
|
|
value="homme"
|
|
checked={formData.gender === 'homme'}
|
|
onChange={handleChange}
|
|
className="form-radio h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
|
|
/>
|
|
<span className="ml-2">{t('auth.signup.genderMale')}</span>
|
|
</label>
|
|
<label className="inline-flex items-center">
|
|
<input
|
|
type="radio"
|
|
name="gender"
|
|
value="femme"
|
|
checked={formData.gender === 'femme'}
|
|
onChange={handleChange}
|
|
className="form-radio h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
|
|
/>
|
|
<span className="ml-2">{t('auth.signup.genderFemale')}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('auth.signup.emailLabel')}
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<Mail className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mot de passe */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('auth.signup.passwordLabel')}
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<Lock className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
value={formData.password}
|
|
onChange={handleChange}
|
|
className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
required
|
|
minLength="8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Confirmer mot de passe */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('auth.signup.confirmPasswordLabel')}
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<Lock className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="password"
|
|
name="confirmPassword"
|
|
value={formData.confirmPassword}
|
|
onChange={handleChange}
|
|
className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
required
|
|
minLength="8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bouton d'inscription */}
|
|
<div className="pt-4">
|
|
<button
|
|
type="submit"
|
|
className="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
{t('auth.signup.submitButton')}
|
|
</button>
|
|
</div>
|
|
|
|
{/*Si il a déjà un compte*/}
|
|
<div className="mt-4 text-sm text-center">
|
|
<p>
|
|
{t('auth.signup.hasAccount')}
|
|
<Link to="/login" className="text-indigo-600 hover:text-indigo-700 font-medium ml-1"> {t('auth.signup.loginLink')}</Link>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Signup;
|