import React, { useState, useEffect } from "react"; import { Helmet } from "react-helmet"; import { useForm } from "react-hook-form"; import { useHistory } from "react-router-dom"; import { Button, FormGroup, Label, Input } from "reactstrap"; import { useCookies } from "react-cookie"; import { confirmAlert } from 'react-confirm-alert'; // Import import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css import 'reactjs-popup/dist/index.css'; import axios from "axios"; import { useParams } from 'react-router-dom' import { useLocation } from "react-router-dom"; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import 'react-tooltip/dist/react-tooltip.css' import TextField from '@mui/material/TextField'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import { makeStyles } from "@material-ui/core/styles"; import Paper from '@material-ui/core/Paper'; import Draggable from 'react-draggable'; import { IconButton } from '@material-ui/core'; import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; import Module_Alert_Confirmation from "./Module_Alert_Confirmation"; import Sign_In_Logo_MySy_SVG from '../img_new_design_2025/Logo_MySy.svg'; import Sign_In_Line_Arrow_Left_SVG from '../img_new_design_2025/line-arrow-left.svg'; function PaperComponent(props) { return ( ); } const useStyles = makeStyles((theme) => ({ dialog: { position: 'absolute', // left: 10, top: 400 }, paper: { overflowY: 'unset', }, customizedButton: { position: 'absolute', left: '98%', top: '-3%', backgroundColor: 'lightgray', color: 'gray', }, })); function New_C_Sign_In_2025() { const classes = useStyles(); const [isconnected, setisconnected] = useState(""); const [cookie_acces_right, setCookie_acces_right, removeCookie_acces_right] = useCookies(['mysy_user_access_right']); const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych'], { path: '/' }); const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart'], { path: '/' }); 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("partner"); const [currentpawdvisible, setcurrentpawdvisible] = useState(false); const [typecompte, settypecompte] = useState("partner"); 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: 'Oui', 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: 'Oui', onClick: () => logout_user_confirmation() }, /* { label: 'Non', onClick: () => retnull() }*/ ] }); } const onSubmit = async (data) => { //console.log(" CONNEXION DE = ",menucompte); var partner_connexion = ""; var url_login = ""; if (String(menucompte) === "partner") { url_login = process.env.REACT_APP_API_URL + "myclass/api/partner_login/"; setmenucompte("partner"); partner_connexion = "partner"; } else if (String(menucompte) === "user") { url_login = process.env.REACT_APP_API_URL + "myclass/api/login/"; setmenucompte("user"); partner_connexion = "user"; } // console.log( " ### full url_login = ", url_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 = login_pwd; //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"); setdisplay_alert_mysy("1"); setalert_message("L'adresse email est incorrecte"); setalert_type("error"); return; } if (mypwd.length <= 0) { // alert("Vous n'avez pas saisi de mot de passe"); setdisplay_alert_mysy("1"); setalert_message("Vous n'avez pas saisi de mot de passe"); setalert_type("error"); 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(); } 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(partner_connexion) === String("partner")) { // recuperation et stockage des cookies sur les droit d'acces setCookie("tokenmysypart", JSON.parse(result['message']).token, { path: '/' }); var acces_right_token_name = String(JSON.parse(result['message']).token) + "_uar"; var acces_right_token_val = JSON.parse(result['message']).user_access_right; setCookie_acces_right(acces_right_token_name, acces_right_token_val, { path: '/' }); // recuperation et stockage des cookie sur les paramettres de connexion var returned_connexion_data = JSON.parse(result['message']) if (returned_connexion_data.list_connexion_context) { const new_data = returned_connexion_data.list_connexion_context.map((x) => { // recuperation et stockage des cookies sur les droit d'acces if (x['code'] && x['code_value']) { setCookie(String(x['code']), String(x['code_value']), { path: '/' }); } }); } //setCookie("tokenmysypart", result['message']); history.push("/Partner"); } else if (String(partner_connexion) === 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({ pathname: "/mysy-user-account", state: { firstconnexion: String(result['firstconnexion']) } }); } } } else { setisconnected("false"); // setmyApimyApiMessage(result['message']); setdisplay_alert_mysy("1"); setalert_message(result['message']); setalert_type("error"); } }) .catch((error) => { console.error('Error:', error); setisconnected("false"); //setmyApimyApiMessage("Le service est momentanément indisponible, merci de ressayer plus tard. "); setdisplay_alert_mysy("1"); setalert_message("Le service est momentanément indisponible, merci de ressayer plus tard."); setalert_type("error"); }); } const location = useLocation(); useEffect(() => { setmenucompte("partner"); 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(); } if (location && location.state && location.state.mysy_arg && String(location.state.mysy_arg) === "partner") { menu_parter_account(); } }, []); function menu_parter_account() { //alert(" menu_parter_account = "+String(menucompte)); setmenucompte("partner"); if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0]) document.getElementsByName("partner_account")[0].style.backgroundColor = "#81BC3A"; if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0]) document.getElementsByName("user_account")[0].style.backgroundColor = "#ffffff"; } function menu_user_account() { setmenucompte("user"); if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0]) document.getElementsByName("user_account")[0].style.backgroundColor = "#81BC3A"; if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0]) document.getElementsByName("partner_account")[0].style.backgroundColor = "#ffffff"; } function resetpasswd_ok(e) { // Controle du mail var mymail = reset_login_email; //alert(" le mail de reset = "+mymail); var re = /\S+@\S+\.\S+/; if (re.test(mymail) === false) { // alert("l'adresse email est incorrecte"); document.getElementsByName("zoneemail")[0].style.border = "1px solid red"; var txt = "L'adresse email est incorrecte" setdisplay_alert_mysy("1"); setalert_message(txt); setalert_type("error"); return; } var total = " ?? "; if (document.getElementsByName("sommerandom")[0].value) { total = document.getElementsByName("sommerandom")[0].value; } var calcul_total = parseInt(random1) + parseInt(random2); // console.log("### total = ", total); if (parseInt(total) != parseInt(calcul_total)) { document.getElementsByName("pasrobot")[0].style.border = "1px solid red"; // alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!"); var txt = "Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!" // alert(res.data.message); setdisplay_alert_mysy("1"); setalert_message(txt); setalert_type("error"); return; } var form = new FormData(); form.append("email", mymail); form.append("account_type", typecompte); 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")) { setmyApiResponse("true"); setResult(res.data.message); // alert(res.data.message); setdisplay_alert_mysy("1"); setalert_message(res.data.message); setalert_type("success"); Dialog_reset_pwd_open_handleClose(); } else { setmyApiResponse("false"); setResult(res.data.message); // alert(res.data.message); setdisplay_alert_mysy("1"); setalert_message(res.data.message); setalert_type("error"); } }).catch((error) => { console.warn('Not good man :( mysearchtext = ', error); setmyApiResponse("false"); setinitpasswd("false"); //setmyApimyApiMessage("") // alert(res.data.message); var txt = " Impossible de prendre en compte la demande de réinitialisation" setdisplay_alert_mysy("1"); setalert_message(txt); setalert_type("error"); }) } function resetpasswd(e) { confirmAlert({ title: 'Reinitialisation Mot de Passe?', message: 'Confirmez la reinitialisation', buttons: [ { label: 'Oui', onClick: () => resetpasswd_ok() }, { label: 'Non', 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); // 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); }*/ const handleClickShowPassword_desktop = () => { if (currentpawdvisible == false) { document.getElementsByName("pwd_desktop")[0].type = "text"; setcurrentpawdvisible(true); } else if (currentpawdvisible == true) { document.getElementsByName("pwd_desktop")[0].type = "password"; setcurrentpawdvisible(false); } }; const handleClickShowPassword_mobile = () => { if (currentpawdvisible == false) { document.getElementsByName("pwd_mobile")[0].type = "text"; setcurrentpawdvisible(true); } else if (currentpawdvisible == true) { document.getElementsByName("pwd_mobile")[0].type = "password"; setcurrentpawdvisible(false); } }; const [login_email, setlogin_email] = useState(""); const [login_pwd, setlogin_pwd] = useState(""); const [reset_login_email, setreset_login_email] = useState(""); const [reset_somme_random, setreset_somme_random] = useState(""); const [Dialog_reset_pwd_open, setDialog_reset_pwd_open] = React.useState(false); const Dialog_reset_pwd_open_handleClose = () => { setDialog_reset_pwd_open(false) setreset_login_email(""); }; const [display_alert_mysy, setdisplay_alert_mysy] = useState(""); const [alert_message, setalert_message] = useState(""); const [alert_type, setalert_type] = useState(""); function clear_alert_message() { setalert_message(""); } function clear_alert_type() { setalert_type(""); } function clear_display_alert_mysy() { setdisplay_alert_mysy(""); } return (
{/*** Affichage des messages d'alerte*/} {display_alert_mysy && String(display_alert_mysy) === "1" && } {/*** FIN Affichage des messages d'alerte*/} {/*** GESTION RESET PWD */} null} PaperProps={{ className: classes.paper, // Apply the paper style style: { overflowY: 'unset', position: 'absolute', top: '5rem', margin: "2px", }, }} hideBackdrop={true} disableScrollLock classes={{ paper: classes.dialog }} PaperComponent={PaperComponent} aria-labelledby="draggable-dialog-title" >   Réinitialiser votre mot de passe
Votre email { setreset_login_email(e.target.value); } } placeholder="Votre email" />
Je ne suis un robot : {random1} + {random2} = { setreset_somme_random(e.target.value); } }*/ placeholder="Calculez la sommes des valeurs" />
{/*** FIN GESTION RESET PWD */} Connexion
Connectez-vous
{ setlogin_email(event.target.value); }} />
{ setlogin_pwd(event.target.value); }} />
Se connecter

Vous n'avez pas de compte ?

{ history.push("/signup"); }}>Créez un compte
TRAINING
{ history.push("/"); }}>Retour à l'accueil
 
{window.location.host}
{ history.push("/"); }}>Retour à l'accueil
Connectez-vous
{ setlogin_email(event.target.value); }} />
{ setlogin_pwd(event.target.value); }} />
Se connecter

Vous n'avez pas de compte ?

{ history.push("/signup"); }}>Créez un compte
TRAINING
); } export default New_C_Sign_In_2025;