polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

modal to change personnal info

This commit is contained in:
Guillaume Dorce 2022-10-28 12:37:10 +02:00
parent 37d4ee82be
commit d08c0a38fb
1 changed files with 86 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
client/src/components/User.tsx
View File

@ -20,9 +20,8 @@ const User = ({ author }: any) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
function handleContextMenu(e: any) { function handleContextMenu(e: any) {
if (messageId !== '0' && e.target.closest('.message')?.id.slice(9) !== messageId) {
if (messageId!== '0' && e.target.closest('.message')?.id.slice(9) !== messageId) { setPopupPos({ posX: 0, posY: 0 });
setPopupPos({ posX: 0, posY: 0});
setMessageId('0'); setMessageId('0');
document.removeEventListener('contextmenu', handleContextMenu); document.removeEventListener('contextmenu', handleContextMenu);
} }
@ -56,6 +55,12 @@ const User = ({ author }: any) => {
queryClient.invalidateQueries(['messages']); queryClient.invalidateQueries(['messages']);
} }
const handleChange = (e: any) => {
e.preventDefault();
toastSuccess('Infos personelles changées');
setShow(!show);
};
return ( return (
<div className="user"> <div className="user">
<button <button
@ -90,20 +95,83 @@ const User = ({ author }: any) => {
)} )}
<Modal show={show}> <Modal show={show}>
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<div className="flex flex-col gap-2"> {me.data?.id !== author.id ? (
<div className="text-2xl text-white">Info utilisateur</div> <div className="flex flex-col gap-2">
<div className="text-white">Nom: {author.lastName}</div> <div className="text-2xl text-white">Info utilisateur</div>
<div className="text-white">Prenom: {author.firstName}</div> <div className="text-white">Nom: {author.lastName}</div>
<div className="text-white"> <div className="text-white">Prenom: {author.firstName}</div>
Adresse mail: <a href={'mailto:' + author.email}>{author.email}</a> <div className="text-white">
Adresse mail: <a href={'mailto:' + author.email}>{author.email}</a>
</div>
<button
className="rounded-md border border-red bg-red py-2 px-4 text-sm max-w-[100px] font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
onClick={() => setShow(false)}
>
Fermer
</button>
</div> </div>
</div> ) : (
<button <>
className="rounded-md border border-red bg-red py-2 px-4 text-sm max-w-[100px] font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2" <div className="text-2xl text-white">Modifier ses infos personnelles</div>
onClick={() => setShow(false)} <form className="flex flex-col gap-2" onSubmit={handleChange}>
> <label htmlFor="firstName" className="text-white">
Fermer Prenom
</button> </label>
<input
type="text"
name="firstName"
id="firstName"
className="rounded-lg p-2"
defaultValue={author.firstName}
/>
<label htmlFor="lastName" className="text-white">
Nom
</label>
<input
type="text"
name="lastName"
id="lastName"
className="rounded-lg p-2"
defaultValue={author.lastName}
/>
<label htmlFor="email" className="text-white">
Adresse mail
</label>
<input type="email" name="email" id="email" className="rounded-lg p-2" defaultValue={author.email} />
<label htmlFor="password" className="text-white">
Mot de passe
</label>
<input type="password" name="password" id="password" className="rounded-lg p-2" />
<div>
<div className='text-white text-xl'>Changer son mot de passe:</div>
<div className="flex flex-col gap-2">
<label htmlFor="newPassword" className="text-white">
Nouveau mot de passe
</label>
<input type="password" name="newPassword" id="newPassword" className="rounded-lg p-2" />
<label htmlFor="confirmPassword" className="text-white">
Confirmer le nouveau mot de passe
</label>
<input type="password" name="confirmPassword" id="confirmPassword" className="rounded-lg p-2" />
</div>
</div>
<div className="flex gap-4">
<button
className="rounded-md border py-2 px-4 text-sm max-w-[100px] font-medium text-white hover:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-transparent hover:text-red"
onClick={() => setShow(false)}
>
Annuler
</button>
<button
type="submit"
className="rounded-md border border-red bg-red py-2 px-4 text-sm max-w-[100px] font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
>
Modifier
</button>
</div>
</form>
</>
)}
</div> </div>
</Modal> </Modal>
</div> </div>