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

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

@ -20,9 +20,8 @@ const User = ({ author }: any) => {
const queryClient = useQueryClient();
function handleContextMenu(e: any) {
if (messageId!== '0' && e.target.closest('.message')?.id.slice(9) !== messageId) {
setPopupPos({ posX: 0, posY: 0});
if (messageId !== '0' && e.target.closest('.message')?.id.slice(9) !== messageId) {
setPopupPos({ posX: 0, posY: 0 });
setMessageId('0');
document.removeEventListener('contextmenu', handleContextMenu);
}
@ -56,6 +55,12 @@ const User = ({ author }: any) => {
queryClient.invalidateQueries(['messages']);
}
const handleChange = (e: any) => {
e.preventDefault();
toastSuccess('Infos personelles changées');
setShow(!show);
};
return (
<div className="user">
<button
@ -90,6 +95,7 @@ const User = ({ author }: any) => {
)}
<Modal show={show}>
<div className="flex flex-col gap-5">
{me.data?.id !== author.id ? (
<div className="flex flex-col gap-2">
<div className="text-2xl text-white">Info utilisateur</div>
<div className="text-white">Nom: {author.lastName}</div>
@ -97,7 +103,6 @@ const User = ({ author }: any) => {
<div className="text-white">
Adresse mail: <a href={'mailto:' + author.email}>{author.email}</a>
</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"
onClick={() => setShow(false)}
@ -105,6 +110,69 @@ const User = ({ author }: any) => {
Fermer
</button>
</div>
) : (
<>
<div className="text-2xl text-white">Modifier ses infos personnelles</div>
<form className="flex flex-col gap-2" onSubmit={handleChange}>
<label htmlFor="firstName" className="text-white">
Prenom
</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>
</Modal>
</div>
);