|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import { Component } from '@fullcalendar/core';
|
|
|
|
|
import userEvent from '@testing-library/user-event';
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
|
import NavigationDashboard from '../components/NavigationDashboard';
|
|
|
|
|
import img1 from '../img/logo_personEntouré.svg';
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
@ -12,7 +12,20 @@ const api = axios.create({
|
|
|
|
|
|
|
|
|
|
function Compte() {
|
|
|
|
|
const [theme, setTheme] = useState("light");
|
|
|
|
|
const nomInputRef = useRef();
|
|
|
|
|
const prenomInputRef = useRef();
|
|
|
|
|
const [modification, setModification] = useState(false);
|
|
|
|
|
const convert2base64 = e => {
|
|
|
|
|
const file = e.target.files[0];
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
|
|
|
|
|
reader.onloadend = () => {
|
|
|
|
|
setImage(reader.result);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
|
|
|
|
|
setTheme(localStorage.getItem("theme"))
|
|
|
|
|
}
|
|
|
|
|
@ -32,17 +45,54 @@ function Compte() {
|
|
|
|
|
const [firstName, setFirstName] = useState("");
|
|
|
|
|
const [phone, setPhone] = useState("");
|
|
|
|
|
const [mail, setMail] = useState("");
|
|
|
|
|
const [image, setImage] = useState("");
|
|
|
|
|
|
|
|
|
|
useEffect(() =>{
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const apiString = '/User/Id/' + Session.get("idUser");
|
|
|
|
|
api.get(apiString).then((response) => {
|
|
|
|
|
setLastName(response.data[0].lastname);
|
|
|
|
|
setFirstName(response.data[0].firstname);
|
|
|
|
|
setPhone(response.data[0].phone);
|
|
|
|
|
setMail(response.data[0].mail);
|
|
|
|
|
setImage(response.data[0].image);
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const handleImageAdding = (e) => {
|
|
|
|
|
const bdd = { image };
|
|
|
|
|
|
|
|
|
|
fetch('http://localhost:8080', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
|
body: JSON.stringify(bdd)
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
console.log('Image ajoutée');
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleChangeLastName(event) {
|
|
|
|
|
//setLastName(event.target.value);
|
|
|
|
|
const enteredLastName = nomInputRef.current.value;
|
|
|
|
|
|
|
|
|
|
//mettre à jour le state
|
|
|
|
|
setLastName({
|
|
|
|
|
...lastName,
|
|
|
|
|
"nom": enteredLastName,
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function handleChangeFirstName(event) {
|
|
|
|
|
//setFirstName(event.target.value);
|
|
|
|
|
const enteredFirstName = prenomInputRef.current.value;
|
|
|
|
|
|
|
|
|
|
//mettre à jour le state
|
|
|
|
|
setFirstName({
|
|
|
|
|
...firstName,
|
|
|
|
|
"prenom": enteredFirstName,
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<body className={theme}>
|
|
|
|
|
|
|
|
|
|
@ -62,22 +112,16 @@ function Compte() {
|
|
|
|
|
<div className="name_picture">
|
|
|
|
|
<div className="picture">
|
|
|
|
|
<div id="display_image">
|
|
|
|
|
<img src={img1} srcSet={file} id="img" className="img"></img>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='bouton_submit'>
|
|
|
|
|
<input type="file" name="fileUpload" id="input" accept="image/" onChange={handleChange} />
|
|
|
|
|
<div className="label">
|
|
|
|
|
<label className="fileUpload" htmlFor="input">
|
|
|
|
|
Ajoutez votre photo
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<img src={img1} srcSet={image} id="img" className="img" />
|
|
|
|
|
<div> <input id="fileUpload" type="file" onChange={e => { convert2base64(e); handleChange(e); handleImageAdding() }}></input></div>
|
|
|
|
|
</div>
|
|
|
|
|
<label className="fileUpload" htmlFor="fileUpload">Ajoutez votre photo</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="name">
|
|
|
|
|
<div className="presentationNom">
|
|
|
|
|
<p id="texte" className="def">Nom Complet :</p>
|
|
|
|
|
<p>{}</p>
|
|
|
|
|
<input id="texte" value={firstName +" "+ lastName} name="texte" className="texte" type="text" disabled/>
|
|
|
|
|
{!modification && <p>{firstName + " " + lastName}</p>}
|
|
|
|
|
{modification && (<input type="text" value={firstName + " " + lastName} onChange={e => {handleChangeLastName(e); handleChangeFirstName(e)}} ref={nomInputRef + prenomInputRef}></input>)}
|
|
|
|
|
</div>
|
|
|
|
|
<div className='bouton_submit'>
|
|
|
|
|
<button id="bouton" className="bouton_modifierNom" type="submit" onClick={modificationHandler}>{!modification ? "Modifier" : "Envoyer"}</button>
|
|
|
|
|
@ -88,7 +132,7 @@ function Compte() {
|
|
|
|
|
<p className="description">Informations personnel</p>
|
|
|
|
|
<div className="parti_mail">
|
|
|
|
|
<p className="def">Mail :</p>
|
|
|
|
|
<input id="mail" value={mail} name="mail" className="mail" type="text" disabled/>
|
|
|
|
|
<input id="mail" value={mail} name="mail" className="mail" type="text" disabled />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="parti_pays">
|
|
|
|
|
<p className="def">Pays ou Région :</p>
|
|
|
|
|
@ -96,7 +140,7 @@ function Compte() {
|
|
|
|
|
</div>
|
|
|
|
|
<div className="parti_tel">
|
|
|
|
|
<p className="def">Tel :</p>
|
|
|
|
|
<input id="tel" value={phone} name="tel" className="tel" type="text" disabled/>
|
|
|
|
|
<input id="tel" value={phone} name="tel" className="tel" type="text" disabled />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="infoEntreprise">
|
|
|
|
|
@ -117,7 +161,7 @@ function Compte() {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</body >
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
