ajout du changement du pseudo, et du modal ainsi que de la logique pour la suppression de compte 🍱

cryptide_project/src/Components/ProfilePDP.tsx

@@ -38,9 +38,9 @@ const ProfilePDP = () => {
                 )}
                 <div className="parent">
                     <div className="file-upload">
-                        <img src={dl} alt="upload" width='25px' height='25px'/>
+                        <img src={dl} alt="upload" width='35px' height='35px'/>
                         {/* <h6>Cliquer ici pour ajouter une image</h6> */}
-                        <p>Taille recommandée : 100px</p>
+                        {/* <p>Taille recommandée : 100px</p> */}
                         <input type="file" accept="image/*" onChange={handleFileChange}/>
                     </div>
                 </div>

cryptide_project/src/Pages/Lobby.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from 'react';
+
+/* Style */
 import './Lobby.css';
 import { useTheme } from '../Style/ThemeContext';
 
@@ -8,35 +10,45 @@ import PersonImg from '../res/img/Person.png';
 import param from '../res/icon/param.png';
 import cible from '../res/icon/cible.png';
 
+import defaultImg from "../res/img/Person.png"
+
 /* Component */
 import ButtonImgNav from '../Components/ButtonImgNav';
+
 import { io } from 'socket.io-client';
 import { Link } from 'react-router-dom';
+
+/* Context */
+import { useGame } from '../Contexts/GameContext';
+import { useAuth } from '../Contexts/AuthContext';
+
+/* Model */
 import PersonNetwork from '../model/PersonsNetwork';
 import Person from '../model/Person';
 import GameCreator from '../model/GameCreator';
-import { useGame } from '../Contexts/GameContext';
-import JSONParser from '../JSONParser';
 import Indice from '../model/Indices/Indice';
-import { useNavigate } from 'react-router-dom';
+import JSONParser from '../JSONParser';
-import { socket } from "../SocketConfig";
-import { random } from 'lodash';
 import Player from '../model/Player';
 import EasyBot from '../model/EasyBot';
 import Bot from '../model/Bot';
 import User from '../model/User';
-import { useAuth } from '../Contexts/AuthContext';
-import SessionService from '../services/SessionService';
-import defaultImg from "../res/img/Person.png"
 import {loadImageAsync} from "../ImageHelper"
 
