|
|
@ -1,8 +1,11 @@
|
|
|
|
import "../style/settings/settings.css"
|
|
|
|
import "../style/settings/settings.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 } from "react"
|
|
|
|
import { User } from "./model/User"
|
|
|
|
import { User } from "./model/User"
|
|
|
|
|
|
|
|
import Button from 'react-bootstrap/Button';
|
|
|
|
|
|
|
|
import Form from 'react-bootstrap/Form';
|
|
|
|
|
|
|
|
|
|
|
|
export default function Settings({user} : {user : User}){
|
|
|
|
export default function Settings({user} : {user : User}){
|
|
|
|
return (
|
|
|
|
return (
|
|
|
@ -18,7 +21,7 @@ function Body({user} : {user : User}) {
|
|
|
|
<div id="body">
|
|
|
|
<div id="body">
|
|
|
|
<div id="content">
|
|
|
|
<div id="content">
|
|
|
|
<MainTitle title="Paramètres" id={null}/>
|
|
|
|
<MainTitle title="Paramètres" id={null}/>
|
|
|
|
<AccountSettings user={user}/>
|
|
|
|
<AccountSettings user={user} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
)
|
|
|
@ -35,22 +38,38 @@ function AccountSettings({user} : {user : User}){
|
|
|
|
|
|
|
|
|
|
|
|
function ContentAccountSettings({user} : {user : User}) {
|
|
|
|
function ContentAccountSettings({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.name);
|
|
|
|
// const [username, setUsername] = useState({user.username});
|
|
|
|
|
|
|
|
|
|
|
|
// Fonction pour mettre à jour l'état lorsqu'il y a un changement dans le champ de saisie
|
|
|
|
// // Fonction pour mettre à jour l'état lorsqu'il y a un changement dans le champ de saisie
|
|
|
|
const handleUsernameChange = (event : ChangeEvent<HTMLInputElement>) => {
|
|
|
|
// const handleUsernameChange = (event : ChangeEvent<HTMLInputElement>) => {
|
|
|
|
setUsername(event.target.value);
|
|
|
|
// setUsername(event.target.value);
|
|
|
|
};
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// return (
|
|
|
|
|
|
|
|
// <form id="account-content">
|
|
|
|
|
|
|
|
// <dl>
|
|
|
|
|
|
|
|
// <dt>Nom d'utilisateur</dt>
|
|
|
|
|
|
|
|
// {/* Utilisez la valeur de l'état et la fonction onChange */}
|
|
|
|
|
|
|
|
// <dd><input type="text" value={username} onChange={handleUsernameChange} /></dd>
|
|
|
|
|
|
|
|
// </dl>
|
|
|
|
|
|
|
|
// </form>
|
|
|
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<form id="account-content">
|
|
|
|
<div id="account-infos">
|
|
|
|
<dl>
|
|
|
|
<Form>
|
|
|
|
<dt>Nom d'utilisateur</dt>
|
|
|
|
<Form.Group className="mb-3" controlId="formUsername">
|
|
|
|
{/* Utilisez la valeur de l'état et la fonction onChange */}
|
|
|
|
<Form.Label className="content">Nom d'utilisateur</Form.Label>
|
|
|
|
<dd><input type="text" value={username} id="username" name="username" onChange={handleUsernameChange} /></dd>
|
|
|
|
<Form.Control size="sm" defaultValue={user.name}/>
|
|
|
|
</dl>
|
|
|
|
</Form.Group>
|
|
|
|
<input type="submit" value="Update"/>
|
|
|
|
<Form.Group className="mb-3" controlId="formEmail">
|
|
|
|
</form>
|
|
|
|
<Form.Label className="content">Adresse mail</Form.Label>
|
|
|
|
|
|
|
|
<Form.Control size="sm" defaultValue={user.email} type="email" placeholder="Password" />
|
|
|
|
|
|
|
|
</Form.Group>
|
|
|
|
|
|
|
|
<Button variant="outline-primary" type="submit">Mettre à jour</Button>
|
|
|
|
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|