@ -7,6 +7,9 @@ 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 Image from 'react-bootstrap/Image' ;
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row' ;
import Col from 'react-bootstrap/Col' ;
import { updateSourceFile } from "typescript" ;
import { updateSourceFile } from "typescript" ;
import { fetchAPI } from "../Fetcher" ;
import { fetchAPI } from "../Fetcher" ;
import { fetchPOST } from "../Fetcher" ;
import { fetchPOST } from "../Fetcher" ;
@ -63,16 +66,16 @@ function ProfilSettings({user} : {user : User}) {
const nameRef = useRef < HTMLInputElement > ( null ) ;
const nameRef = useRef < HTMLInputElement > ( null ) ;
const emailRef = useRef < HTMLInputElement > ( null ) ;
const emailRef = useRef < HTMLInputElement > ( null ) ;
const size = "171x180" ;
const size = "171x180" ;
const profilePicture = user . profilePicture + "/" + size ;
const profilePicture = user . profilePicture + "/" + size ;
return (
return (
< div id = "account" >
< Container >
< div id = "profil-picture" >
< Row >
< Col >
< Image src = { profilePicture } roundedCircle / >
< Image src = { profilePicture } roundedCircle / >
< Button variant = "outline-primary" > Changer photo de profil < / Button >
< Button variant = "outline-primary" onClick = { ( ) = > alert ( "En cours de développement..." ) } > Changer photo de profil < / Button >
< / div >
< / Col >
< div id = "account-infos" >
< Col >
< Form >
< Form >
< Form.Group className = "mb-3" controlId = "formUsername" >
< Form.Group className = "mb-3" controlId = "formUsername" >
< Form.Label className = "content" > Nom d ' utilisateur < / Form.Label >
< Form.Label className = "content" > Nom d ' utilisateur < / Form.Label >
@ -80,12 +83,33 @@ function ProfilSettings({user} : {user : User}) {
< / Form.Group >
< / Form.Group >
< Form.Group className = "mb-3" controlId = "formEmail" >
< Form.Group className = "mb-3" controlId = "formEmail" >
< Form.Label className = "content" > Adresse mail < / Form.Label >
< Form.Label className = "content" > Adresse mail < / Form.Label >
< Form.Control ref = { emailRef } id = "control" size = "sm" defaultValue = { user . email } type = "email" placeholder = "Password" / >
< Form.Control readOnly onClick = { ( ) = > alert ( "En cours de développement..." ) } ref = { emailRef } id = "control" size = "sm" defaultValue = { user . email } type = "email" placeholder = "Password" / >
< / Form.Group >
< / Form.Group >
< Button variant = "outline-primary" type = "button" onClick = { ( ) = > updateAccountInfos ( nameRef . current ! . value , emailRef . current ! . value , user ) } > Mettre à jour < / Button >
< Button variant = "outline-primary" type = "button" onClick = { ( ) = > updateAccountInfos ( nameRef . current ! . value , emailRef . current ! . value , user ) } > Mettre à jour < / Button >
< / Form >
< / Form >
< / div >
< / Col >
< / div >
< / Row >
< / Container >
// <div id="account">
// <div id="profil-picture">
// <Image src={profilePicture}roundedCircle />
// <Button variant="outline-primary">Changer photo de profil</Button>
// </div>
// <div id="account-infos">
// <Form>
// <Form.Group className="mb-3" controlId="formUsername">
// <Form.Label className="content">Nom d'utilisateur</Form.Label>
// <Form.Control ref={nameRef} size="sm" defaultValue={user.name}/>
// </Form.Group>
// <Form.Group className="mb-3" controlId="formEmail">
// <Form.Label className="content">Adresse mail</Form.Label>
// <Form.Control readOnly onClick={() => alert("En cours de développement...")} 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, user)}>Mettre à jour</Button>
// </Form>
// </div>
// </div>
) ;
) ;
}
}