152 lines
6.6 KiB
JavaScript
152 lines
6.6 KiB
JavaScript
import { useState } from 'react'
|
|
import UserNav from '../components/UserNav'
|
|
import { changePasswordApi} from '../services/auth'
|
|
import { useHandleAuthError } from '../hooks/useHandleAuthError'
|
|
|
|
export default function Profile() {
|
|
const user = JSON.parse(localStorage.getItem('user') || '{}')
|
|
const initials = `${(user.firstname || '?')[0]}${(user.lastname || '?')[0]}`.toUpperCase()
|
|
const handleAuthError = useHandleAuthError()
|
|
|
|
const [pwForm, setPwForm] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' })
|
|
const [showPw, setShowPw] = useState({ current: false, new: false, confirm: false })
|
|
const [pwLoading, setPwLoading] = useState(false)
|
|
const [pwError, setPwError] = useState('')
|
|
const [pwSuccess, setPwSuccess] = useState(false)
|
|
|
|
const handlePwChange = (e) => setPwForm({ ...pwForm, [e.target.name]: e.target.value })
|
|
|
|
const handlePwSubmit = async (e) => {
|
|
e.preventDefault()
|
|
setPwError('')
|
|
setPwSuccess(false)
|
|
|
|
if (pwForm.newPassword !== pwForm.confirmPassword) {
|
|
setPwError('Les nouveaux mots de passe ne correspondent pas.')
|
|
return
|
|
}
|
|
if (pwForm.newPassword.length < 8) {
|
|
setPwError('Le nouveau mot de passe doit faire au moins 8 caractères.')
|
|
return
|
|
}
|
|
|
|
setPwLoading(true)
|
|
try {
|
|
await changePasswordApi({ currentPassword: pwForm.currentPassword, newPassword: pwForm.newPassword })
|
|
setPwSuccess(true)
|
|
setPwForm({ currentPassword: '', newPassword: '', confirmPassword: '' })
|
|
} catch (err) {
|
|
if (!handleAuthError(err)) setPwError(err.message)
|
|
} finally {
|
|
setPwLoading(false)
|
|
}
|
|
}
|
|
|
|
const EyeIcon = ({ visible }) => (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
|
|
{visible
|
|
? <><path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></>
|
|
: <path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
|
|
}
|
|
</svg>
|
|
)
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex flex-col px-8 py-12 max-w-lg mx-auto">
|
|
<UserNav active="profile" />
|
|
|
|
{/* Avatar */}
|
|
<div className="mb-6">
|
|
<div className="w-14 h-14 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-lg font-bold">
|
|
{initials}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Infos du compte (lecture seule) */}
|
|
<div className="space-y-4 mb-8">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Adresse email</label>
|
|
<div className="w-full border border-gray-100 rounded-lg px-4 py-3 text-sm text-gray-400 bg-gray-50 cursor-not-allowed select-none">
|
|
{user.email || '—'}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Nom</label>
|
|
<div className="w-full border border-gray-100 rounded-lg px-4 py-3 text-sm text-gray-500 bg-gray-50">
|
|
{user.lastname || '—'}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Prénom</label>
|
|
<div className="w-full border border-gray-100 rounded-lg px-4 py-3 text-sm text-gray-500 bg-gray-50">
|
|
{user.firstname || '—'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Séparateur */}
|
|
<div className="border-t border-gray-100 mb-6" />
|
|
|
|
{/* Section changement de mot de passe */}
|
|
<div>
|
|
<h2 className="text-sm font-semibold text-gray-800 mb-4">Changer mon mot de passe</h2>
|
|
|
|
{pwSuccess && (
|
|
<div className="mb-4 px-4 py-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm flex items-center gap-2">
|
|
<svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Mot de passe modifié avec succès.
|
|
</div>
|
|
)}
|
|
|
|
{pwError && (
|
|
<div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
|
|
{pwError}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handlePwSubmit} className="space-y-4">
|
|
{[
|
|
{ name: 'currentPassword', label: 'Mot de passe actuel', key: 'current' },
|
|
{ name: 'newPassword', label: 'Nouveau mot de passe', key: 'new' },
|
|
{ name: 'confirmPassword', label: 'Confirmer le nouveau mot de passe', key: 'confirm' },
|
|
].map(({ name, label, key }) => (
|
|
<div key={name}>
|
|
<label htmlFor={name} className="block text-sm font-medium text-gray-800 mb-1">{label}</label>
|
|
<div className="relative">
|
|
<input
|
|
type={showPw[key] ? 'text' : 'password'}
|
|
id={name}
|
|
name={name}
|
|
value={pwForm[name]}
|
|
onChange={handlePwChange}
|
|
required
|
|
placeholder="••••••••"
|
|
className="w-full border border-gray-200 rounded-lg px-4 py-3 pr-11 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPw((s) => ({ ...s, [key]: !s[key] }))}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
|
aria-label="Afficher/masquer"
|
|
>
|
|
<EyeIcon visible={showPw[key]} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={pwLoading}
|
|
className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-medium py-3 rounded-lg transition-colors text-sm"
|
|
>
|
|
{pwLoading ? 'Modification…' : 'Modifier le mot de passe'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|