You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
5.2 KiB
127 lines
5.2 KiB
import React, { useState } from 'react';
|
|
import { NavLink, redirect} from "react-router-dom";
|
|
import axios from "axios";
|
|
import Connexion from "./Connexion";
|
|
|
|
const Inscription = () => {
|
|
const [formSubmit, setFormSubmit] = useState(false);
|
|
const [pseudo, setPseudo] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [controlPassword, setControlPassword] = useState('');
|
|
|
|
const handleRegister = async (e) => {
|
|
e.preventDefault();
|
|
const terms = document.getElementById("terms");
|
|
const pseudoError = document.querySelector(".pseudo.error");
|
|
const emailError = document.querySelector(".email.error");
|
|
const passwordError = document.querySelector(".password.error");
|
|
const passwordConfirmError = document.querySelector(
|
|
".password-confirm.error"
|
|
);
|
|
const termsError = document.querySelector(".terms.error");
|
|
|
|
passwordConfirmError.innerHTML = "";
|
|
termsError.innerHTML = "";
|
|
|
|
if (password !== controlPassword || !terms.checked) {
|
|
if (password !== controlPassword)
|
|
passwordConfirmError.innerHTML = "Les mots de passe ne correspondent pas";
|
|
|
|
if (!terms.checked)
|
|
termsError.innerHTML = "Veuillez valider les conditions générales";
|
|
} else {
|
|
await axios({
|
|
method: "post",
|
|
url: `${process.env.REACT_APP_API_URL}api/user/register`,
|
|
data: {
|
|
pseudo,
|
|
email,
|
|
password,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
if (res.data.errors) {
|
|
pseudoError.innerHTML = res.data.errors.pseudo;
|
|
emailError.innerHTML = res.data.errors.email;
|
|
passwordError.innerHTML = res.data.errors.password;
|
|
} else {
|
|
setFormSubmit(true);
|
|
}
|
|
})
|
|
.catch((err) => console.log(err));
|
|
}
|
|
};
|
|
/* const showText=()=>{
|
|
const timeoutID =setTimeout(()=>{document.getElementById("textSucces").style.visibility="visible"},3000);
|
|
clearTimeout(timeoutID);
|
|
};
|
|
*/
|
|
return (
|
|
<>
|
|
{formSubmit ? (
|
|
<Connexion error={true}/>
|
|
|
|
) : (
|
|
<div className="formulaire">
|
|
<form className="cadre" action='' onSubmit={handleRegister} >
|
|
<h1>Inscription</h1>
|
|
<div className="inputbox">
|
|
<span>pseudo</span>
|
|
<input type="text"
|
|
name="pseudo"
|
|
id="pseudo"
|
|
onChange={(e) => setPseudo(e.target.value)}
|
|
value={pseudo}/>
|
|
<div className='pseudo error'></div>
|
|
</div>
|
|
<br />
|
|
<div className="inputbox">
|
|
<span>email</span>
|
|
<input type="text"
|
|
name="email"
|
|
id="email"
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
value={email}/>
|
|
<div className='password error'></div>
|
|
</div>
|
|
<br />
|
|
<div className="inputbox">
|
|
<span>mot de passe</span>
|
|
<input type="password"
|
|
name="password"
|
|
id="password"
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
value={password}/>
|
|
<div className='password error'></div>
|
|
</div>
|
|
<br />
|
|
<div className="inputbox">
|
|
<span>comfirmation mot de passe</span>
|
|
<input type="password"
|
|
name="password"
|
|
id="password-conf"
|
|
onChange={(e) => setControlPassword(e.target.value)}
|
|
value={controlPassword}/>
|
|
<div className='password-confirm error'></div>
|
|
</div>
|
|
<br />
|
|
<div className="chexkboxConditionGenerale">
|
|
<input type="checkbox"
|
|
name="terms"
|
|
id="terms"/>
|
|
<span>J'accepte les <a href="/" target="_blank" rel='noopener noreferrer'>conditions générales</a></span>
|
|
<div className="terms error"></div>
|
|
</div>
|
|
<br />
|
|
|
|
<input type="submit" value="inscription" id="inscription"/>
|
|
</form>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Inscription; |