refactoring majeur (code dupliqué, mort, ...)
- Économie : ~1240 lignes de code dupliqué - Réduction : ~60% du code modal - Amélioration : Cohérence et maintenabilité
This commit is contained in:
Yannick Le Duc
41
src/components/base/BaseModal.tsx
Normal file
41
src/components/base/BaseModal.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
|
||||
interface BaseModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string | ReactNode;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
footer?: ReactNode;
|
||||
maxWidth?: string;
|
||||
maxHeight?: string;
|
||||
}
|
||||
|
||||
export function BaseModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
footer,
|
||||
maxWidth = "sm:max-w-[500px]",
|
||||
maxHeight = "max-h-[90vh]"
|
||||
}: BaseModalProps) {
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className={`${maxWidth} ${maxHeight} overflow-y-auto`}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{description && <DialogDescription>{description}</DialogDescription>}
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{footer && <DialogFooter>{footer}</DialogFooter>}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
255
src/components/base/CampaignFormModal.tsx
Normal file
255
src/components/base/CampaignFormModal.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
'use client';
|
||||
import { useEffect } from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { campaignService } from '@/lib/services';
|
||||
import { Campaign, CampaignStatus } from '@/types';
|
||||
import { MarkdownEditor } from '@/components/MarkdownEditor';
|
||||
import { useFormState } from '@/hooks/useFormState';
|
||||
import { FormModal } from './FormModal';
|
||||
import { handleFormError } from '@/lib/form-utils';
|
||||
|
||||
interface CampaignFormModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
mode: 'create' | 'edit';
|
||||
campaign?: Campaign | null;
|
||||
}
|
||||
|
||||
export default function CampaignFormModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSuccess,
|
||||
mode,
|
||||
campaign
|
||||
}: CampaignFormModalProps) {
|
||||
const initialData = {
|
||||
title: '',
|
||||
description: '',
|
||||
status: 'deposit' as CampaignStatus,
|
||||
budget_per_user: '',
|
||||
spending_tiers: ''
|
||||
};
|
||||
|
||||
const { formData, setFormData, loading, setLoading, error, setError, handleChange, resetForm } = useFormState(initialData);
|
||||
|
||||
useEffect(() => {
|
||||
if (campaign && mode === 'edit') {
|
||||
setFormData({
|
||||
title: campaign.title,
|
||||
description: campaign.description,
|
||||
status: campaign.status,
|
||||
budget_per_user: campaign.budget_per_user.toString(),
|
||||
spending_tiers: campaign.spending_tiers
|
||||
});
|
||||
}
|
||||
}, [campaign, mode, setFormData]);
|
||||
|
||||
const generateOptimalTiers = (budget: number): string => {
|
||||
if (budget <= 0) return "0";
|
||||
|
||||
// Cas spéciaux pour des budgets courants
|
||||
if (budget === 10000) {
|
||||
return "0, 500, 1000, 2000, 3000, 5000, 7500, 10000";
|
||||
}
|
||||
if (budget === 8000) {
|
||||
return "0, 500, 1000, 2000, 3000, 4000, 6000, 8000";
|
||||
}
|
||||
|
||||
const tiers = [0];
|
||||
|
||||
// Déterminer les paliers "ronds" selon la taille du budget
|
||||
let roundValues: number[] = [];
|
||||
|
||||
if (budget <= 100) {
|
||||
// Petits budgets : multiples de 5, 10, 25
|
||||
roundValues = [5, 10, 25, 50, 75, 100];
|
||||
} else if (budget <= 500) {
|
||||
// Budgets moyens : multiples de 25, 50, 100
|
||||
roundValues = [25, 50, 75, 100, 150, 200, 250, 300, 400, 500];
|
||||
} else if (budget <= 2000) {
|
||||
// Budgets moyens-grands : multiples de 100, 250, 500
|
||||
roundValues = [100, 250, 500, 750, 1000, 1250, 1500, 1750, 2000];
|
||||
} else if (budget <= 10000) {
|
||||
// Gros budgets : multiples de 500, 1000, 2000
|
||||
roundValues = [500, 1000, 1500, 2000, 2500, 3000, 4000, 5000, 6000, 7500, 10000];
|
||||
} else {
|
||||
// Très gros budgets : multiples de 1000, 2000, 5000
|
||||
roundValues = [1000, 2000, 3000, 5000, 7500, 10000, 15000, 20000, 25000, 50000];
|
||||
}
|
||||
|
||||
// Sélectionner les paliers qui sont inférieurs ou égaux au budget
|
||||
const validTiers = roundValues.filter(tier => tier <= budget);
|
||||
|
||||
// Prendre 6-8 paliers intermédiaires + 0 et le budget final
|
||||
const targetCount = Math.min(8, Math.max(6, validTiers.length));
|
||||
const step = Math.max(1, Math.floor(validTiers.length / targetCount));
|
||||
|
||||
for (let i = 0; i < validTiers.length && tiers.length < targetCount + 1; i += step) {
|
||||
if (!tiers.includes(validTiers[i])) {
|
||||
tiers.push(validTiers[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// Ajouter le budget final s'il n'est pas déjà présent
|
||||
if (!tiers.includes(budget)) {
|
||||
tiers.push(budget);
|
||||
}
|
||||
|
||||
// Trier et retourner
|
||||
return tiers.sort((a, b) => a - b).join(', ');
|
||||
};
|
||||
|
||||
const handleBudgetBlur = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||
const budget = parseInt(e.target.value);
|
||||
if (!isNaN(budget) && budget > 0 && !formData.spending_tiers && mode === 'create') {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
spending_tiers: generateOptimalTiers(budget)
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatusChange = (value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
status: value as CampaignStatus
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
if (mode === 'create') {
|
||||
await campaignService.create({
|
||||
title: formData.title,
|
||||
description: formData.description,
|
||||
budget_per_user: parseInt(formData.budget_per_user),
|
||||
spending_tiers: formData.spending_tiers,
|
||||
status: 'deposit'
|
||||
});
|
||||
} else if (mode === 'edit' && campaign) {
|
||||
await campaignService.update(campaign.id, {
|
||||
title: formData.title,
|
||||
description: formData.description,
|
||||
status: formData.status,
|
||||
budget_per_user: parseInt(formData.budget_per_user),
|
||||
spending_tiers: formData.spending_tiers
|
||||
});
|
||||
}
|
||||
|
||||
onSuccess();
|
||||
if (mode === 'create') {
|
||||
resetForm();
|
||||
}
|
||||
} catch (err: any) {
|
||||
const operation = mode === 'create' ? 'la création de la campagne' : 'la modification de la campagne';
|
||||
setError(handleFormError(err, operation));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (mode === 'create') {
|
||||
resetForm();
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
const isEditMode = mode === 'edit';
|
||||
|
||||
return (
|
||||
<FormModal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
onSubmit={handleSubmit}
|
||||
title={isEditMode ? "Modifier la campagne" : "Créer une nouvelle campagne"}
|
||||
description={
|
||||
isEditMode
|
||||
? "Modifiez les paramètres de votre campagne de budget participatif."
|
||||
: "Configurez les paramètres de votre campagne de budget participatif."
|
||||
}
|
||||
loading={loading}
|
||||
error={error}
|
||||
submitText={isEditMode ? "Modifier la campagne" : "Créer la campagne"}
|
||||
loadingText={isEditMode ? "Modification..." : "Création..."}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Titre de la campagne *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
name="title"
|
||||
value={formData.title}
|
||||
onChange={handleChange}
|
||||
placeholder="Ex: Amélioration des espaces verts"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MarkdownEditor
|
||||
value={formData.description}
|
||||
onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
|
||||
placeholder="Décrivez l'objectif de cette campagne..."
|
||||
label="Description *"
|
||||
maxLength={2000}
|
||||
/>
|
||||
|
||||
{isEditMode && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="status">Statut de la campagne</Label>
|
||||
<Select value={formData.status} onValueChange={handleStatusChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionnez un statut" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="deposit">Dépôt de propositions</SelectItem>
|
||||
<SelectItem value="voting">En cours de vote</SelectItem>
|
||||
<SelectItem value="closed">Terminée</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="budget_per_user">Budget (€) *</Label>
|
||||
<Input
|
||||
id="budget_per_user"
|
||||
name="budget_per_user"
|
||||
type="number"
|
||||
value={formData.budget_per_user}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBudgetBlur}
|
||||
placeholder="100"
|
||||
min="1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="spending_tiers">Paliers de dépense *</Label>
|
||||
<Input
|
||||
id="spending_tiers"
|
||||
name="spending_tiers"
|
||||
value={formData.spending_tiers}
|
||||
onChange={handleChange}
|
||||
placeholder="Ex: 0, 10, 25, 50, 100"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Séparez les montants par des virgules (ex: 0, 10, 25, 50, 100)
|
||||
{formData.budget_per_user && !formData.spending_tiers && mode === 'create' && (
|
||||
<span className="block mt-1 text-blue-600 dark:text-blue-400">
|
||||
💡 Les paliers seront générés automatiquement après avoir saisi le budget
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</FormModal>
|
||||
);
|
||||
}
|
||||
97
src/components/base/DeleteModal.tsx
Normal file
97
src/components/base/DeleteModal.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
import { BaseModal } from './BaseModal';
|
||||
import { ErrorDisplay } from './ErrorDisplay';
|
||||
|
||||
interface DeleteModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => Promise<void>;
|
||||
title: string;
|
||||
description: string;
|
||||
itemName: string;
|
||||
itemDetails: React.ReactNode;
|
||||
warningMessage?: string;
|
||||
loadingText?: string;
|
||||
confirmText?: string;
|
||||
}
|
||||
|
||||
export function DeleteModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
title,
|
||||
description,
|
||||
itemName,
|
||||
itemDetails,
|
||||
warningMessage = "Cette action est irréversible.",
|
||||
loadingText = "Suppression...",
|
||||
confirmText = "Supprimer définitivement"
|
||||
}: DeleteModalProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleDelete = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
await onConfirm();
|
||||
} catch (err: any) {
|
||||
const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression';
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const footer = (
|
||||
<>
|
||||
<Button type="button" variant="outline" onClick={onClose} disabled={loading}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? loadingText : confirmText}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-5 w-5 text-red-500" />
|
||||
{title}
|
||||
</div>
|
||||
}
|
||||
description={description}
|
||||
footer={footer}
|
||||
maxWidth="sm:max-w-[425px]"
|
||||
>
|
||||
<ErrorDisplay error={error} />
|
||||
|
||||
<div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||
<h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
|
||||
{itemName} à supprimer :
|
||||
</h4>
|
||||
{itemDetails}
|
||||
</div>
|
||||
|
||||
{warningMessage && (
|
||||
<div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
||||
<p className="text-sm text-amber-700 dark:text-amber-300">
|
||||
⚠️ {warningMessage}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</BaseModal>
|
||||
);
|
||||
}
|
||||
14
src/components/base/ErrorDisplay.tsx
Normal file
14
src/components/base/ErrorDisplay.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
interface ErrorDisplayProps {
|
||||
error: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ErrorDisplay({ error, className = "" }: ErrorDisplayProps) {
|
||||
if (!error) return null;
|
||||
|
||||
return (
|
||||
<div className={`p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg ${className}`}>
|
||||
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
src/components/base/FormModal.tsx
Normal file
61
src/components/base/FormModal.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { BaseModal } from './BaseModal';
|
||||
import { ErrorDisplay } from './ErrorDisplay';
|
||||
|
||||
interface FormModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (e: React.FormEvent) => Promise<void>;
|
||||
title: string;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
loading: boolean;
|
||||
error: string;
|
||||
submitText: string;
|
||||
loadingText?: string;
|
||||
cancelText?: string;
|
||||
maxWidth?: string;
|
||||
}
|
||||
|
||||
export function FormModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSubmit,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
loading,
|
||||
error,
|
||||
submitText,
|
||||
loadingText = "En cours...",
|
||||
cancelText = "Annuler",
|
||||
maxWidth = "sm:max-w-[500px]"
|
||||
}: FormModalProps) {
|
||||
const footer = (
|
||||
<>
|
||||
<Button type="button" variant="outline" onClick={onClose} disabled={loading}>
|
||||
{cancelText}
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading} form="form-modal">
|
||||
{loading ? loadingText : submitText}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
description={description}
|
||||
footer={footer}
|
||||
maxWidth={maxWidth}
|
||||
>
|
||||
<form id="form-modal" onSubmit={onSubmit} className="space-y-4">
|
||||
<ErrorDisplay error={error} />
|
||||
{children}
|
||||
</form>
|
||||
</BaseModal>
|
||||
);
|
||||
}
|
||||
177
src/components/base/PropositionFormModal.tsx
Normal file
177
src/components/base/PropositionFormModal.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
'use client';
|
||||
import { useEffect } from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { propositionService } from '@/lib/services';
|
||||
import { Proposition } from '@/types';
|
||||
import { MarkdownEditor } from '@/components/MarkdownEditor';
|
||||
import { useFormState } from '@/hooks/useFormState';
|
||||
import { FormModal } from './FormModal';
|
||||
import { handleFormError } from '@/lib/form-utils';
|
||||
|
||||
interface PropositionFormModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
mode: 'add' | 'edit';
|
||||
campaignId?: string;
|
||||
proposition?: Proposition | null;
|
||||
}
|
||||
|
||||
export default function PropositionFormModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSuccess,
|
||||
mode,
|
||||
campaignId,
|
||||
proposition
|
||||
}: PropositionFormModalProps) {
|
||||
const initialData = {
|
||||
title: '',
|
||||
description: '',
|
||||
author_first_name: mode === 'add' ? 'admin' : '',
|
||||
author_last_name: mode === 'add' ? 'admin' : '',
|
||||
author_email: mode === 'add' ? 'admin@example.com' : ''
|
||||
};
|
||||
|
||||
const { formData, setFormData, loading, setLoading, error, setError, handleChange, resetForm } = useFormState(initialData);
|
||||
|
||||
useEffect(() => {
|
||||
if (proposition && mode === 'edit') {
|
||||
setFormData({
|
||||
title: proposition.title,
|
||||
description: proposition.description,
|
||||
author_first_name: proposition.author_first_name,
|
||||
author_last_name: proposition.author_last_name,
|
||||
author_email: proposition.author_email
|
||||
});
|
||||
}
|
||||
}, [proposition, mode, setFormData]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
if (mode === 'add' && campaignId) {
|
||||
await propositionService.create({
|
||||
campaign_id: campaignId,
|
||||
title: formData.title,
|
||||
description: formData.description,
|
||||
author_first_name: formData.author_first_name,
|
||||
author_last_name: formData.author_last_name,
|
||||
author_email: formData.author_email
|
||||
});
|
||||
} else if (mode === 'edit' && proposition) {
|
||||
await propositionService.update(proposition.id, {
|
||||
title: formData.title,
|
||||
description: formData.description,
|
||||
author_first_name: formData.author_first_name,
|
||||
author_last_name: formData.author_last_name,
|
||||
author_email: formData.author_email
|
||||
});
|
||||
}
|
||||
|
||||
onSuccess();
|
||||
if (mode === 'add') {
|
||||
resetForm();
|
||||
}
|
||||
} catch (err: any) {
|
||||
const operation = mode === 'add' ? 'la création de la proposition' : 'la modification de la proposition';
|
||||
setError(handleFormError(err, operation));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (mode === 'add') {
|
||||
resetForm();
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
const isEditMode = mode === 'edit';
|
||||
if (isEditMode && !proposition) return null;
|
||||
|
||||
return (
|
||||
<FormModal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
onSubmit={handleSubmit}
|
||||
title={isEditMode ? "Modifier la proposition" : "Ajouter une proposition"}
|
||||
description={
|
||||
isEditMode
|
||||
? "Modifiez les détails de cette proposition."
|
||||
: "Créez une nouvelle proposition pour cette campagne de budget participatif."
|
||||
}
|
||||
loading={loading}
|
||||
error={error}
|
||||
submitText={isEditMode ? "Modifier la proposition" : "Créer la proposition"}
|
||||
loadingText={isEditMode ? "Modification..." : "Création..."}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Titre de la proposition *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
name="title"
|
||||
value={formData.title}
|
||||
onChange={handleChange}
|
||||
placeholder="Ex: Installation de bancs dans le parc"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MarkdownEditor
|
||||
value={formData.description}
|
||||
onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
|
||||
placeholder="Décrivez votre proposition en détail..."
|
||||
label="Description *"
|
||||
maxLength={2000}
|
||||
/>
|
||||
|
||||
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
|
||||
<h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
|
||||
Informations de l'auteur
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="author_first_name">Prénom *</Label>
|
||||
<Input
|
||||
id="author_first_name"
|
||||
name="author_first_name"
|
||||
value={formData.author_first_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Prénom"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="author_last_name">Nom *</Label>
|
||||
<Input
|
||||
id="author_last_name"
|
||||
name="author_last_name"
|
||||
value={formData.author_last_name}
|
||||
onChange={handleChange}
|
||||
placeholder="Nom"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 mt-3">
|
||||
<Label htmlFor="author_email">Email *</Label>
|
||||
<Input
|
||||
id="author_email"
|
||||
name="author_email"
|
||||
type="email"
|
||||
value={formData.author_email}
|
||||
onChange={handleChange}
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormModal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user