128 lines
4.5 KiB
JavaScript
128 lines
4.5 KiB
JavaScript
import { useState } from 'react'
|
|
import { KeyRound, ArrowLeft, Check } from 'lucide-react'
|
|
import { changePassword } from '../api/client'
|
|
|
|
export default function ProfilePage({ username, onBack }) {
|
|
const [oldPassword, setOldPassword] = useState('')
|
|
const [newPassword, setNewPassword] = useState('')
|
|
const [newPassword2, setNewPassword2] = useState('')
|
|
const [error, setError] = useState(null)
|
|
const [success, setSuccess] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
setError(null)
|
|
setSuccess(false)
|
|
|
|
if (newPassword !== newPassword2) {
|
|
setError('Les nouveaux mots de passe ne correspondent pas.')
|
|
return
|
|
}
|
|
if (newPassword.length < 6) {
|
|
setError('Le nouveau mot de passe doit contenir au moins 6 caractères.')
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
try {
|
|
await changePassword(oldPassword, newPassword)
|
|
setSuccess(true)
|
|
setOldPassword('')
|
|
setNewPassword('')
|
|
setNewPassword2('')
|
|
} catch (err) {
|
|
setError(err.message)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-950 text-gray-100">
|
|
<div className="max-w-lg mx-auto px-4 py-10">
|
|
<button
|
|
onClick={onBack}
|
|
className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-200 mb-6 transition-colors"
|
|
>
|
|
<ArrowLeft size={15} />
|
|
Retour au tableau de bord
|
|
</button>
|
|
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-2 rounded-xl bg-indigo-500/15">
|
|
<KeyRound size={20} className="text-indigo-400" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-lg font-semibold">Mon profil</h1>
|
|
<p className="text-xs text-gray-500">{username}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-900 border border-gray-800 rounded-2xl p-6">
|
|
<h2 className="text-sm font-medium text-gray-300 mb-4">Changer le mot de passe</h2>
|
|
|
|
{success && (
|
|
<div className="flex items-center gap-2 bg-emerald-950/40 border border-emerald-800/50 rounded-lg px-3 py-2 text-xs text-emerald-300 mb-4">
|
|
<Check size={13} />
|
|
Mot de passe mis à jour avec succès.
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 mb-4">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs text-gray-400 mb-1.5">Mot de passe actuel</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
autoComplete="current-password"
|
|
value={oldPassword}
|
|
onChange={(e) => setOldPassword(e.target.value)}
|
|
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs text-gray-400 mb-1.5">Nouveau mot de passe</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
autoComplete="new-password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs text-gray-400 mb-1.5">Confirmer le nouveau mot de passe</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
autoComplete="new-password"
|
|
value={newPassword2}
|
|
onChange={(e) => setNewPassword2(e.target.value)}
|
|
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-sm font-medium transition-colors mt-2"
|
|
>
|
|
{loading ? 'Enregistrement…' : 'Changer le mot de passe'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|