|
|
@ -2,10 +2,14 @@ import "../style/settings/settings.css"
|
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
import { MainTitle, SecondTitle } from "./component/Title"
|
|
|
|
import { MainTitle, SecondTitle } from "./component/Title"
|
|
|
|
import {Header} from './template/Header'
|
|
|
|
import {Header} from './template/Header'
|
|
|
|
import { useState, ChangeEvent } from "react"
|
|
|
|
import { useState, ChangeEvent, useRef } from "react"
|
|
|
|
import { User } from "./model/User"
|
|
|
|
import { User } from "./model/User"
|
|
|
|
import Button from 'react-bootstrap/Button';
|
|
|
|
import Button from 'react-bootstrap/Button';
|
|
|
|
import Form from 'react-bootstrap/Form';
|
|
|
|
import Form from 'react-bootstrap/Form';
|
|
|
|
|
|
|
|
import Image from 'react-bootstrap/Image';
|
|
|
|
|
|
|
|
import { updateSourceFile } from "typescript";
|
|
|
|
|
|
|
|
import { fetchAPI } from "../Fetcher";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function Settings({user} : {user : User}){
|
|
|
|
export default function Settings({user} : {user : User}){
|
|
|
|
return (
|
|
|
|
return (
|
|
|
@ -31,12 +35,12 @@ function AccountSettings({user} : {user : User}){
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div id="account">
|
|
|
|
<div id="account">
|
|
|
|
<SecondTitle title="Compte personnel" id={null}/>
|
|
|
|
<SecondTitle title="Compte personnel" id={null}/>
|
|
|
|
<ContentAccountSettings user={user}/>
|
|
|
|
<ProfilSettings user={user} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function ContentAccountSettings({user} : {user : User}) {
|
|
|
|
function ProfilSettings({user} : {user : User}) {
|
|
|
|
// Utilisez useState pour gérer l'état du champ de saisie
|
|
|
|
// Utilisez useState pour gérer l'état du champ de saisie
|
|
|
|
// const [username, setUsername] = useState({user.username});
|
|
|
|
// const [username, setUsername] = useState({user.username});
|
|
|
|
|
|
|
|
|
|
|
@ -55,28 +59,42 @@ function ContentAccountSettings({user} : {user : User}) {
|
|
|
|
// </form>
|
|
|
|
// </form>
|
|
|
|
// );
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const nameRef = useRef<HTMLInputElement>(null);
|
|
|
|
|
|
|
|
const emailRef = useRef<HTMLInputElement>(null);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const size = "171x180";
|
|
|
|
|
|
|
|
const profilePicture = user.profilePicture + "/" + size;
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div id="account-infos">
|
|
|
|
<div id="account">
|
|
|
|
<Form>
|
|
|
|
<div id="profil-picture">
|
|
|
|
<Form.Group className="mb-3" controlId="formUsername">
|
|
|
|
<Image src={profilePicture}roundedCircle />
|
|
|
|
<Form.Label className="content">Nom d'utilisateur</Form.Label>
|
|
|
|
<Button variant="outline-primary">Changer photo de profil</Button>
|
|
|
|
<Form.Control size="sm" defaultValue={user.name}/>
|
|
|
|
</div>
|
|
|
|
</Form.Group>
|
|
|
|
<div id="account-infos">
|
|
|
|
<Form.Group className="mb-3" controlId="formEmail">
|
|
|
|
<Form>
|
|
|
|
<Form.Label className="content">Adresse mail</Form.Label>
|
|
|
|
<Form.Group className="mb-3" controlId="formUsername">
|
|
|
|
<Form.Control size="sm" defaultValue={user.email} type="email" placeholder="Password" />
|
|
|
|
<Form.Label className="content">Nom d'utilisateur</Form.Label>
|
|
|
|
</Form.Group>
|
|
|
|
<Form.Control ref={nameRef} size="sm" defaultValue={user.name}/>
|
|
|
|
<Button variant="outline-primary" type="submit">Mettre à jour</Button>
|
|
|
|
</Form.Group>
|
|
|
|
</Form>
|
|
|
|
<Form.Group className="mb-3" controlId="formEmail">
|
|
|
|
|
|
|
|
<Form.Label className="content">Adresse mail</Form.Label>
|
|
|
|
|
|
|
|
<Form.Control ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" />
|
|
|
|
|
|
|
|
</Form.Group>
|
|
|
|
|
|
|
|
<Button variant="outline-primary" type="button" onClick={() => updateAccountInfos(nameRef.current!.value, emailRef.current!.value)}>Mettre à jour</Button>
|
|
|
|
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function setVariable({varia} : {varia : any}){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function updateAccountInfos(name : string, email : string) {
|
|
|
|
|
|
|
|
fetchAPI("account/update/profile", {
|
|
|
|
|
|
|
|
name : name,
|
|
|
|
|
|
|
|
email : email
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// function InputSettings(){
|
|
|
|
// function InputSettings(){
|
|
|
|
// return(
|
|
|
|
// return(
|
|
|
|
// <div className="input-settings">
|
|
|
|
// <div className="input-settings">
|
|
|
|