From ad94eef63011bb67f8866f40dd40190ff1b30401 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Fri, 12 Jan 2024 15:26:01 +0100
Subject: [PATCH] wip

---
 front/views/Settings.tsx   | 26 ++++++++++++++++++++++----
 front/views/model/User.tsx |  6 ++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/front/views/Settings.tsx b/front/views/Settings.tsx
index c7d7960..2bd53aa 100644
--- a/front/views/Settings.tsx
+++ b/front/views/Settings.tsx
@@ -1,6 +1,8 @@
 import "../style/settings/settings.css"
 import { MainTitle, SecondTitle } from "./component/Title"
 import {Header} from './template/Header'
+import { useState, ChangeEvent } from "react"
+import { User } from "./model/User" 
 
 export default function Settings({username} : {username : string}){
     return (
@@ -31,14 +33,30 @@ function AccountSettings(){
     );
 }
 
-function ContentAccountSettings() {
+function ContentAccountSettings({user} : {user : User}) {
+    // Utilisez useState pour gérer l'état du champ de saisie
+    const [username, setUsername] = useState({user.username});
+
+    // Fonction pour mettre à jour l'état lorsqu'il y a un changement dans le champ de saisie
+    const handleUsernameChange = (event :  ChangeEvent<HTMLInputElement>) => {
+        setUsername(event.target.value);
+    };
+
     return (
-        <div id="account-content">
-            
-        </div>
+        <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>
     );
 }
 
+function setVariable({varia} : {varia : any}){
+
+}
+
 // function InputSettings(){
 //     return(
 //         <div className="input-settings">
diff --git a/front/views/model/User.tsx b/front/views/model/User.tsx
index e69de29..36bbb67 100644
--- a/front/views/model/User.tsx
+++ b/front/views/model/User.tsx
@@ -0,0 +1,6 @@
+export interface User {
+    id: number
+    name: string
+    email: string
+    profilePicture: string
+}