parent
9241eb15d8
commit
c0c6c21e8f
@ -1,80 +1,111 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { AiOutlineSend } from 'react-icons/ai';
|
||||
import { useNavigate } from 'react-router-dom'; // Use useNavigate instead of useHistory
|
||||
import AuthService from '../services/AuthService';
|
||||
import '../Style/Global.css';
|
||||
|
||||
export default class SignUp extends Component {
|
||||
handleSubmit = async (event: any) => {
|
||||
const SignUp = () => {
|
||||
const navigate = useNavigate(); // Use useNavigate instead of useHistory
|
||||
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showConfirmation, setShowConfirmation] = useState(false);
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
try{
|
||||
|
||||
try {
|
||||
const data = {
|
||||
pseudo: event.target.pseudo.value,
|
||||
password: event.target.password.value,
|
||||
Cpassword: event.target.Cpassword.value
|
||||
pseudo: (event.target as any).pseudo.value,
|
||||
password: (event.target as any).password.value,
|
||||
Cpassword: (event.target as any).Cpassword.value,
|
||||
};
|
||||
|
||||
const isValid = await AuthService.validateSignUp(data);
|
||||
const validation = await AuthService.validateSignUp(data);
|
||||
|
||||
if (!validation.valid) {
|
||||
setError(validation.error);
|
||||
} else {
|
||||
setError(null);
|
||||
|
||||
if(isValid){
|
||||
const result = await AuthService.signUp(data);
|
||||
console.log(result);
|
||||
alert('Inscription réussie !');
|
||||
// console.log(result);
|
||||
|
||||
setShowConfirmation(true);
|
||||
setTimeout(() => {
|
||||
navigate('/login'); // 3 secondes avant de rediriger vers la page de connexion
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
catch(error){
|
||||
console.error(error);
|
||||
} catch (error: any) {
|
||||
setError(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="form-container">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<br/>
|
||||
<h3>Sign Up</h3>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="pseudo">Pseudo</label>
|
||||
<input
|
||||
type="text"
|
||||
id="pseudo"
|
||||
name="pseudo"
|
||||
className="form-control"
|
||||
placeholder="Entrez votre pseudo ici"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
className="form-control"
|
||||
placeholder="Entrez votre mot de passe ici"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="Cpassword">Confirm Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="Cpassword"
|
||||
name="Cpassword"
|
||||
className="form-control"
|
||||
placeholder="Confirmez votre mot de passe ici"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="d-grid">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Soumettre <AiOutlineSend/>
|
||||
</button>
|
||||
</div>
|
||||
<p className="forgot-password text-right">
|
||||
Vous avez déjà un <a href="/login">compte</a> ?
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setShowConfirmation(false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<br/>
|
||||
<h3>Sign Up</h3>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="pseudo">Pseudo</label>
|
||||
<input
|
||||
type="text"
|
||||
id="pseudo"
|
||||
name="pseudo"
|
||||
className="form-control"
|
||||
placeholder="Entrez votre pseudo ici"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
className="form-control"
|
||||
placeholder="Entrez votre mot de passe ici"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="Cpassword">Confirm Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="Cpassword"
|
||||
name="Cpassword"
|
||||
className="form-control"
|
||||
placeholder="Confirmez votre mot de passe ici"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="d-grid">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Soumettre <AiOutlineSend/>
|
||||
</button>
|
||||
</div>
|
||||
<p className="forgot-password text-right">
|
||||
Vous avez déjà un <a href="/login">compte</a> ?
|
||||
</p>
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<div className="alert alert-danger" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showConfirmation && (
|
||||
<div className="alert alert-success" role="alert">
|
||||
Inscription réussie ! Vous serez redirigé vers la page de connexion dans 3 secondes.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUp;
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
class ValidationService {
|
||||
public static validateSignUpData(data: any): boolean {
|
||||
public static validateSignUpData(data: any): {valid: boolean, error: string} {
|
||||
if(!data.pseudo || !data.password || !data.Cpassword) {
|
||||
console.error('Veuillez remplir tous les champs.');
|
||||
return false;
|
||||
return {valid: false, error: 'Veuillez remplir tous les champs.'};
|
||||
}
|
||||
|
||||
// if(data.password !== data.Cpassword) {
|
||||
// console.error('Les mots de passe ne correspondent pas.');
|
||||
// return false;
|
||||
// }
|
||||
if(data.password.length < 8) {
|
||||
return {valid: false, error: 'Le mot de passe doit contenir au moins 8 caractères.'};
|
||||
}
|
||||
|
||||
if(data.password !== data.Cpassword) {
|
||||
return {valid: false, error: 'Les mots de passe ne correspondent pas.'};
|
||||
}
|
||||
|
||||
return true;
|
||||
return {valid: true, error: ''};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in new issue