331 lines
12 KiB
TypeScript
331 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import AlertModal from './AlertModal';
|
|
|
|
interface UserProfile {
|
|
id: string;
|
|
email: string;
|
|
name: string | null;
|
|
photoUrl: string | null;
|
|
role: {
|
|
id: string;
|
|
name: string;
|
|
description: string | null;
|
|
} | null;
|
|
}
|
|
|
|
export default function ModifierCompteContent() {
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(false);
|
|
const [loadingProfile, setLoadingProfile] = useState(true);
|
|
const [alertModal, setAlertModal] = useState<{
|
|
show: boolean;
|
|
type: 'success' | 'error' | 'info' | 'warning';
|
|
title: string;
|
|
message: string;
|
|
} | null>(null);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: '',
|
|
});
|
|
const [profile, setProfile] = useState<UserProfile | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchProfile();
|
|
}, []);
|
|
|
|
const fetchProfile = async () => {
|
|
try {
|
|
const response = await fetch('/api/user/profile');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setProfile(data);
|
|
setFormData({
|
|
name: data.name || '',
|
|
email: data.email || '',
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: '',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement du profil:', error);
|
|
setAlertModal({
|
|
show: true,
|
|
type: 'error',
|
|
title: 'Erreur',
|
|
message: 'Erreur lors du chargement du profil',
|
|
});
|
|
} finally {
|
|
setLoadingProfile(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
// Vérifier que les mots de passe correspondent si un nouveau mot de passe est fourni
|
|
if (formData.newPassword && formData.newPassword !== formData.confirmPassword) {
|
|
setAlertModal({
|
|
show: true,
|
|
type: 'error',
|
|
title: 'Erreur',
|
|
message: 'Les mots de passe ne correspondent pas',
|
|
});
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const updateData: any = {
|
|
name: formData.name,
|
|
email: formData.email,
|
|
};
|
|
|
|
// Ajouter le changement de mot de passe si fourni
|
|
if (formData.newPassword) {
|
|
updateData.currentPassword = formData.currentPassword;
|
|
updateData.newPassword = formData.newPassword;
|
|
}
|
|
|
|
const response = await fetch('/api/user/profile', {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(updateData),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setAlertModal({
|
|
show: true,
|
|
type: 'success',
|
|
title: 'Succès',
|
|
message: 'Votre profil a été mis à jour avec succès',
|
|
});
|
|
// Réinitialiser les champs de mot de passe
|
|
setFormData({
|
|
...formData,
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: '',
|
|
});
|
|
// Recharger le profil
|
|
fetchProfile();
|
|
} else {
|
|
const error = await response.json();
|
|
setAlertModal({
|
|
show: true,
|
|
type: 'error',
|
|
title: 'Erreur',
|
|
message: error.error || 'Une erreur est survenue',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur:', error);
|
|
setAlertModal({
|
|
show: true,
|
|
type: 'error',
|
|
title: 'Erreur',
|
|
message: 'Une erreur est survenue',
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loadingProfile) {
|
|
return (
|
|
<div className="p-6">
|
|
<div className="text-center text-gray-500">Chargement...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 md:p-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl md:text-3xl font-semibold text-cblack mb-1">
|
|
Modifier mon compte
|
|
</h1>
|
|
<p className="text-sm text-cgray">
|
|
Gérez vos informations personnelles et votre mot de passe
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-sm p-4 md:p-6">
|
|
<form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
|
|
{/* Nom */}
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Nom <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
required
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
|
placeholder="Votre nom"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Email <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
required
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
|
placeholder="votre@email.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rôle (lecture seule) */}
|
|
{profile?.role && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Rôle
|
|
</label>
|
|
<div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-600">
|
|
{profile.role.name}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Séparateur */}
|
|
<div className="border-t border-gray-200 pt-4 md:pt-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Changer le mot de passe
|
|
</h2>
|
|
<p className="text-sm text-gray-600 mb-4">
|
|
Laissez ces champs vides si vous ne souhaitez pas changer votre mot de passe
|
|
</p>
|
|
</div>
|
|
|
|
{/* Mot de passe actuel */}
|
|
<div>
|
|
<label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Mot de passe actuel
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="currentPassword"
|
|
value={formData.currentPassword}
|
|
onChange={(e) => setFormData({ ...formData, currentPassword: e.target.value })}
|
|
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
|
placeholder="Entrez votre mot de passe actuel"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nouveau mot de passe */}
|
|
<div>
|
|
<label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Nouveau mot de passe
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="newPassword"
|
|
value={formData.newPassword}
|
|
onChange={(e) => setFormData({ ...formData, newPassword: e.target.value })}
|
|
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
|
placeholder="Entrez votre nouveau mot de passe"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Confirmer le mot de passe */}
|
|
<div>
|
|
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Confirmer le nouveau mot de passe
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
value={formData.confirmPassword}
|
|
onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
|
|
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
|
placeholder="Confirmez votre nouveau mot de passe"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Boutons */}
|
|
<div className="flex flex-col-reverse md:flex-row justify-end gap-3 pt-4 border-t border-gray-200">
|
|
<button
|
|
type="button"
|
|
onClick={() => router.back()}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors w-full md:w-auto"
|
|
>
|
|
Annuler
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full md:w-auto"
|
|
>
|
|
{loading ? 'Enregistrement...' : 'Enregistrer les modifications'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Modal d'alerte */}
|
|
{alertModal && (
|
|
<AlertModal
|
|
isOpen={alertModal.show}
|
|
type={alertModal.type}
|
|
title={alertModal.title}
|
|
message={alertModal.message}
|
|
onClose={() => setAlertModal(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|