Added optimizations for mobile
This commit is contained in:
@@ -2,8 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useNotification } from './NotificationProvider';
|
||||
import useSWR from 'swr';
|
||||
import AlertModal from './AlertModal';
|
||||
|
||||
interface UserProfile {
|
||||
id: string;
|
||||
@@ -17,61 +16,53 @@ interface UserProfile {
|
||||
} | null;
|
||||
}
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
||||
|
||||
export default function ModifierCompteContent() {
|
||||
const router = useRouter();
|
||||
const { showNotification } = useNotification();
|
||||
const { data: userProfile, mutate } = useSWR<UserProfile>('/api/user/profile', fetcher);
|
||||
|
||||
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: '',
|
||||
photoUrl: '',
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
const [profile, setProfile] = useState<UserProfile | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (userProfile) {
|
||||
setFormData({
|
||||
name: userProfile.name || '',
|
||||
email: userProfile.email || '',
|
||||
photoUrl: userProfile.photoUrl || '',
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
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',
|
||||
});
|
||||
}
|
||||
}, [userProfile]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
// Vérifier la taille du fichier (max 5MB)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
showNotification('L\'image est trop grande (max 5MB)', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier le type de fichier
|
||||
if (!file.type.startsWith('image/')) {
|
||||
showNotification('Veuillez sélectionner une image', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setFormData((prev) => ({ ...prev, photoUrl: reader.result as string }));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} finally {
|
||||
setLoadingProfile(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -79,28 +70,25 @@ export default function ModifierCompteContent() {
|
||||
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 {
|
||||
// Vérifier que les mots de passe correspondent si un nouveau mot de passe est fourni
|
||||
if (formData.newPassword) {
|
||||
if (formData.newPassword !== formData.confirmPassword) {
|
||||
showNotification('Les mots de passe ne correspondent pas', 'error');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.newPassword.length < 6) {
|
||||
showNotification('Le mot de passe doit contenir au moins 6 caractères', 'error');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const updateData: any = {
|
||||
name: formData.name.trim() || null,
|
||||
email: formData.email.trim(),
|
||||
photoUrl: formData.photoUrl || null,
|
||||
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;
|
||||
@@ -114,238 +102,229 @@ export default function ModifierCompteContent() {
|
||||
body: JSON.stringify(updateData),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showNotification('Profil mis à jour avec succès', 'success');
|
||||
mutate();
|
||||
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((prev) => ({
|
||||
...prev,
|
||||
setFormData({
|
||||
...formData,
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
}));
|
||||
});
|
||||
// Recharger le profil
|
||||
fetchProfile();
|
||||
} else {
|
||||
showNotification(data.error || 'Erreur lors de la mise à jour', 'error');
|
||||
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);
|
||||
showNotification('Erreur lors de la mise à jour', 'error');
|
||||
setAlertModal({
|
||||
show: true,
|
||||
type: 'error',
|
||||
title: 'Erreur',
|
||||
message: 'Une erreur est survenue',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getUserInitials = () => {
|
||||
if (userProfile?.name) {
|
||||
const names = userProfile.name.split(' ');
|
||||
if (names.length >= 2) {
|
||||
return `${names[0].charAt(0)}${names[1].charAt(0)}`.toUpperCase();
|
||||
}
|
||||
return userProfile.name.charAt(0).toUpperCase();
|
||||
}
|
||||
return userProfile?.email?.charAt(0).toUpperCase() || 'U';
|
||||
};
|
||||
|
||||
if (!userProfile) {
|
||||
if (loadingProfile) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="text-center py-12 text-gray-500">Chargement...</div>
|
||||
<div className="text-center text-gray-500">Chargement...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="mb-8">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Retour aux paramètres
|
||||
</button>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Modifier mon compte</h1>
|
||||
<p className="text-sm text-gray-600">
|
||||
Mettez à jour vos informations personnelles et votre mot de passe
|
||||
<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>
|
||||
|
||||
<form onSubmit={handleSubmit} className="max-w-3xl">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8 space-y-8">
|
||||
{/* Photo de profil */}
|
||||
<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 className="block text-sm font-semibold text-gray-900 mb-4">
|
||||
Photo de profil
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nom <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="relative">
|
||||
{formData.photoUrl ? (
|
||||
<img
|
||||
src={formData.photoUrl}
|
||||
alt="Photo de profil"
|
||||
className="w-24 h-24 rounded-full object-cover border-4 border-gray-200"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-24 h-24 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center border-4 border-gray-200">
|
||||
<span className="text-white text-2xl font-bold">{getUserInitials()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleImageUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Choisir une image
|
||||
</span>
|
||||
</label>
|
||||
{formData.photoUrl && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData((prev) => ({ ...prev, photoUrl: '' }))}
|
||||
className="mt-2 text-sm text-red-600 hover:text-red-700"
|
||||
>
|
||||
Supprimer la photo
|
||||
</button>
|
||||
)}
|
||||
<p className="text-xs text-gray-500 mt-2">JPG, PNG ou GIF (max 5MB)</p>
|
||||
<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>
|
||||
|
||||
{/* Nom et prénom */}
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-semibold text-gray-900 mb-2">
|
||||
Nom et prénom
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||
placeholder="Votre nom complet"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-semibold text-gray-900 mb-2">
|
||||
Email
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2.5 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>
|
||||
|
||||
{/* Section changement de mot de passe */}
|
||||
<div className="pt-6 border-t border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Changer le mot de passe</h3>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
Laissez ces champs vides si vous ne souhaitez pas changer votre mot de passe
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="currentPassword" className="block text-sm font-semibold text-gray-900 mb-2">
|
||||
Mot de passe actuel
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="currentPassword"
|
||||
name="currentPassword"
|
||||
value={formData.currentPassword}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2.5 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>
|
||||
<label htmlFor="newPassword" className="block text-sm font-semibold text-gray-900 mb-2">
|
||||
Nouveau mot de passe
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="newPassword"
|
||||
name="newPassword"
|
||||
value={formData.newPassword}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||
placeholder="Au moins 6 caractères"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-900 mb-2">
|
||||
Confirmer le nouveau mot de passe
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2.5 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 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>
|
||||
|
||||
{/* Boutons d'action */}
|
||||
<div className="flex items-center justify-end gap-4 pt-6 border-t border-gray-200">
|
||||
{/* 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-6 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
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-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
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 ? (
|
||||
<>
|
||||
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Enregistrement...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Enregistrer les modifications
|
||||
</>
|
||||
)}
|
||||
{loading ? 'Enregistrement...' : 'Enregistrer les modifications'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Modal d'alerte */}
|
||||
{alertModal && (
|
||||
<AlertModal
|
||||
isOpen={alertModal.show}
|
||||
type={alertModal.type}
|
||||
title={alertModal.title}
|
||||
message={alertModal.message}
|
||||
onClose={() => setAlertModal(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user