+/* nav */
+import { useNavigate } from 'react-router-dom';
+
+/* serv */
+import { socket } from "../SocketConfig";
+import SessionService from '../services/SessionService';
+import { random } from 'lodash';
+
 
 let gameStarted = false
 
 function Lobby() {
     const theme=useTheme();
     const navigate = useNavigate();
-
+    
 
     const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame();
     

cryptide_project/src/Pages/Profile.css

@@ -1,5 +1,6 @@
 .mainContainer{
     display: flex;
+    /* flex-direction: column; */
     justify-content: center;
     align-items: center;
     margin: 50px;
@@ -20,6 +21,8 @@
     min-height: 250px;
 }
 
+/*Lpart*/
+
 .imgContainer{
     border: 5px solid black;
     border-radius: 50px;
@@ -28,6 +31,60 @@
 
 
 
+/*Rpart*/
+
+.Rpart{
+    
+    min-width: 40%;
+    min-height: 250px;
+    margin: 20px;    
+    padding: 20px;
+    
+    background-color: white;
+
+    border: solid 1px whitesmoke;
+    border-radius: 15px;
+}
+
+
+.username-display{
+    display: flex;
+}
+
+.editbutton{
+    border-color: white;
+    background-color: white;
+    border: none;
+
+    margin-left: 15px;
+    height: 25px;
+    width: 25px;
+}
+.inputpseudo{
+    display: 'flex';
+    justify-content: 'flex-start';
+    align-items: 'center';
+    flex-direction: 'row';
+
+    width: 20vw;
+    padding: 5;
+
+    border:none;
+    border-bottom: solid 2px gray;
+    border-radius: 5;
+
+    font-size: 40px;
+}
+
+.bottom{
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: end;
+    
+    height: 100px;
+}
+
 /*File upload*/
 .parent {
     /* width: 250px; */
@@ -43,8 +100,9 @@
     /* padding: 1.5rem; */
     position: relative;
     cursor: pointer;
-    max-width: 100px;
+    width: 100px;
-    max-height: 50px;
+    height: 50px;
+
 }
 .file-upload p {
     font-size: 0.5rem;

cryptide_project/src/Pages/Profile.tsx

@@ -1,30 +1,159 @@
 import React, { useEffect, useState } from 'react';
 import ProfilePDP from '../Components/ProfilePDP';
 
-import './Profile.css'
-
-
 import SessionService from '../services/SessionService';
 import { PlayerProps } from '../types/Player';
 import { update } from 'lodash';
-import User from '../model/User';
 import { socket } from '../SocketConfig';
+
+/* Style */
+import './Profile.css'
+import Edit from "../res/icon/edit-pen.png"
+import Coche from '../res/icon/coche.png'
+import Cancel from '../res/icon/cancel.png'
+
+/* Model */
+import User from '../model/User';
+
+/* Context */
 import { useAuth } from '../Contexts/AuthContext';
 
+/* Boostrap */
+import Button from 'react-bootstrap/Button';
+import Alert from 'react-bootstrap/Alert';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
 
 //@ts-ignore
 const Profile = () => {
   
+  
   //let player;
   const {user} = useAuth()
+  
+  const [editingUsername, setEditingUsername] = useState(false);
+  const [newUsername, setNewUsername] = useState(user?.pseudo);
+
+  //@ts-ignore
+  const onUsernameChange = (newUsername) => {
+    console.log("nouveau pseudo : " + newUsername)
+    if(user?.pseudo != null){
+      user.pseudo = newUsername;
+    }
+  }
 
-  //! useeffect pour l'instant, il faudra voir pour changer la facons de prendre une session
+  const handleUsernameChange = () => {
+    // Maj du pseudo
+    onUsernameChange(newUsername);
 
+    // Désactiver le mode d'édition
+    setEditingUsername(false);
+  };
+
+
+  //* Gestion Modal de suppression :
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const handleShowDeleteModal = () => {
+    setShowDeleteModal(true);
+  };
+
+  const handleCloseDeleteModal = () => {
+    setShowDeleteModal(false);
+  };
+
+  // Confirmation avec la phrase :
+  const [confirmationPhrase, setConfirmationPhrase] = useState('');
+
+  //@ts-ignore
+  const handleConfirmationPhraseChange = (e) => {
+    setConfirmationPhrase(e.target.value);
+  };
+  
+  const handleDeleteAccount = () => {
+    // Verification de la phrase
+    if (confirmationPhrase.toLowerCase() === 'supprimer mon compte') {
+      console.log('Compte supprimé !');
+      handleCloseDeleteModal();
+    } else {
+      console.error('Phrase de confirmation incorrecte.');
+    }
+  };
+
+  
   return (
+    <>
+    <center><h1>Mon Compte</h1></center>
     <div className='mainContainer'>
-      <ProfilePDP/>
+      <div>
-      <h1> {user?.pseudo} </h1>
+          <ProfilePDP/>
+      </div>
+      <div className='Rpart'>
+        {editingUsername ? (
+            <div className='username-edit'>
+              <input 
+                type='text'
+                className='inputpseudo'
+                value={newUsername}
+                onChange={(e) => setNewUsername(e.target.value)}
+              />
+              <button className='editbutton' onClick={handleUsernameChange}>
+                <img src={Coche} alt='edit' width='25' height='25'/>
+              </button>
+              <button className='editbutton' onClick={() => setEditingUsername(false)}>
+                <img src={Cancel} alt='edit' width='25' height='25'/>
+              </button>
+            </div>
+          ) : (
+            <div className='username-display'>
+              <h1>{user?.pseudo}</h1>
+              <button className='editbutton' onClick={() => setEditingUsername(true)}>
+                <img src={Edit} alt='edit' width='25' height='25'/>
+              </button>
+            </div>
+          )
+        }
+        <hr/>
+        {!editingUsername ? (
+        <Button variant="secondary">Modifier le mot de passe</Button>
+        ) : (
+          <Alert key='info' variant='info' style={{width:'100%'}}>
+            Vous êtes en mode "édition".
+          </Alert>
+        )}
+        <div className='bottom'>
+          <>
+            <Button variant="danger" onClick={handleShowDeleteModal}>Supprimer</Button>
+
+            <Modal show={showDeleteModal} onHide={handleCloseDeleteModal}>
+              <Modal.Header closeButton>
+                <Modal.Title>Confirmation de suppression</Modal.Title>
+              </Modal.Header>
+              <Modal.Body>
+                <p>
+                Pour confirmer la suppression de votre compte, veuillez
+                  entrer la phrase : "supprimer mon compte".
+                </p>
+                <Form.Control
+                  type='text'
+                  placeholder='Entrez la phrase de confirmation'
+                  value={confirmationPhrase}
+                  onChange={handleConfirmationPhraseChange}
+                />
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant='secondary' onClick={handleCloseDeleteModal}>
+                  Annuler
+                </Button>
+                <Button variant='danger' onClick={handleDeleteAccount}>Supprimer mon compte</Button>
+              </Modal.Footer>
+            </Modal>
+          </>
+        </div>
+
+      </div>
     </div>
+    </>
   );
 };