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 */}
{/*** FIN GESTION RESET PWD */}
Connexion
{
setlogin_email(event.target.value);
}}
/>
{
setlogin_pwd(event.target.value);
}}
/>
Vous n'avez pas de compte ?
{
history.push("/signup");
}}>Créez un compte
{
history.push("/");
}}>Retour à l'accueil
{window.location.host}
{
history.push("/");
}}>Retour à l'accueil
{
setlogin_email(event.target.value);
}}
/>
{
setlogin_pwd(event.target.value);
}}
/>
Vous n'avez pas de compte ?
{
history.push("/signup");
}}>Créez un compte
);
}
export default New_C_Sign_In_2025;