160 lines
3.9 KiB
TypeScript
160 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// --------------------------------------------------- Components ------------------------------------------------------
|
|
import Link from 'next/link';
|
|
import Input from '@/components/Input/Input';
|
|
import ConfirmPopup from '@/components/ConfirmPopup/ConfirmPopup';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { useData } from './hooks/useData';
|
|
import { useActions } from './hooks/useActions';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import ArrowRightIcon from '@/assets/ArrowRightIcon';
|
|
import TrashIcon from '@/assets/TrashIcon';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Settings = () => {
|
|
const {
|
|
userData,
|
|
isPopupDisplayed,
|
|
setIsPopupDisplayed,
|
|
usernameMessage,
|
|
setUsernameMessage,
|
|
passwordMessage,
|
|
setPasswordMessage,
|
|
} = useData();
|
|
|
|
const {
|
|
updateUsername,
|
|
updatePassword,
|
|
handleClosePopup,
|
|
handleDeleteUser,
|
|
deleteUser,
|
|
} = useActions({
|
|
userData,
|
|
setIsPopupDisplayed,
|
|
setUsernameMessage,
|
|
setPasswordMessage,
|
|
});
|
|
|
|
if (!userData) {
|
|
return;
|
|
}
|
|
|
|
return (
|
|
<div className='settings'>
|
|
<div className='header'>
|
|
<Link
|
|
href={'/statistics'}
|
|
className='backButton'
|
|
>
|
|
<ArrowRightIcon
|
|
style={{
|
|
rotate: '180deg',
|
|
}}
|
|
/>
|
|
</Link>
|
|
<p className='title'>Éditer le profil</p>
|
|
</div>
|
|
|
|
<div className='settingsContainer'>
|
|
{usernameMessage && (
|
|
<p className='message'>{usernameMessage}</p>
|
|
)}
|
|
|
|
<form
|
|
className='card'
|
|
onSubmit={updateUsername}
|
|
>
|
|
<p className='cardTitle'>Nom d'utilisateur</p>
|
|
|
|
<Input
|
|
type='text'
|
|
name='username'
|
|
placeholder="Nom d'utilisateur"
|
|
defaultValue={userData.username}
|
|
autoComplete='username'
|
|
required
|
|
/>
|
|
|
|
<button
|
|
type='submit'
|
|
className='submitButton'
|
|
>
|
|
Appliquer
|
|
</button>
|
|
</form>
|
|
|
|
<form
|
|
className='card'
|
|
onSubmit={updatePassword}
|
|
>
|
|
<p className='cardTitle'>Modifier le mot de passe</p>
|
|
|
|
{passwordMessage && (
|
|
<p className='message'>{passwordMessage}</p>
|
|
)}
|
|
|
|
<div className='inputsContainer'>
|
|
<Input
|
|
type='password'
|
|
name='currentPassword'
|
|
placeholder='Mot de passe actuel'
|
|
autoComplete='password'
|
|
required
|
|
/>
|
|
<Input
|
|
type='password'
|
|
name='newPassword'
|
|
placeholder='Nouveau mot de passe'
|
|
autoComplete='off'
|
|
required
|
|
/>
|
|
<Input
|
|
type='password'
|
|
name='confirmNewPassword'
|
|
placeholder='Confirmer le nouveau mot de passe'
|
|
autoComplete='off'
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type='submit'
|
|
className='submitButton'
|
|
>
|
|
Appliquer
|
|
</button>
|
|
</form>
|
|
|
|
<button
|
|
className='deleteButton'
|
|
onClick={handleDeleteUser}
|
|
>
|
|
<TrashIcon />
|
|
Supprimer mon compte
|
|
</button>
|
|
|
|
{isPopupDisplayed && (
|
|
<ConfirmPopup
|
|
title='Supprimer le compte ?'
|
|
content='Es-tu sûr de vouloir supprimer ton compte ? Cette action est irréversible.'
|
|
onClose={handleClosePopup}
|
|
onAccept={deleteUser}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|