zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

refactor(admin): simplify ProfilePage with tabs and component cleanup

Browse Source
This commit is contained in:
Hyko
2026-04-22 20:26:45 -04:00
parent 7d6a13a57b
commit bbb55605c3
2 changed files with 105 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/pages/ProfilePage.client.js
+103 -206
View File
@@ -1,142 +1,83 @@
'use client'; 'use client';
import { registerPage } from '../registry.js'; import { registerPage } from '../registry.js';
import React, { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from 'react';
import { Card, Input, Button } from '@zen/core/shared/components'; import { Card, Input, Button, TabNav, UserAvatar } from '@zen/core/shared/components';
import { useToast } from '@zen/core/toast'; import { useToast } from '@zen/core/toast';
import AdminHeader from '../components/AdminHeader.js'; import AdminHeader from '../components/AdminHeader.js';
const TABS = [
{ id: 'informations', label: 'Informations' },
{ id: 'photo', label: 'Photo de profil' },
];
const ProfilePage = ({ user: initialUser }) => { const ProfilePage = ({ user: initialUser }) => {
const toast = useToast(); const toast = useToast();
const fileInputRef = useRef(null);
const [activeTab, setActiveTab] = useState('informations');
const [user, setUser] = useState(initialUser); const [user, setUser] = useState(initialUser);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [uploadingImage, setUploadingImage] = useState(false); const [uploadingImage, setUploadingImage] = useState(false);
const [imagePreview, setImagePreview] = useState(null); const [formData, setFormData] = useState({ name: initialUser?.name || '' });
const fileInputRef = useRef(null);
const [formData, setFormData] = useState({
name: initialUser?.name || ''
});
// Helper function to get image URL from storage key
const getImageUrl = (imageKey) => {
if (!imageKey) return null;
return `/zen/api/storage/${imageKey}`;
};
useEffect(() => { useEffect(() => {
if (initialUser) { if (initialUser) setFormData({ name: initialUser.name || '' });
setFormData({
name: initialUser.name || ''
});
setImagePreview(getImageUrl(initialUser.image));
}
}, [initialUser]); }, [initialUser]);
const handleChange = (value) => { const hasChanges = formData.name !== user?.name;
setFormData(prev => ({
...prev,
name: value
}));
};
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
if (!formData.name.trim()) { if (!formData.name.trim()) {
toast.error('Le nom est requis'); toast.error('Le nom est requis');
return; return;
} }
setLoading(true); setLoading(true);
try { try {
const response = await fetch('/zen/api/users/profile', { const response = await fetch('/zen/api/users/profile', {
method: 'PUT', method: 'PUT',
headers: { headers: { 'Content-Type': 'application/json' },
'Content-Type': 'application/json',
},
credentials: 'include', credentials: 'include',
body: JSON.stringify({ body: JSON.stringify({ name: formData.name.trim() }),
name: formData.name.trim()
})
}); });
const data = await response.json(); const data = await response.json();
if (!response.ok || !data.success) throw new Error(data.error || 'Échec de la mise à jour du profil');
if (!response.ok || !data.success) {
throw new Error(data.error || 'Échec de la mise à jour du profil');
}
setUser(data.user); setUser(data.user);
toast.success('Profil mis à jour avec succès'); toast.success('Profil mis à jour avec succès');
setTimeout(() => window.location.reload(), 1000);
// Refresh the page to update the user data in the header
setTimeout(() => {
window.location.reload();
}, 1000);
} catch (error) { } catch (error) {
console.error('Error updating profile:', error);
toast.error(error.message || 'Échec de la mise à jour du profil'); toast.error(error.message || 'Échec de la mise à jour du profil');
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
const handleReset = () => {
setFormData({
name: user?.name || ''
});
};
const handleImageSelect = async (e) => { const handleImageSelect = async (e) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (!file) return; if (!file) return;
// Validate file type
if (!file.type.startsWith('image/')) { if (!file.type.startsWith('image/')) {
toast.error('Veuillez sélectionner un fichier image'); toast.error('Veuillez sélectionner un fichier image');
return; return;
} }
// Validate file size (5MB)
if (file.size > 5 * 1024 * 1024) { if (file.size > 5 * 1024 * 1024) {
toast.error("L'image doit faire moins de 5MB"); toast.error("L'image doit faire moins de 5MB");
return; return;
} }
// Show preview
const reader = new FileReader();
reader.onloadend = () => {
setImagePreview(reader.result);
};
reader.readAsDataURL(file);
// Upload image
setUploadingImage(true); setUploadingImage(true);
try { try {
const formData = new FormData(); const body = new FormData();
formData.append('file', file); body.append('file', file);
const response = await fetch('/zen/api/users/profile/picture', { const response = await fetch('/zen/api/users/profile/picture', {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
body: formData body,
}); });
const data = await response.json(); const data = await response.json();
if (!response.ok || !data.success) throw new Error(data.message || "Échec du téléchargement de l'image");
if (!response.ok || !data.success) {
throw new Error(data.message || 'Échec du téléchargement de l\'image');
}
setUser(data.user); setUser(data.user);
setImagePreview(getImageUrl(data.user.image));
toast.success('Photo de profil mise à jour avec succès'); toast.success('Photo de profil mise à jour avec succès');
} catch (error) { } catch (error) {
console.error('Error uploading image:', error); toast.error(error.message || "Échec du téléchargement de l'image");
toast.error(error.message || 'Échec du téléchargement de l\'image');
// Revert preview on error
setImagePreview(getImageUrl(user?.image));
} finally { } finally {
setUploadingImage(false); setUploadingImage(false);
} }
@@ -144,79 +85,103 @@ const ProfilePage = ({ user: initialUser }) => {
const handleRemoveImage = async () => { const handleRemoveImage = async () => {
if (!user?.image) return; if (!user?.image) return;
setUploadingImage(true); setUploadingImage(true);
try { try {
const response = await fetch('/zen/api/users/profile/picture', { const response = await fetch('/zen/api/users/profile/picture', {
method: 'DELETE', method: 'DELETE',
credentials: 'include' credentials: 'include',
}); });
const data = await response.json(); const data = await response.json();
if (!response.ok || !data.success) throw new Error(data.message || "Échec de la suppression de l'image");
if (!response.ok || !data.success) {
throw new Error(data.message || 'Échec de la suppression de l\'image');
}
setUser(data.user); setUser(data.user);
setImagePreview(null);
toast.success('Photo de profil supprimée avec succès'); toast.success('Photo de profil supprimée avec succès');
} catch (error) { } catch (error) {
console.error('Error removing image:', error); toast.error(error.message || "Échec de la suppression de l'image");
toast.error(error.message || 'Échec de la suppression de l\'image');
} finally { } finally {
setUploadingImage(false); setUploadingImage(false);
} }
}; };
const getUserInitials = (name) => {
if (!name) return 'U';
return name
.split(' ')
.map(n => n[0])
.join('')
.toUpperCase()
.slice(0, 2);
};
const hasChanges = formData.name !== user?.name;
return ( return (
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8"> <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
<AdminHeader title="Mon profil" description="Gérez les informations de votre compte" /> <AdminHeader title="Mon profil" description="Gérez les informations de votre compte" />
{/* Content */} <div className="flex flex-col gap-6 items-start">
<div className="flex flex-col gap-6"> <TabNav tabs={TABS} activeTab={activeTab} onTabChange={setActiveTab} />
<Card>
<div className="space-y-4"> {activeTab === 'informations' && (
<h2 className="text-lg font-semibold text-neutral-900 dark:text-white"> <Card
Photo de profil title="Informations personnelles"
</h2> className="min-w-3/5"
<div className="flex items-center gap-6"> footer={
<div className="relative"> <div className="flex items-center justify-end gap-3">
{imagePreview ? ( <Button
<img type="button"
src={imagePreview} variant="secondary"
alt="Profile" onClick={() => setFormData({ name: user?.name || '' })}
className="w-24 h-24 rounded-full object-cover border-2 border-neutral-300 dark:border-neutral-700" disabled={loading || !hasChanges}
/> >
) : ( Réinitialiser
<div className="w-24 h-24 bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-800 dark:to-neutral-700 rounded-full flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-700"> </Button>
<span className="text-neutral-700 dark:text-white font-semibold text-2xl"> <Button
{getUserInitials(user?.name)} type="submit"
</span> variant="primary"
</div> disabled={loading || !hasChanges}
)} loading={loading}
{uploadingImage && ( onClick={handleSubmit}
<div className="absolute inset-0 bg-black/50 rounded-full flex items-center justify-center"> >
<div className="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin"></div> Enregistrer les modifications
</div> </Button>
)} </div>
}
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Input
label="Nom complet"
type="text"
value={formData.name}
onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}
placeholder="Entrez votre nom complet"
required
disabled={loading}
/>
<Input
label="Courriel"
type="email"
value={user?.email || ''}
disabled
readOnly
description="L'email ne peut pas être modifié"
/>
<Input
label="Compte créé"
type="text"
value={user?.created_at ? new Date(user.created_at).toLocaleDateString('fr-FR', {
year: 'numeric',
month: 'long',
day: 'numeric',
}) : 'N/D'}
disabled
readOnly
/>
</div> </div>
<div className="flex flex-col gap-2"> </Card>
<p className="text-sm text-neutral-400"> )}
Téléchargez une nouvelle photo de profil. Taille max 5MB.
</p> {activeTab === 'photo' && (
<Card title="Photo de profil" className="min-w-3/5">
<p className="text-sm text-neutral-500 dark:text-neutral-400">
Téléchargez une nouvelle photo de profil. Taille max 5MB.
</p>
<div className="flex items-center gap-6">
<div className="relative shrink-0">
<UserAvatar user={user} size="xl" />
{uploadingImage && (
<div className="absolute inset-0 bg-black/50 rounded-full flex items-center justify-center">
<div className="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin" />
</div>
)}
</div>
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
ref={fileInputRef} ref={fileInputRef}
@@ -233,10 +198,10 @@ const ProfilePage = ({ user: initialUser }) => {
> >
{uploadingImage ? 'Téléchargement...' : 'Télécharger une image'} {uploadingImage ? 'Téléchargement...' : 'Télécharger une image'}
</Button> </Button>
{imagePreview && ( {user?.image && (
<Button <Button
type="button" type="button"
variant="secondary" variant="danger"
onClick={handleRemoveImage} onClick={handleRemoveImage}
disabled={uploadingImage} disabled={uploadingImage}
> >
@@ -245,76 +210,8 @@ const ProfilePage = ({ user: initialUser }) => {
)} )}
</div> </div>
</div> </div>
</div> </Card>
</div> )}
</Card>
<Card>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-4">
<h2 className="text-lg font-semibold text-neutral-900 dark:text-white">
Informations personnelles
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Input
label="Nom complet"
type="text"
value={formData.name}
onChange={handleChange}
placeholder="Entrez votre nom complet"
required
disabled={loading}
/>
<Input
label="Courriel"
name="email"
type="email"
value={user?.email || ''}
disabled
readOnly
description="L'email ne peut pas être modifié"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Input
label="Compte créé"
name="createdAt"
type="text"
value={user?.created_at ? new Date(user.created_at).toLocaleDateString('fr-FR', {
year: 'numeric',
month: 'long',
day: 'numeric'
}) : 'N/D'}
disabled
readOnly
/>
</div>
</div>
{/* Action Buttons */}
<div className="flex items-center justify-end gap-3 pt-4 border-t border-neutral-200 dark:border-neutral-700/50">
<Button
type="button"
variant="secondary"
onClick={handleReset}
disabled={loading || !hasChanges}
>
Réinitialiser
</Button>
<Button
type="submit"
variant="primary"
disabled={loading || !hasChanges}
loading={loading}
>
{loading ? 'Enregistrement...' : 'Enregistrer les modifications'}
</Button>
</div>
</form>
</Card>
</div> </div>
</div> </div>
); );
src/shared/components/UserAvatar.js
+2
View File
@@ -13,6 +13,8 @@ const getUserInitials = (name) => {
const sizeMap = { const sizeMap = {
sm: { wrapper: 'w-[26px] h-[26px]', text: 'text-[10px]' }, sm: { wrapper: 'w-[26px] h-[26px]', text: 'text-[10px]' },
md: { wrapper: 'w-8 h-8', text: 'text-[11px]' }, md: { wrapper: 'w-8 h-8', text: 'text-[11px]' },
lg: { wrapper: 'w-16 h-16', text: 'text-xl' },
xl: { wrapper: 'w-24 h-24', text: 'text-2xl' },
}; };
const UserAvatar = ({ user, size = 'md' }) => { const UserAvatar = ({ user, size = 'md' }) => {