From 2b44ae2b8129f39741d4a6bfaecbf39889c60ac0 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Mon, 27 Nov 2023 14:56:12 +0100 Subject: [PATCH] ajout du changement du pseudo, et du modal ainsi que de la logique pour la suppression de compte :bento: --- .../src/Components/ProfilePDP.tsx | 4 +- cryptide_project/src/Pages/Lobby.tsx | 30 ++-- cryptide_project/src/Pages/Profile.css | 62 +++++++- cryptide_project/src/Pages/Profile.tsx | 143 +++++++++++++++++- cryptide_project/src/res/icon/cancel.png | Bin 0 -> 1010 bytes cryptide_project/src/res/icon/coche.png | Bin 0 -> 302 bytes cryptide_project/src/res/icon/edit-pen.png | Bin 0 -> 613 bytes cryptide_project/src/server/db/socialgraph.db | Bin 28672 -> 28672 bytes 8 files changed, 219 insertions(+), 20 deletions(-) create mode 100644 cryptide_project/src/res/icon/cancel.png create mode 100644 cryptide_project/src/res/icon/coche.png create mode 100644 cryptide_project/src/res/icon/edit-pen.png diff --git a/cryptide_project/src/Components/ProfilePDP.tsx b/cryptide_project/src/Components/ProfilePDP.tsx index 7395740..aa1f004 100644 --- a/cryptide_project/src/Components/ProfilePDP.tsx +++ b/cryptide_project/src/Components/ProfilePDP.tsx @@ -38,9 +38,9 @@ const ProfilePDP = () => { )}
- upload + upload {/*
Cliquer ici pour ajouter une image
*/} -

Taille recommandée : 100px

+ {/*

Taille recommandée : 100px

*/}
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx index 5219059..176879c 100644 --- a/cryptide_project/src/Pages/Lobby.tsx +++ b/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 { socket } from "../SocketConfig"; -import { random } from 'lodash'; +import JSONParser from '../JSONParser'; 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(); diff --git a/cryptide_project/src/Pages/Profile.css b/cryptide_project/src/Pages/Profile.css index a83adb7..3090ae4 100644 --- a/cryptide_project/src/Pages/Profile.css +++ b/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; - max-height: 50px; + width: 100px; + height: 50px; + } .file-upload p { font-size: 0.5rem; diff --git a/cryptide_project/src/Pages/Profile.tsx b/cryptide_project/src/Pages/Profile.tsx index 463e1fd..ccb8af3 100644 --- a/cryptide_project/src/Pages/Profile.tsx +++ b/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 ( + <> +

Mon Compte

- -

{user?.pseudo}

+
+ +
+
+ {editingUsername ? ( +
+ setNewUsername(e.target.value)} + /> + + +
+ ) : ( +
+

{user?.pseudo}

+ +
+ ) + } +
+ {!editingUsername ? ( + + ) : ( + + Vous êtes en mode "édition". + + )} +
+ <> + + + + + Confirmation de suppression + + +

+ Pour confirmer la suppression de votre compte, veuillez + entrer la phrase : "supprimer mon compte". +

+ + + + + + + + +
+ +
+ ); }; diff --git a/cryptide_project/src/res/icon/cancel.png b/cryptide_project/src/res/icon/cancel.png new file mode 100644 index 0000000000000000000000000000000000000000..1181afb6c83872e24b4a60189174a000fb41e036 GIT binary patch literal 1010 zcmVn$g5$1jS^jc?v-{32F?^Mi4^4 zOBB(dE=BN$63si9H&7GzAs5gG@U~EQ#z`<^7UnJmB@D&sPNw^GPmBFS!_d?H*ZHT; zRMn|-AV-cIIdc5JXamjx&w&Zx1F!(B0L%JW?!D1xO8U+}g}uNPU<%j(Hfy}(ompTA zD3Dk1DAXl<7-+1w*dxG9$UxV1YTpM=14n@tV22LA zMep?i4}fW4ErjnK&{Z$7CqleB2iyhPBk&f1Tfo-njXF3rbFPEimZp|LC1Kc7Vv_0$5ei)-<9epdd%3Z z_zIdMj?`04-0u)A#lv}$MM3j@wcRH^QbNU$N}jc-m!~f}N>CYdWL!0bWuQ6W*?M?d zg6S7y^Ku-*X+tLEVi@Y-={v@r)b^2=dmCmUu$`cgw&;VV@{=*QMjUpP363?R%`6_)v`L;d(M4a2 z2iGqrI|5`(^gZ*=WSl_^8M1Gl^0BWx-Kzz%h^Mcc=cL)V$9EI2 z4D2IWY{%0@M{y*}#MtQ2=2+TWD`B2)&|F*n-9nsTWif2X)0o;}qHRxFu4_IGH|l0| zwSg7g_Na&GO-E#wO?I#7a%_MvWk9q{<-Gp?@;-p#g?0kS{Qxp3aJt2o$q$0bmP4Ze%)N-*L@}Et7 z8V8|MH=~21=epM854D)+)@k3Qk-wn#`m|`64LCni9gPo>k%MWKEmB9EYe6^myr&)? zM-OdP7Ux=2&r2INvuM%7r86-Omrm-cC-y=hZM5pfmb6^Pf%h7Wmi3y~d*k{{f7ZR3 gBS(%LIY&|^xm-z0O}pY!BXY-ZW)nO9?}E~w%;NyYR3R?7!0I~ePj;~SJ8 zL|(VPrmo+(|3L21Z|o88tJr@l*b4o4xb5oKzGnhIuiYq|*efe>^F||#dT&0x&T(OP z>9;S3PEnctH~!TTeP zCjGPgapHz_ib^QU4Y^P0d!!UUWgAVJ$8j+&NBMFc5dTY&p7|{qf**!)E!O$lR(m$W z+f-lYl~0*jP&3d0er#Q8H)7P2Q`9T(sNC1MS>srB{^hQXkF6|^O%hlBdX}dm^czzJ_Z-IO2UH7U*Llo~ z`j=XNwEVrVv*WVH`EKjX7;AD0ewEFAl67ACUvT{Aw~KB$9`0Awd0w{s?*e(T+Wa3X zW>*i@_3aIn-_iN;-16B;HJ<}FNtiSLb3eTI(`wz`jNcP?9OW#MkI=b(b5-W5o>-r6 n;SWS2G{cpFQ8!8D*bUkBJ{#U#auk{XOg9Xku6{1-oD!MAUf<@s%*}Tk-GXui^W_SF%~aAc@b(k)@H9krK!7Y~E%k zC&R!!xnyS1_pKx UHUOZfR%`M4SQ7w|js-QvsPO@RN5lx7<%g4p#ns z4E!hf-*4tqSiwIrfNSzTeK(-$Z4CTY{QLN8_Qb+`J4746OW@8Th~RzvF+(e~16_W