import React, { useState, useEffect } from "react"; import { useForm } from "react-hook-form"; import { useHistory } from "react-router-dom"; import { Button, FormGroup, Label, Input } from "reactstrap"; import { FacebookLoginButton, GoogleLoginButton } from "react-social-login-buttons"; //import { getCookie, setCookie, removeCookie } from 'react-use-cookie'; import { Helmet } from "react-helmet"; import { useCookies } from "react-cookie"; import { confirmAlert } from 'react-confirm-alert'; // Import import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png"; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import axios from "axios"; import { useParams } from 'react-router-dom' import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; import Footer from "./Fotter"; import MenuItem from "@material-ui/core/MenuItem"; import Button2 from "@material-ui/core/Button"; import Menu from "@material-ui/core/Menu"; import Header from "./Header"; function SignIn() { const [isconnected, setisconnected] = useState(""); const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']); const [retval, setretval] = useState("0"); const [myApimyApiMessage, setmyApimyApiMessage] = useState(""); const [initpasswd, setinitpasswd] = useState(); const [result, setResult] = useState(""); const [myApiResponse, setmyApiResponse] = useState("false"); const url_login = process.env.REACT_APP_API_URL + "myclass/api/login/"; const random1 = Math.floor(Math.random() * 10); const random2 = Math.floor(Math.random() * 10); const [closepopup, setclosepopup] = useState(0); const { obj, objid } = useParams(); const [menucompte, setmenucompte] = useState("user"); const { register, formState: { errors }, handleSubmit, } = useForm(); const history = useHistory(); function logout_partner_confirmation() { removeCookie_part('tokenmysypart', { path: '/' }); } function retnull() { setretval("-1"); } function Logout_Partenaire() { confirmAlert({ title: '', message: 'Confirmez la deconnexion compte PRO', buttons: [ { label: 'Yes', onClick: () => logout_partner_confirmation() }, ] }); } function logout_user_confirmation() { removeCookie_part('tokenmysych', { path: '/' }); } function Logout_User() { confirmAlert({ title: 'Deconnexion utilisateur ?', message: 'Confirmez la deconnexion utilisateur', buttons: [ { label: 'Yes', onClick: () => logout_user_confirmation() }, /* { label: 'No', onClick: () => retnull() }*/ ] }); } const onSubmit = async (data) => { var url_login = process.env.REACT_APP_API_URL + "myclass/api/login/"; // Gestion des Cookies const stored_partner = cookie_part.tokenmysypart; const stored_user = cookie.tokenmysych; const formData = new FormData(); var mymail = document.getElementsByName("email")[0].value; var mypwd = document.getElementsByName("pwd")[0].value; formData.append("email", mymail); formData.append("pwd", mypwd); var re = /\S+@\S+\.\S+/; if (re.test(mymail) === false) { alert("l'adresse email est incorrecte"); return; } if (mypwd.length <= 0) { alert("Vous n'avez pas saisi de mot de passe"); return; } // si c'est une connexion partner qui est active if (typeof (stored_partner) != "undefined" && String(stored_partner) !== String('')) { //alert(" c'est une connexion PARTTT qui est active"); Logout_Partenaire(); } // si c'est une connexion user qui est active if (typeof (stored_user) != "undefined" && String(stored_user) !== String('')) { //alert(" c'est une connexion USERR qui est active"); Logout_User(); } if (String(menucompte) === String("partner")) { document.getElementsByName("cle_secrete")[0].style.backgroundColor = "white"; if (!document.getElementsByName("cle_secrete")[0] || document.getElementsByName("cle_secrete")[0].value.length <= 1) { document.getElementsByName("cle_secrete")[0].style.backgroundColor = "red"; return } var cle_secrete = document.getElementsByName("cle_secrete")[0].value; //var cle_secrete = realpwdvalue; //alert("cle_secrete = "+cle_secrete); formData.append("secret", cle_secrete); url_login = process.env.REACT_APP_API_URL + "myclass/api/partner_login/"; } fetch( url_login, { method: 'POST', body: formData, } ).then((response) => response.json()) .then((result) => { console.log('Success:', result['message'], "result['status'] = ", result['status']); var val = result['status']; if (String(val) === String("true")) { if (String(menucompte) === String("partner")) { setCookie("tokenmysypart", cle_secrete); history.push("/Partner"); } if (String(menucompte) === String("user")) { setCookie("tokenmysych", result['message']); // Verification vers quelle page les renvoyer if (obj === "training" && String(objid).length > 0) { // redirection vers l'affichage d'une formation history.push("/Display-Detail-formation/" + objid); } else { // Redirection par defaut vers la compte utilisateur history.push("/mysy-user-account"); } } } else { setisconnected("false"); setmyApimyApiMessage(result['message']); } }) .catch((error) => { console.error('Error:', error); setisconnected("false"); setmyApimyApiMessage("Le service est momentannéement indisponible, merci de ressayer plus tard. "); }); } useEffect(() => { const listener = event => { if (event.code === "Enter" || event.code === "NumpadEnter") { event.preventDefault(); onSubmit(); } }; document.addEventListener("keydown", listener); if (String(menucompte) === String("user")) { menu_user_account() } else { menu_parter_account(); } }, []); 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"; } function resetpasswd_ok(e) { 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; } // Controle du mail var mymail = document.getElementsByName("resetemailvalue")[0].value; //alert(" le mail de reset = "+mymail); var re = /\S+@\S+\.\S+/; if (re.test(mymail) === false) { alert("l'adresse email est incorrecte"); return; } // controle de la cle secrete // on verifie juste que la clé fait plus de 5 caractère var cle_secrete = "" if (String(menucompte) === String("partner")) { cle_secrete = document.getElementsByName("resetemailvalueclesecrete")[0].value; if (cle_secrete.length === 5) { alert("la clé secrete est incorrecte"); return; } } var form = new FormData(); form.append("email", mymail); form.append("secrete", cle_secrete); var myurl = process.env.REACT_APP_API_URL + "myclass/api/InitUserPasswd/"; //alert("myurl = "+myurl); axios.post(myurl, form).then(res => { setclosepopup(1); setinitpasswd("true"); if (String(res.data.status) != String("false")) { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("true"); setResult(res.data.message); } else { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("false"); setResult(res.data.message); } }).catch((error) => { console.warn('Not good man :( mysearchtext = '); setmyApiResponse("false"); setinitpasswd("false"); //setmyApimyApiMessage("") }) } function resetpasswd(e) { confirmAlert({ title: 'Reinitialisation Mot de Passe?', message: 'Confirmez la reinitialisation', buttons: [ { label: 'Yes', onClick: () => resetpasswd_ok() }, { label: 'No', onClick: () => { return } }, ], closeOnEscape: false, closeOnClickOutside: false, keyCodeForClose: [8, 32], willUnmount: () => { }, afterClose: () => { }, onClickOutside: () => { }, onKeypress: () => { }, onKeypressEscape: () => { }, }); } 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 closepopupinitpwd() { setclosepopup("1"); } // Cette fonction permet de cacher le mot de passer et eviter les // autocompletion const [realpwdvalue, setrealpwdvalue] = useState(""); const [realpwdhidenvalue, setrealpwdhidenvalue] = useState(""); function realpwd(e) { const val = e.target.value; const last = val.charAt(val.length - 1); var new_val = realpwdvalue; var new_val_hiden = realpwdhidenvalue; //alert(" new_val avant saisie= "+new_val); new_val = new_val + last; new_val_hiden = new_val_hiden + "*"; //alert(" - new_val apres sisie = "+new_val+" new_val_hiden = "+new_val_hiden); setrealpwdhidenvalue(new_val_hiden); setrealpwdvalue(new_val); //setrealpwdvalue(val); document.getElementById("cle_secrete").value = new_val_hiden; } /* function displayvlaue(){ alert(" la valeur secrete = "+realpwdvalue); }*/ return (