86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useTransition } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Input, Button } from '@/components/ui';
|
|
import { updateProfileAction } from '@/actions/profile';
|
|
|
|
interface ProfileFormProps {
|
|
initialData: {
|
|
name: string;
|
|
email: string;
|
|
};
|
|
}
|
|
|
|
export function ProfileForm({ initialData }: ProfileFormProps) {
|
|
const router = useRouter();
|
|
const [isPending, startTransition] = useTransition();
|
|
const [name, setName] = useState(initialData.name);
|
|
const [email, setEmail] = useState(initialData.email);
|
|
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
|
|
|
|
const hasChanges = name !== initialData.name || email !== initialData.email;
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setMessage(null);
|
|
|
|
startTransition(async () => {
|
|
const result = await updateProfileAction({ name, email });
|
|
|
|
if (result.success) {
|
|
setMessage({ type: 'success', text: 'Profil mis à jour avec succès' });
|
|
router.refresh();
|
|
} else {
|
|
setMessage({ type: 'error', text: result.error || 'Erreur lors de la mise à jour' });
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="name" className="mb-1.5 block text-sm font-medium text-foreground">
|
|
Nom
|
|
</label>
|
|
<Input
|
|
id="name"
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Votre nom"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="email" className="mb-1.5 block text-sm font-medium text-foreground">
|
|
Email
|
|
</label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{message && (
|
|
<p
|
|
className={`text-sm ${
|
|
message.type === 'success' ? 'text-success' : 'text-destructive'
|
|
}`}
|
|
>
|
|
{message.text}
|
|
</p>
|
|
)}
|
|
|
|
<Button type="submit" disabled={isPending || !hasChanges}>
|
|
{isPending ? 'Enregistrement...' : 'Enregistrer les modifications'}
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
|