Ela_Front/src/components/SignUp.js

668 lines
28 KiB
JavaScript

import React, { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import useCookie from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import partnerbannerimg from "../mysy_img/MYSY_banner_compte.png";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { getCookie, setCookie, removeCookie } from 'react-use-cookie';
import { Helmet } from "react-helmet";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import AccountCircle from '@mui/icons-material/AccountCircle';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import IconButton from '@mui/material/IconButton';
import OutlinedInput from '@mui/material/OutlinedInput';
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import Header from "./Header";
import PhoneIcon from '@mui/icons-material/Phone';
import EmailIcon from '@mui/icons-material/Email';
import HomeIcon from '@mui/icons-material/Home';
import TwitterIcon from '@mui/icons-material/Twitter';
import FacebookIcon from '@mui/icons-material/Facebook';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import axios from "axios";
function SignUp() {
const url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";
const [isconnected, setisconnected] = useState("");
const [myApimyApiMessage, setmyApimyApiMessage] = useState("");
const textInput = useRef(null);
const [values, setValues] = React.useState({
amount: '',
password: '',
weight: '',
weightRange: '',
showPassword: false,
});
const [updatepwd, setupdatepwd] = useState();
const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
const [newpawdvisible, setnewpawdvisible] = useState(false);
const [confpwdvisible, setconfpwdvisible] = useState(false);
const [pwdfieldsdesabled, setpwdfieldsdesabled] = useState(true);
const [valuesPass1, setValuesPass1] = React.useState({
password1: '',
showPassword1: false,
});
const [valuesPass2, setValuesPass2] = React.useState({
password2: '',
showPassword2: false,
});
const [valuesPass3, setValuesPass3] = React.useState({
password3: '',
showPassword3: false,
});
const random1 = Math.floor(Math.random() * 10);
const random2 = Math.floor(Math.random() * 10);
const {
register,
formState: { errors },
handleSubmit,
} = useForm();
const [menucompte, setmenucompte] = useState("user");
function handleChange1(prop) {
return (event) => {
setValuesPass1({ ...valuesPass1, [prop]: event.target.value });
};
}
function handleChange2(prop) {
return (event) => {
setValuesPass2({ ...valuesPass2, [prop]: event.target.value });
};
}
function handleChange3(prop) {
return (event) => {
setValuesPass3({ ...valuesPass3, [prop]: event.target.value });
};
}
const [result, setResult] = useState("");
const history = useHistory();
const onSubmit = async (data) => {
window.scrollTo(0, 0);
var mymail = document.getElementsByName("email")[0].value;
//var mypwd = document.getElementsByName("pwd")[0].value;
const formData = new FormData();
var re = /\S+@\S+\.\S+/;
if (re.test(mymail) === false) {
alert("Votre adresse email est incorrecte");
document.getElementsByName("email")[0].style.backgroundColor = "red";
return;
}
var new_pwd = document.getElementsByName("new_pwd")[0].value;
var conf_new_pwd = document.getElementsByName("new_pwd_conf")[0].value;
if (new_pwd.length < 8) {
alert("Le mot de passe doit faire au moins 8 caractères ");
return;
}
document.getElementsByName("identique")[0].style.backgroundColor = "white";
if (new_pwd !== conf_new_pwd) {
document.getElementsByName("identique")[0].style.backgroundColor = "red";
return
}
document.getElementsByName("caractere")[0].style.backgroundColor = "white";
if (String(new_pwd).length < 8) {
document.getElementsByName("caractere")[0].style.backgroundColor = "red";
return
}
var regex = /\d/g;
document.getElementsByName("nombre")[0].style.backgroundColor = "white";
if (!regex.test(new_pwd)) {
document.getElementsByName("nombre")[0].style.backgroundColor = "red";
return
}
const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
document.getElementsByName("special")[0].style.backgroundColor = "white";
if (!specialChars.test(new_pwd)) {
document.getElementsByName("special")[0].style.backgroundColor = "red";
return
}
document.getElementsByName("pasrobot")[0].style.backgroundColor = "white";
var total = " ?? ";
if (document.getElementsByName("sommerandom")[0].value) {
total = document.getElementsByName("sommerandom")[0].value;
}
var calcaul_total = parseInt(random1) + parseInt(random2);
if (parseInt(total) != parseInt(calcaul_total)) {
document.getElementsByName("pasrobot")[0].style.backgroundColor = "red";
alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");
return;
}
var mymail = document.getElementsByName("email")[0].value;
var contact_nom = "";
var contact_prenom = "";
var contact_mail = "";
var contact_tel = "";
var raison_sociale = "";
var telephone = "";
var url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
if (String(menucompte) === String("partner")) {
// Verification des champs obligatoires
document.getElementsByName("contact_nom")[0].style.backgroundColor = "white";
if (!document.getElementsByName("contact_nom")[0] || document.getElementsByName("contact_nom")[0].value.length <= 1) {
document.getElementsByName("contact_nom")[0].style.backgroundColor = "red";
alert("Le nom du contact principal est incorrect ");
return
}
document.getElementsByName("contact_prenom")[0].style.backgroundColor = "white";
if (!document.getElementsByName("contact_prenom")[0] || document.getElementsByName("contact_prenom")[0].value.length <= 1) {
document.getElementsByName("contact_prenom")[0].style.backgroundColor = "red";
alert("Le prenom du contact principal est incorrect ");
return
}
document.getElementsByName("contact_email")[0].style.backgroundColor = "white";
if (!document.getElementsByName("contact_email")[0] || document.getElementsByName("contact_email")[0].value.length <= 1) {
document.getElementsByName("contact_email")[0].style.backgroundColor = "red";
alert("L'email du contact principal est incorrect ");
return
}
var re2 = /\S+@\S+\.\S+/;
if (re2.test(document.getElementsByName("contact_email")[0].value) === false) {
alert("L'email du contact principal est incorrect ");
document.getElementsByName("contact_email")[0].style.backgroundColor = "red";
return;
}
document.getElementsByName("contact_telephone")[0].style.backgroundColor = "white";
if (!document.getElementsByName("contact_telephone")[0] || document.getElementsByName("contact_telephone")[0].value.length <= 8) {
document.getElementsByName("contact_telephone")[0].style.backgroundColor = "red";
alert("Le téléphone du contact principal est incorrect ");
return
}
document.getElementsByName("raison_sociale")[0].style.backgroundColor = "white";
if (!document.getElementsByName("raison_sociale")[0] || document.getElementsByName("raison_sociale")[0].value.length <= 2) {
document.getElementsByName("raison_sociale")[0].style.backgroundColor = "red";
alert("La raison sociale du contact principal est incorrecte");
return
}
contact_nom = document.getElementsByName("contact_nom")[0].value;
contact_prenom = document.getElementsByName("contact_prenom")[0].value;
contact_mail = document.getElementsByName("contact_email")[0].value;
contact_tel = document.getElementsByName("contact_telephone")[0].value;
raison_sociale = document.getElementsByName("raison_sociale")[0].value;
telephone = document.getElementsByName("telephone")[0].value;
formData.append("nom", raison_sociale);
formData.append("telephone", telephone);
formData.append("contact_nom", contact_nom);
formData.append("contact_prenom", contact_prenom);
formData.append("contact_tel", contact_tel);
formData.append("contact_mail", contact_mail);
url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_partner_account/";
}
if (!document.getElementsByName("cgu")[0].checked) {
alert(" Vous devez accepter les conditions générales d'utilisation du site. Merci.");
document.getElementsByName("cgu")[0].style.backgroundColor = "red";
return;
}
formData.append("email", mymail);
formData.append("pwd", new_pwd);
fetch(
url_sign_up,
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message'], "result['status'] = ", result['status']);
if (String(result['status']) == String("true")) {
alert(String(result['message']));
setisconnected("true");
setmyApimyApiMessage(result['message']);
window.scrollTo(0, 0);
if (String(menucompte) === String("user")) {
history.push("/Connexion-utilisateur-0");
}
else if (String(menucompte) === String("partner")) {
history.push("/PartnerLogin0");
}
}
else {
//alert(" GRR "+String(result['message']+ " result['status'] = "+ result['status']));
setisconnected("false");
setmyApimyApiMessage(result['message']);
}
})
.catch((error) => {
console.error('Error:', error);
setisconnected("false");
setmyApimyApiMessage("Le service est momentanémentindisponible, merci de ressayer plus tard. ");
});
};
useEffect(() => {
const listener = event => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
event.preventDefault();
onSubmit();
}
};
document.addEventListener("keydown", listener);
//menu_user_account();
window.scrollTo(0, 0);
if (String(menucompte) === String("user")) {
menu_user_account()
}
else {
menu_parter_account();
}
}, []);
const handleClickShowPassword_new_pwd_conf = () => {
if (confpwdvisible == false) {
document.getElementsByName("new_pwd_conf")[0].type = "text";
setconfpwdvisible(true);
}
else if (confpwdvisible == true) {
document.getElementsByName("new_pwd_conf")[0].type = "password";
setconfpwdvisible(false);
}
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
const handleClickShowPassword_new_pwd = () => {
if (newpawdvisible == false) {
document.getElementsByName("new_pwd")[0].type = "text";
setnewpawdvisible(true);
}
else if (newpawdvisible == true) {
document.getElementsByName("new_pwd")[0].type = "password";
setnewpawdvisible(false);
}
};
const [PartnerMenu, setPartnerMenu] = React.useState(null);
const [AccountMenu, setAccountMenu] = React.useState(null);
const PartnerMenu_Close = () => {
setPartnerMenu(null);
};
const AccountMenu_Close = () => {
setAccountMenu(null);
};
const handlePartnerMenu = (event) => {
setPartnerMenu(event.currentTarget);
};
const handleAccountMenu = (event) => {
setAccountMenu(event.currentTarget);
};
const handleClose_Account = () => {
alert(" my account");
setAccountMenu(null);
};
const handleAccountConnexion = () => {
setAccountMenu(null);
history.push("/Connexion")
};
const handleAccountCreation = () => {
setAccountMenu(null);
history.push("/create_account")
};
const handlePartnerConnexion = () => {
setAccountMenu(null);
history.push("/PartnerLogin")
};
function menu_parter_account() {
setmenucompte("partner");
document.getElementsByName("partner_account")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("user_account")[0].style.backgroundColor = "#ffffff";
}
function menu_user_account() {
setmenucompte("user");
document.getElementsByName("user_account")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("partner_account")[0].style.backgroundColor = "#ffffff";
}
return (
<div className="signup">
<Helmet>
<title>Creation compte utilisateur</title>
<meta name="description" content="creation utisateur formation connexion" />
<meta name="robots" content="index,follow" />
<meta name="title" content="Creation compte utilisateur" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/create_account"} />
</Helmet>
<Header />
<div className="div_mobile">
{isconnected === "false" && <div className="erreurconnexion">
<br />
{myApimyApiMessage}</div>
}
{isconnected === "true" && String(myApimyApiMessage).length > 5 &&
<div className="okUpdateData">
<br />
Le compte a été correctement créé. Vous allez recevoir un email de validation sous peu.<br />
Pensez à regarder vos spam aussi.</div>
}
<div className="display_screen_600_901">
<div>
<h1 className="text_welcome">Bien commencer avec MySy Training</h1>
</div>
<div className="div_menu_centre">
<div className="div_row">
<Button variant="outlined" onClick={menu_user_account} className="signin_menu"
id="user_account" name="user_account"
style={{ "float": "left", "textAlign": "center" }}>Utilisateur</Button>
<Button variant="outlined" onClick={menu_parter_account} className="signin_menu"
id="partner_account" name="partner_account"
style={{ "float": "right", "textAlign": "center" }}>Organisme de formation</Button>
</div>
<div className="div_row_bis">
{String(menucompte) === String("partner") && <FormGroup>
<Label className="text_label">Raison Sociale*</Label>
<Input type="text" placeholder="" name="raison_sociale" />
</FormGroup>}
{String(menucompte) === String("partner") && <FormGroup>
<Label className="text_label">Telephone*</Label>
<Input type="text" placeholder="" name="telephone" />
</FormGroup>}
<FormGroup>
<Label className="text_label">Email*</Label>
<Input type="email" placeholder="" name="email" />
</FormGroup>
<Label className="text_label"> Mot de passe</Label><br />
<FormControl sx={{ m: 1, }} variant="outlined" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password2"></InputLabel>
<OutlinedInput
id="new_pwd"
name="new_pwd"
type={values.showPassword ? 'text' : 'password'}
value={values.password2}
label={"P"}
onChange={handleChange2('password2')}
className="ch"
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_new_pwd}
edge="end"
>
{newpawdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
<br />
<Label className="text_label"> Confirmer mot de passe </Label><br />
<FormControl sx={{ m: 1, }} variant="standard" size="small" className="texte_area_passwd">
<OutlinedInput
id="new_pwd_conf"
name="new_pwd_conf"
type={values.showPassword ? 'text' : 'password'}
value={values.password3}
onChange={handleChange3('password3')}
className="ch"
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_new_pwd_conf}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{confpwdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label=" "
/>
</FormControl>
<br />
<div className="text_pwd_crit">
Créez un mot de passe contenant au moins :
<ul>
<li name="caractere">
8 caractères
</li>
<li name="nombre">
1 nombre
</li>
<li name="special">
1 caractère spécial p. ex., $, !, @, %, &
</li>
<li name="identique">
Identiques
</li>
</ul>
</div>
<div className="div_row22">
{String(menucompte) === String("partner") && <div style={{ "textAlign": "left" }}>
<div className="titre1"> Contact Principal </div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
name="contact_nom"
label="Nom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="contact_prenom"
label="Prénom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="contact_email"
label="Adresse mail"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="contact_telephone"
label="Téléphone"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
</InputAdornment>
),
}}
variant="standard"
/>
<br />
</Box>
</div>}
<div style={{ "textAlign": "left", "width": "100%", "marginTop": "0.5rem" }}>
<input type={"checkbox"} unchecked
id="cgu"
name="cgu"
style={{ "textAlign": "left", "width": "auto", "height": "1rem" }} />
<label for="cgu" style={{ "textAlign": "left", maxWidth: "90%", "fontSize": "small" }}>Accepter <a href='/sample/MYSY_CGU.pdf' download>les conditions générales d'usage </a></label>
</div>
<div className="div_row22 text_pwd_crit" style={{ "textAlign": "center", "fontWeight": "bold" }}>
<nav className="pasrobot_block"> Je ne suis pas un robot <br />
<div >
<div name="pasrobot" > {random1} + {random2} = <input
type='text'
name='sommerandom'
id='sommerandom'
{...register('sommerandom', {
required: { value: true, message: 'sommes de valeurs' },
maxLength: {
value: 30,
}
})}
className="pasrobot"
placeholder='Le total est ?'
/>
{errors.sommerandom && (
<span className='koUpdateData'>la sommes est incorrect</span>
)}
</div>
</div>
</nav>
</div>
<Button variant="contained" color="success"
className="div_row22 btn_login button"
ref={textInput}
onClick={onSubmit}>S'inscrire</Button>
</div>
</div>
</div>
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div >
);
}
export default SignUp;