Elyos_FI_Front_Office/src/components/UpdateUserInfo.js

1213 lines
40 KiB
JavaScript

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 (
<div className='updateuserinfo'>
{isLoading && <div className="loader-container">
<div className="mysy_spinner"> <img src={img_loading_spin} /> </div>
</div>}
{/*** Affichage des messages d'alerte*/}
{display_alert_mysy && String(display_alert_mysy) === "1" &&
<Module_Alert_Confirmation alert_message={alert_message}
alert_type={alert_type}
clear_alert_message={clear_alert_message}
clear_alert_type={clear_alert_type}
clear_display_alert_mysy={clear_display_alert_mysy}
/>
}
{/*** FIN Affichage des messages d'alerte*/}
<div className="titre1"> Données personnelles </div>
<hr className="my_hr" />
&nbsp;
<div style={{ width: '100%', float: 'left', }}>
<div style={{
display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', width: '95%', paddingLeft: '10px',
flexWrap: 'wrap', paddingLeft: '10px', border: 'none',
}}>
<div className="session_caract"> <b> Nom </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="last_name"
id="last_name"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> Prénom </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="surname"
id="surname"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> Téléphone </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="mob_phone"
id="mob_phone"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> Email </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="mail"
id="mail"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> LinkedIn </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="link_linkedin"
id="link_linkedin"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<LinkedInIcon />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> Facebook </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="link_facebook"
id="link_facebook"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<FacebookIcon />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> X (Twitter) </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="link_twitter"
id="link_twitter"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<FacebookIcon />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> Adresse </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="adr_street"
id="adr_street"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<FacebookIcon />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> Code Postal </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="adr_zip"
id="adr_zip"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<FacebookIcon />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> Ville </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="adr_city"
id="adr_city"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<FacebookIcon />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
<div className="session_caract"> <b> Pays </b> <br />
<TextField
sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
required
name="adr_country"
id="adr_country"
InputLabelProps={{
shrink: true,
startAdornment: (
<InputAdornment position="start">
<FacebookIcon />
</InputAdornment>
),
}}
disabled={false}
className="disabled_style enable_style"
//value={p_detail_telephone}
onChange={(e) => {
//setp_detail_telephone(e.target.value);
//setapprenant_data_changed("1");
}
}
/>
</div>
</div>
</div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
{/* <TextField
required
label="Nom"
name="last_name"
className="texte_area"
sx={{ m: 1, width: '48%', fontFamily: 'DM Sans' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="surname"
label="Prénom"
className="texte_area"
sx={{ m: 1, width: '48%', fontFamily: 'DM Sans' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="mob_phone"
label="Téléphone"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PhoneIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="mail"
className="texte_area"
label="Adresse mail"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<EmailIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="link_linkedin"
label="LinkedIn"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LinkedInIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="link_facebook"
label="Facebook"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<FacebookIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="link_twitter"
label="Twitter"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<TwitterIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="adr_street"
label="Adresse"
className="texte_area_adress"
sx={{ m: 1, width: '90%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
className="texte_area"
name="adr_zip"
label="Code Postal"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
className="texte_area"
name="adr_city"
label="Ville"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
className="texte_area"
name="adr_country"
label="Pays"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />*/}
<div className="div_row22">
{fields1desabled == false && <div className="div_row">
<div className="div_row_gauche">
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData}>Enregistrer</Button>
</div>
<div className="div_row_droite">
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={desablefield1}>Annuler</Button>
</div>
</div>
}
{fields1desabled == true &&
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={enablefieds1}>Modifier</Button>
}
</div>
</Box>
<hr className="my_hr" />
<div style={{ "width": "10%" }}> &nbsp;</div>
<div className="titre1"> Securité </div>
<hr className="my_hr" />
&nbsp;
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 } }}>
<FormControl sx={{ m: 1, width: '90%' }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password"></InputLabel>
<OutlinedInput
id="current_pwd"
name="current_pwd"
type={values.showPassword1 ? 'text' : 'password'}
value={values.password1}
onChange={handleChange1('password1')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_current_pwd}
edge="end"
>
{currentpawdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Password 1"
/>
</FormControl>
<br />
<FormControl sx={{ m: 1, width: '90%' }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password2"></InputLabel>
<OutlinedInput
id="new_pwd"
name="new_pwd"
type={values.showPassword ? 'text' : 'password'}
value={values.password2}
onChange={handleChange2('password2')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_new_pwd}
edge="end"
>
{newpawdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Password 2"
/>
</FormControl>
<br />
<FormControl sx={{ m: 1, width: '90%' }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password"></InputLabel>
<OutlinedInput
id="new_pwd_conf"
name="new_pwd_conf"
type={values.showPassword ? 'text' : 'password'}
value={values.password3}
onChange={handleChange3('password3')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_new_pwd_conf}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{confpwdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Password"
/>
</FormControl>
<div className="div_row22">
{pwdfieldsdesabled == false && <div className="div_row">
<div className="div_row_gauche">
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={UpdateUserPwd}>Enregistrer</Button>
</div>
<div className="div_row_droite">
<Button variant="contained" color="success" className="div_row22 btn_modif " onClick={desablesecurtypwdfields}>Annuler</Button>
</div>
</div>
}
{pwdfieldsdesabled == true &&
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={enablesecurtypwdfields}>Modifier</Button>
}
</div>
</Box>
<br />
</div>
);
}
export default UpdateUserInfo;