import React, { useState, useEffect, } from "react"; import { useForm } from "react-hook-form"; import { getCookie, setCookie } from 'react-use-cookie'; import Box from '@mui/material/Box'; import InputAdornment from '@mui/material/InputAdornment'; import TextField from '@mui/material/TextField'; import EmailIcon from '@mui/icons-material/Email' import { Button, Form, FormGroup, Label } from "reactstrap"; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import IconButton from '@mui/material/IconButton'; import { useHistory } from "react-router-dom"; import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; const Partner_Securite_Data = (props) => { const history = useHistory(); const [isLoading, setLoading] = useState(); const [myApiResponse, setmyApiResponse] = useState(""); const [result, setResult] = useState(""); const [testval, settestval] = useState(); const [fields1desabled, setfields1desabled] = useState(true); const [mailfieldsdesabled, setmailfieldsdesabled] = useState(true); const [pwdfieldsdesabled, setpwdfieldsdesabled] = useState(true); const [values, setValues] = React.useState({ password: '', showPassword: false, }); 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 [valuesPass1_v2, setValuesPass1_v2] = React.useState({ password1_v2: '', showPassword1_v2: false, }); const [currentpawdvisible, setcurrentpawdvisible] = useState(false); const [newpawdvisible, setnewpawdvisible] = useState(false); const [confpwdvisible, setconfpwdvisible] = useState(false); const [updatemainmail, setupdatemainmail] = useState(); const [updatepwd, setupdatepwd] = useState(); function enablesecurtymailfields() { document.getElementsByName("current_email")[0].disabled = false; document.getElementsByName("current_email")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("new_email")[0].disabled = false; document.getElementsByName("new_email")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("conf_new_email")[0].disabled = false; document.getElementsByName("conf_new_email")[0].style.backgroundColor = "#FFFFFF"; setmailfieldsdesabled(false); setResult(""); setupdatepwd(); setupdatemainmail(); } function desablesecurtymailfields() { document.getElementsByName("current_email")[0].disabled = true; document.getElementsByName("current_email")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("current_email")[0].value = ""; document.getElementsByName("new_email")[0].disabled = true; document.getElementsByName("new_email")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("new_email")[0].value = ""; document.getElementsByName("conf_new_email")[0].disabled = true; document.getElementsByName("conf_new_email")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("conf_new_email")[0].value = ""; setmailfieldsdesabled(true); setResult(""); setupdatepwd(); setupdatemainmail(); } const handleMouseDownPassword = (event) => { event.preventDefault(); }; // recuperation et gestion du token utilisateur const stored_user = getCookie('tokenmysypart'); if (!stored_user || stored_user.length <= 0) { history.push("/PartnerLogin"); } const handleClickShowPassword_current_pwd = () => { var filtre2_value = document.getElementsByName("current_pwd")[0].value; if (currentpawdvisible == false) { document.getElementsByName("current_pwd")[0].type = "text"; setcurrentpawdvisible(true); } else if (currentpawdvisible == true) { document.getElementsByName("current_pwd")[0].type = "password"; setcurrentpawdvisible(false); } }; const handleClickShowPassword_current_pwd_v2 = () => { var filtre2_value = document.getElementsByName("current_pwd")[0].value; if (currentpawdvisible == false) { document.getElementsByName("current_pwd_v2")[0].type = "text"; setcurrentpawdvisible(true); } else if (currentpawdvisible == true) { document.getElementsByName("current_pwd_v2")[0].type = "password"; setcurrentpawdvisible(false); } }; 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 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); } }; function handleChange1(prop) { return (event) => { setValuesPass1({ ...valuesPass1, [prop]: event.target.value }); }; } function handleChange2(prop) { return (event) => { setValuesPass2({ ...valuesPass2, [prop]: event.target.value }); }; } function handleChange2_v2(prop) { return (event) => { setValuesPass1_v2({ ...valuesPass1_v2, [prop]: event.target.value }); }; } function handleChange3(prop) { return (event) => { setValuesPass3({ ...valuesPass3, [prop]: event.target.value }); }; } function UpdatePartnerPwd() { //setupdatepwd(false); const url = process.env.REACT_APP_API_URL + "myclass/api/update_partner_pwd/"; const formData = new FormData(); formData.append('token', stored_user); // Si le partenaire n'est pas connecté, il est renvoyé vers la page de connexion if (!stored_user || stored_user.length <= 0) { history.push("/PartnerLogin"); } var pwd = document.getElementsByName("current_pwd")[0].value; var new_pwd = document.getElementsByName("new_pwd")[0].value; var conf_new_pwd = document.getElementsByName("new_pwd_conf")[0].value; formData.append('pwd', pwd); formData.append('new_pwd', new_pwd); formData.append('conf_new_pwd', conf_new_pwd); formData.append('partner_account_id', props.partner_account_id); 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 } setLoading(true); fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { setLoading(false); //console.log('message:', result['message'], "result['status'] = ", result['status']); setmyApiResponse(result['status']); setResult(result['message']); if (String(result['status']) === String("true")) { setupdatepwd(true); setpwdfieldsdesabled(true); desablesecurtypwdfields(); alert("Le mot de passe a été mis à jour.") } else if (String(result['status']) === String("Err_Connexion")) { alert( result['message']); history.push("/Connexion"); } else { alert(result['message']); } }) .catch((error) => { setLoading(false); console.error('Error:', error); setmyApiResponse("false"); setupdatepwd(false); alert(result['message']); }); } function UpdatePartnerMail() { setupdatemainmail(false); const url = process.env.REACT_APP_API_URL + "myclass/api/update_partner_main_mail/"; const formData = new FormData(); formData.append('token', stored_user); // Si le partenaire n'est pas connecté, il est renvoyé vers la page de connexion if (!stored_user || stored_user.length <= 0) { history.push("/PartnerLogin"); } var mail = document.getElementsByName("current_email")[0].value; var new_mail = document.getElementsByName("new_email")[0].value; var conf_new_mail = document.getElementsByName("conf_new_email")[0].value; formData.append('mail', mail); formData.append('new_mail', new_mail); formData.append('conf_new_mail', conf_new_mail); formData.append('partner_account_id', props.partner_account_id); setLoading(true); fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { setLoading(false); //console.log('Success:', result['message'], "result['status'] = ", result['status']); setmyApiResponse(result['status']); setResult(result['message']); if (String(result['status']) == String("true")) { setupdatemainmail(true); desablesecurtypwdfields(); alert("L'adresse email a été mise à jour.") } else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } else { alert("Erreur :", result['message']); } }) .catch((error) => { setLoading(false); console.error('Error:', error); setmyApiResponse("false"); setupdatemainmail(false); }); } function desablesecurtypwdfields() { document.getElementsByName("current_pwd")[0].disabled = true; document.getElementsByName("current_pwd")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("current_pwd")[0].value = ""; document.getElementsByName("new_pwd")[0].disabled = true; document.getElementsByName("new_pwd")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("new_pwd")[0].value = ""; document.getElementsByName("new_pwd_conf")[0].disabled = true; document.getElementsByName("new_pwd_conf")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("new_pwd_conf")[0].value = ""; setpwdfieldsdesabled(true); setResult(""); setupdatepwd(); setupdatemainmail(); } function enablesecurtypwdfields() { document.getElementsByName("current_pwd")[0].disabled = false; document.getElementsByName("current_pwd")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("new_pwd")[0].disabled = false; document.getElementsByName("new_pwd")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("new_pwd_conf")[0].disabled = false; document.getElementsByName("new_pwd_conf")[0].style.backgroundColor = "#FFFFFF"; setpwdfieldsdesabled(false); setResult(""); setupdatepwd(); setupdatemainmail(); } const [valuesconf_new_insert_key, setvaluesconf_new_insert_key] = React.useState({ password_insertconf_new_key: '', showpassword_insertconf_new_key: false, }); const [conf_new_insert_key_visible, setconf_new_insert_key_visible] = useState(false); function handleChangeconf_new_insert_key(prop) { return (event) => { setvaluesconf_new_insert_key({ ...conf_new_insert_key_visible, [prop]: event.target.value }); }; } function desablesecurtyInsertKeyfields() { setinsert_key_updated(); document.getElementsByName("current_insert_key")[0].disabled = true; document.getElementsByName("current_insert_key")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("current_insert_key")[0].value = ""; document.getElementsByName("new_insert_key")[0].disabled = true; document.getElementsByName("new_insert_key")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("new_insert_key")[0].value = ""; document.getElementsByName("conf_new_insert_key")[0].disabled = true; document.getElementsByName("conf_new_insert_key")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("conf_new_insert_key")[0].value = ""; setinsert_keyfieldsdesabled(true); setResult(""); setupdatepwd(); setupdatemainmail(); } function UpdatePartnerInsertKey() { setinsert_key_updated(); const url = process.env.REACT_APP_API_URL + "myclass/api/update_partner_insert_key/"; const formData = new FormData(); formData.append('token', stored_user); // Si le partenaire n'est pas connecté, il est renvoyé vers la page de connexion if (!stored_user || stored_user.length <= 0) { history.push("/PartnerLogin"); } var current_key = document.getElementsByName("current_insert_key")[0].value; var new_key = document.getElementsByName("new_insert_key")[0].value; var conf_new_key = document.getElementsByName("conf_new_insert_key")[0].value; document.getElementsByName("identique_insert_key")[0].style.backgroundColor = "white"; if (new_key !== conf_new_key) { document.getElementsByName("identique_insert_key")[0].style.backgroundColor = "red"; return; } document.getElementsByName("caractere_insert_key")[0].style.backgroundColor = "white"; if (String(new_key).length < 8) { document.getElementsByName("caractere_insert_key")[0].style.backgroundColor = "red"; return } var regex = /\d/g; document.getElementsByName("nombre_insert_key")[0].style.backgroundColor = "white"; if (!regex.test(new_key)) { document.getElementsByName("nombre_insert_key")[0].style.backgroundColor = "red"; return } const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/; document.getElementsByName("special_insert_key")[0].style.backgroundColor = "white"; if (!specialChars.test(new_key)) { document.getElementsByName("special_insert_key")[0].style.backgroundColor = "red"; return } formData.append('current_insert_key', current_key); formData.append('new_insert_key', new_key); formData.append('conf_insert_key', conf_new_key); formData.append('partner_account_id', props.partner_account_id); fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log('Success:', result['message'], "result['status'] = ", result['status']); setinsert_key_api(result['status']); setinsert_key_api_message(result['message']); if (String(result['status']) === String("true")) { desablesecurtyInsertKeyfields(); document.getElementsByName("current_insert_key")[0].value = new_key; setinsert_key_updated(true); } else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } }) .catch((error) => { console.error('Error:', error); setinsert_key_api("false"); setinsert_key_updated(false); }); } function enablesecurtyInsertKeyfields() { setinsert_key_updated(); document.getElementsByName("current_insert_key")[0].disabled = false; document.getElementsByName("current_insert_key")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("new_insert_key")[0].disabled = false; document.getElementsByName("new_insert_key")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("conf_new_insert_key")[0].disabled = false; document.getElementsByName("conf_new_insert_key")[0].style.backgroundColor = "#FFFFFF"; setinsert_keyfieldsdesabled(false); setResult(""); setupdatepwd(); setupdatemainmail(); } const handleClickconf_new_insert_key = () => { if (conf_new_insert_key_visible == false) { document.getElementsByName("conf_new_insert_key")[0].type = "text"; setconf_new_insert_key_visible(true); } else if (conf_new_insert_key_visible == true) { document.getElementsByName("conf_new_insert_key")[0].type = "password"; setconf_new_insert_key_visible(false); } }; const [insert_key_api, setinsert_key_api] = useState(""); const [insert_key_api_message, setinsert_key_api_message] = useState(""); const [insert_key_updated, setinsert_key_updated] = useState(); const [insert_keyfieldsdesabled, setinsert_keyfieldsdesabled] = useState(true); // Gestion champs caché : Current_Insertion_Key const [values_current_insert_key, setvalues_current_insert_key] = React.useState({ current_insert_key: '', showCurrent_insert_key: false, }); const [valuescurrent_insert_key, setvaluescurrent_insert_key] = React.useState({ password_insert_current_key: '', showpassword_insert_current_key: false, }); const [current_insert_key_visible, setcurrent_insert_key_visible] = useState(false); function handleChange_current_insert_key(prop) { return (event) => { setvaluescurrent_insert_key({ ...current_insert_key_visible, [prop]: event.target.value }); }; } const handleClickcurrent_insert_key = () => { if (current_insert_key_visible == false) { document.getElementsByName("current_insert_key")[0].type = "text"; setcurrent_insert_key_visible(true); } else if (current_insert_key_visible == true) { document.getElementsByName("current_insert_key")[0].type = "password"; setcurrent_insert_key_visible(false); } }; // FIN Gestion champs caché : Current_Insertion_Key // Gestion champs caché : new_Insertion_Key const [values_new_insert_key, setvalues_new_insert_key] = React.useState({ new_insert_key: '', shownew_insert_key: false, }); const [valuesnew_insert_key, setvaluesnew_insert_key] = React.useState({ password_insert_new_key: '', showpassword_insert_new_key: false, }); const [new_insert_key_visible, setnew_insert_key_visible] = useState(false); function handleChange_new_insert_key(prop) { return (event) => { setvaluesnew_insert_key({ ...new_insert_key_visible, [prop]: event.target.value }); }; } const handleClicknew_insert_key = () => { if (new_insert_key_visible == false) { document.getElementsByName("new_insert_key")[0].type = "text"; setnew_insert_key_visible(true); } else if (new_insert_key_visible == true) { document.getElementsByName("new_insert_key")[0].type = "password"; setnew_insert_key_visible(false); } }; useEffect(() => { desablesecurtymailfields(); desablesecurtypwdfields(); desablesecurtyInsertKeyfields(); }, []) const [p_current_pwd, setp_current_pwd] = useState(""); const [p_new_pwd, setp_new_pwd] = useState(""); const [p_new_pwd_conf, setp_new_pwd_conf] = useState(""); const [p_current_email, setp_current_email] = useState(""); const [p_new_email, setp_new_email] = useState(""); const [p_conf_new_email, setp_conf_new_email] = useState(""); const [p_current_insert_key, setp_current_insert_key] = useState(""); const [p_new_insert_key, setp_new_insert_key] = useState(""); const [p_conf_new_insert_key, setp_conf_new_insert_key] = useState(""); const [pwd2_type, setpwd2_type] = useState("password"); return (
{isLoading &&
}
 
Mot de passe
{updatepwd == false &&
Erreur mise à jour.
} {updatepwd == true &&
La mise à jour été faite
}   :not(style)': { m: 1 } }}> {/* {currentpawdvisible ? : } } /> */} { {currentpawdvisible ? : } ), }} /> } {/* {currentpawdvisible ? : } ), }} /> */} {/* {newpawdvisible ? : } } /> */} { {newpawdvisible ? : } ), }} /> } {/* {confpwdvisible ? : } } /> */} { {confpwdvisible ? : } ), }} /> }
Créez un mot de passe contenant au moins :
  • 8 caractères
  • 1 nombre
  • 1 caractère spécial p. ex., $, !, @, %, &
  • Identiques
{pwdfieldsdesabled == false &&
} {pwdfieldsdesabled == true && }
Emails contact
{updatemainmail === false &&
Erreur mise à jour.
} {updatemainmail === true &&
La mise à jour été faite
}
), }} value={p_current_email} onChange={(e) => setp_current_email(e.target.value)} /> ), }} value={p_new_email} onChange={(e) => setp_new_email(e.target.value)} /> ), }} value={p_conf_new_email} onChange={(e) => setp_conf_new_email(e.target.value)} />
 
  •  
  •  
  •  
  •  
  •  
{mailfieldsdesabled == false &&
} {mailfieldsdesabled == true &&
}
 
Clé de rattachement
{insert_key_updated === false &&
Erreur mise à jour {setinsert_key_api_message}
} {insert_key_updated === true &&
La clé a été correctement mise à jour
}   :not(style)': { m: 1 } }} > {/* {current_insert_key_visible ? : } } /> */} { {current_insert_key_visible ? : } ), }} /> } {/* {new_insert_key_visible ? : } } /> */} { {new_insert_key_visible ? : } ), }} /> } {/* {conf_new_insert_key_visible ? : } } /> */} { {conf_new_insert_key_visible ? : } ), }} /> }
Créez une clé contenant au moins :
  • 8 caractères
  • 1 nombre
  • 1 caractère spécial p. ex., $, !, @, %, &
  • Identiques
{insert_keyfieldsdesabled == false &&
} {insert_keyfieldsdesabled == true && }
Parametrage SMTP
 
) } export default Partner_Securite_Data;