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 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 { Button, } from "reactstrap"; import PasswordIcon from '@mui/icons-material/Password' 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 { useHistory } from "react-router-dom"; 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"; import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; import Module_Alert_Confirmation from "./Module_Alert_Confirmation"; function UpdateUserInfo(props) { const history = useHistory(); const [myApiResponse, setmyApiResponse] = useState(""); const [result, setResult] = useState(""); const [myApimyApiMessage, setmyApimyApiMessage] = useState("") const [testval, settestval] = useState(""); const [fields1desabled, setfields1desabled] = useState(true); 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, }); // recuperation et gestion du token utilisateur const stored_user = getCookie('tokenmysych'); if (!stored_user || stored_user.length <= 0) { history.push("/mysy-user-account"); } const myserver = "127.0.0.1"; //const myserver = "89.156.84.196"; const { register, formState: { errors }, handleSubmit, } = useForm(); useEffect(() => { getCurrentUserData(); desablesecurtypwdfields(); }, []) 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 }); }; } function getCurrentUserData() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/get_user_account/"; formData.append('token', stored_user); //alert( "stored_user = "+stored_user); axios.post(url, formData).then(res => { 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); var mylocaltraining = JSON.parse(res.data.message); if (mylocaltraining) { console.log(" #### mylocaltraining === ", mylocaltraining) if (mylocaltraining.adr_city) { document.getElementsByName("adr_city")[0].value = mylocaltraining.adr_city; document.getElementsByName("adr_city")[0].disabled = true; document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("adr_city")[0].value = ""; document.getElementsByName("adr_city")[0].disabled = true; document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.email) { document.getElementsByName("mail")[0].value = mylocaltraining.email; document.getElementsByName("mail")[0].disabled = true; document.getElementsByName("mail")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("mail")[0].value = ""; document.getElementsByName("mail")[0].disabled = true; document.getElementsByName("mail")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.adr_city) { document.getElementsByName("adr_zip")[0].value = mylocaltraining.adr_zip; document.getElementsByName("adr_zip")[0].disabled = true; document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("adr_zip")[0].value = ""; document.getElementsByName("adr_zip")[0].disabled = true; document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.adr_country) { document.getElementsByName("adr_country")[0].value = mylocaltraining.adr_country; document.getElementsByName("adr_country")[0].disabled = true; document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("adr_country")[0].value = ""; document.getElementsByName("adr_country")[0].disabled = true; document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.link_facebook) { document.getElementsByName("link_facebook")[0].value = mylocaltraining.link_facebook; document.getElementsByName("link_facebook")[0].disabled = true; document.getElementsByName("link_facebook")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("link_facebook")[0].value = ""; document.getElementsByName("link_facebook")[0].disabled = true; document.getElementsByName("link_facebook")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.mob_phone) { document.getElementsByName("mob_phone")[0].value = mylocaltraining.mob_phone; document.getElementsByName("mob_phone")[0].disabled = true; document.getElementsByName("mob_phone")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("mob_phone")[0].value = ""; document.getElementsByName("mob_phone")[0].disabled = true; document.getElementsByName("mob_phone")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.link_linkedin) { document.getElementsByName("link_linkedin")[0].value = mylocaltraining.link_linkedin; document.getElementsByName("link_linkedin")[0].disabled = true; document.getElementsByName("link_linkedin")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("link_linkedin")[0].value = ""; document.getElementsByName("link_linkedin")[0].disabled = true; document.getElementsByName("link_linkedin")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.link_twitter) { document.getElementsByName("link_twitter")[0].value = mylocaltraining.link_twitter; document.getElementsByName("link_twitter")[0].disabled = true; document.getElementsByName("link_twitter")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("link_twitter")[0].value = ""; document.getElementsByName("link_twitter")[0].disabled = true; document.getElementsByName("link_twitter")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.adr_street) { document.getElementsByName("adr_street")[0].value = mylocaltraining.adr_street; document.getElementsByName("adr_street")[0].disabled = true; document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("adr_street")[0].value = ""; document.getElementsByName("adr_street")[0].disabled = true; document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.prenom) { document.getElementsByName("surname")[0].value = mylocaltraining.prenom; document.getElementsByName("surname")[0].disabled = true; document.getElementsByName("surname")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("surname")[0].value = ""; document.getElementsByName("surname")[0].disabled = true; document.getElementsByName("surname")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.nom) { document.getElementsByName("last_name")[0].value = mylocaltraining.nom; document.getElementsByName("last_name")[0].disabled = true; document.getElementsByName("last_name")[0].style.backgroundColor = "#ECEFF1"; } else { document.getElementsByName("last_name")[0].value = ""; document.getElementsByName("last_name")[0].disabled = true; document.getElementsByName("last_name")[0].style.backgroundColor = "#ECEFF1"; } desablefield1(); } } else { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("False"); setmyApimyApiMessage(res.data.message) settestval("false"); } }).catch((error) => { console.warn('Not good man :( mysearchtext = ', error); setmyApiResponse("False"); setmyApimyApiMessage("Impossible de contacter l'hote distant") settestval("false"); }) } function desablefield1() { setupdatepwd("b"); document.getElementsByName("adr_city")[0].disabled = true; document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_city")[0].disabled = true; document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_zip")[0].disabled = true; document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("mail")[0].disabled = true; document.getElementsByName("mail")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_country")[0].disabled = true; document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("mob_phone")[0].disabled = true; document.getElementsByName("mob_phone")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("link_facebook")[0].disabled = true; document.getElementsByName("link_facebook")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("link_linkedin")[0].disabled = true; document.getElementsByName("link_linkedin")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("link_twitter")[0].disabled = true; document.getElementsByName("link_twitter")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_street")[0].disabled = true; document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("surname")[0].disabled = true; document.getElementsByName("surname")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("last_name")[0].disabled = true; document.getElementsByName("last_name")[0].style.backgroundColor = "#ECEFF1"; setfields1desabled(true); } function enablefieds1() { document.getElementsByName("adr_city")[0].disabled = false; document.getElementsByName("adr_city")[0].style.backgroundColor = ""; document.getElementsByName("adr_city")[0].disabled = false; document.getElementsByName("adr_city")[0].style.backgroundColor = ""; document.getElementsByName("adr_zip")[0].disabled = false; document.getElementsByName("adr_zip")[0].style.backgroundColor = ""; document.getElementsByName("adr_country")[0].disabled = false; document.getElementsByName("adr_country")[0].style.backgroundColor = ""; document.getElementsByName("mob_phone")[0].disabled = false; document.getElementsByName("mob_phone")[0].style.backgroundColor = ""; document.getElementsByName("link_facebook")[0].disabled = false; document.getElementsByName("link_facebook")[0].style.backgroundColor = ""; document.getElementsByName("link_linkedin")[0].disabled = false; document.getElementsByName("link_linkedin")[0].style.backgroundColor = ""; document.getElementsByName("link_twitter")[0].disabled = false; document.getElementsByName("link_twitter")[0].style.backgroundColor = ""; document.getElementsByName("adr_street")[0].disabled = false; document.getElementsByName("adr_street")[0].style.backgroundColor = ""; document.getElementsByName("surname")[0].disabled = false; document.getElementsByName("surname")[0].style.backgroundColor = ""; document.getElementsByName("last_name")[0].disabled = false; document.getElementsByName("last_name")[0].style.backgroundColor = ""; setfields1desabled(false); } const [isLoading, setLoading] = useState(); function RecordData() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/Get_Ent_Student_update_user_account/"; var adr_city = document.getElementsByName("adr_city")[0].value; var adr_zip = document.getElementsByName("adr_zip")[0].value; var adr_country = document.getElementsByName("adr_country")[0].value; var mob_phone = document.getElementsByName("mob_phone")[0].value; var link_facebook = document.getElementsByName("link_facebook")[0].value; var link_linkedin = document.getElementsByName("link_linkedin")[0].value; var link_twitter = document.getElementsByName("link_twitter")[0].value; var adr_street = document.getElementsByName("adr_street")[0].value; var prenom = document.getElementsByName("surname")[0].value; var nom = document.getElementsByName("last_name")[0].value; formData.append('token', stored_user); formData.append('adr_city', adr_city); formData.append('adr_zip', adr_zip); formData.append('mob_phone', mob_phone); formData.append('adr_country', adr_country); formData.append('link_facebook', link_facebook); formData.append('link_twitter', link_twitter); formData.append('adr_street', adr_street); formData.append('prenom', prenom); formData.append('nom', nom); formData.append('link_linkedin', link_linkedin); formData.append('apprenant_id', props.apprenant_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")) { settestval("true"); desablefield1(); setdisplay_alert_mysy("1"); setalert_message(result['message']); setalert_type("success"); } else if (String(result['status']) === String("false")) { setmyApiResponse("false"); setdisplay_alert_mysy("1"); setalert_message(result['message']); setalert_type("error"); } else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } }) .catch((error) => { setLoading(false); console.error('Error:', error); setmyApiResponse("false"); setdisplay_alert_mysy("1"); setalert_message("Impossible de mettre à jour les données"); setalert_type("error"); }); }; 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); } function enablesecurtypwdfields() { document.getElementsByName("current_pwd")[0].disabled = false; document.getElementsByName("current_pwd")[0].style.backgroundColor = ""; document.getElementsByName("new_pwd")[0].disabled = false; document.getElementsByName("new_pwd")[0].style.backgroundColor = ""; document.getElementsByName("new_pwd_conf")[0].disabled = false; document.getElementsByName("new_pwd_conf")[0].style.backgroundColor = ""; setpwdfieldsdesabled(false); } function UpdateUserPwd() { setupdatepwd(false); const url = process.env.REACT_APP_API_URL + "myclass/api/Get_Ent_Student_change_user_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("/account"); } 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('apprenant_id', props.apprenant_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")) { setupdatepwd(true); setfields1desabled(true); setdisplay_alert_mysy("1"); setalert_message(result['message']); setalert_type("success"); } else { setdisplay_alert_mysy("1"); setalert_message(result['message']); setalert_type("error"); } }) .catch((error) => { setLoading(false); console.error('Error:', error); setmyApiResponse("false"); setupdatepwd(false); }); } function handleChange(prop) { return (event) => { setValues({ ...values, [prop]: event.target.value }); }; } const handleClickShowPassword = () => { setValues({ ...values, showPassword: !values.showPassword, }); }; 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_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); } }; const handleMouseDownPassword = (event) => { event.preventDefault(); }; 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 (
{isLoading &&
} {/*** Affichage des messages d'alerte*/} {display_alert_mysy && String(display_alert_mysy) === "1" && } {/*** FIN Affichage des messages d'alerte*/}
Données personnelles

 
Nom
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
Prénom
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
Téléphone
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
Email
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
LinkedIn
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
Facebook
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
X (Twitter)
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
Adresse
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
Code Postal
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
Ville
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
Pays
), }} disabled={false} className="disabled_style enable_style" //value={p_detail_telephone} onChange={(e) => { //setp_detail_telephone(e.target.value); //setapprenant_data_changed("1"); } } />
:not(style)': { m: 1 }, width: '100%', }}> {/* ), }} variant="standard" /> ), }} variant="standard" />
), }} variant="standard" /> ), }} variant="standard" />
), }} variant="standard" /> ), }} variant="standard" /> ), }} variant="standard" />
), }} variant="standard" />
), }} variant="standard" /> ), }} variant="standard" />
), }} variant="standard" />
*/}
{fields1desabled == false &&
} {fields1desabled == true && }

 
Securité

  :not(style)': { m: 1 } }}> {currentpawdvisible ? : } } label="Password 1" />
{newpawdvisible ? : } } label="Password 2" />
{confpwdvisible ? : } } label="Password" />
{pwdfieldsdesabled == false &&
} {pwdfieldsdesabled == true && }

); } export default UpdateUserInfo;