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