Checkpoint: Ajout de l'authentification formateur et upload logo/signature pour attestations
## Authentification formateur - Ajout du rôle "formateur" dans l'enum de la table users - Ajout du champ formateurId pour lier un compte à un formateur - Mise à jour de l'interface AdminUsers avec sélection du formateur - Redirection automatique selon le rôle (admin → /admin, formateur → /formateur) - Badges et filtres mis à jour pour inclure le rôle formateur ## Upload logo et signature - Création du composant ImageUpload.tsx avec prévisualisation - Création de l'endpoint /api/upload-image avec multer pour l'upload vers S3 - Intégration dans AdminAttestations.tsx - Modification du service PDF pour inclure le logo (en haut à droite) et la signature (en bas) - Mise à jour des procédures tRPC pour accepter logoUrl, logoS3Key, signatureUrl, signatureS3Key
This commit is contained in:
Manus
160
client/src/components/ImageUpload.tsx
Normal file
160
client/src/components/ImageUpload.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Upload, X, Loader2, Image as ImageIcon } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface ImageUploadProps {
|
||||
label: string;
|
||||
currentImageUrl?: string | null;
|
||||
onUploadComplete: (url: string, s3Key: string) => void;
|
||||
accept?: string;
|
||||
maxSizeMB?: number;
|
||||
}
|
||||
|
||||
export default function ImageUpload({
|
||||
label,
|
||||
currentImageUrl,
|
||||
onUploadComplete,
|
||||
accept = "image/png,image/jpeg,image/jpg",
|
||||
maxSizeMB = 5,
|
||||
}: ImageUploadProps) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(currentImageUrl || null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// Vérifier la taille du fichier
|
||||
const fileSizeMB = file.size / (1024 * 1024);
|
||||
if (fileSizeMB > maxSizeMB) {
|
||||
toast.error(`Le fichier est trop volumineux (max ${maxSizeMB}MB)`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier le type de fichier
|
||||
if (!file.type.startsWith("image/")) {
|
||||
toast.error("Veuillez sélectionner une image");
|
||||
return;
|
||||
}
|
||||
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
// Créer un aperçu local
|
||||
const localPreview = URL.createObjectURL(file);
|
||||
setPreviewUrl(localPreview);
|
||||
|
||||
// Préparer les données pour l'upload
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
// Envoyer le fichier au serveur
|
||||
const response = await fetch("/api/upload-image", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Erreur lors de l'upload");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.url && data.s3Key) {
|
||||
toast.success("Image uploadée avec succès");
|
||||
setPreviewUrl(data.url);
|
||||
onUploadComplete(data.url, data.s3Key);
|
||||
} else {
|
||||
throw new Error(data.message || "Erreur lors de l'upload");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur upload:", error);
|
||||
toast.error("Erreur lors de l'upload de l'image");
|
||||
setPreviewUrl(currentImageUrl || null);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = () => {
|
||||
setPreviewUrl(null);
|
||||
onUploadComplete("", "");
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label>{label}</Label>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Aperçu de l'image */}
|
||||
<div className="flex-shrink-0">
|
||||
{previewUrl ? (
|
||||
<div className="relative group">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Aperçu"
|
||||
className="w-32 h-32 object-contain border rounded-lg bg-gray-50"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="absolute -top-2 -right-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={handleRemove}
|
||||
disabled={uploading}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-32 h-32 border-2 border-dashed rounded-lg flex items-center justify-center bg-gray-50">
|
||||
<ImageIcon className="h-8 w-8 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bouton d'upload */}
|
||||
<div className="flex-1 space-y-2">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={accept}
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
disabled={uploading}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploading}
|
||||
>
|
||||
{uploading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Upload en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
{previewUrl ? "Changer l'image" : "Sélectionner une image"}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Formats acceptés: PNG, JPG, JPEG (max {maxSizeMB}MB)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -46,17 +46,20 @@ export default function AdminUsers() {
|
||||
email: "",
|
||||
username: "",
|
||||
password: "",
|
||||
role: "user" as "user" | "admin",
|
||||
role: "user" as "user" | "admin" | "formateur",
|
||||
formateurId: undefined as number | undefined,
|
||||
});
|
||||
const [editForm, setEditForm] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
username: "",
|
||||
password: "",
|
||||
role: "user" as "user" | "admin",
|
||||
role: "user" as "user" | "admin" | "formateur",
|
||||
formateurId: undefined as number | undefined,
|
||||
});
|
||||
|
||||
const { data: users = [], refetch } = trpc.users.list.useQuery();
|
||||
const { data: formateurs = [] } = trpc.formateurs.list.useQuery();
|
||||
|
||||
const createMutation = trpc.users.create.useMutation({
|
||||
onSuccess: () => {
|
||||
@@ -70,6 +73,7 @@ export default function AdminUsers() {
|
||||
username: "",
|
||||
password: "",
|
||||
role: "user",
|
||||
formateurId: undefined,
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
@@ -137,6 +141,7 @@ export default function AdminUsers() {
|
||||
password: createForm.password || undefined,
|
||||
role: createForm.role,
|
||||
isActive: true,
|
||||
formateurId: createForm.formateurId,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -148,6 +153,7 @@ export default function AdminUsers() {
|
||||
username: user.username || "",
|
||||
password: "", // Toujours vide pour la sécurité
|
||||
role: user.role,
|
||||
formateurId: user.formateurId,
|
||||
});
|
||||
setEditDialogOpen(true);
|
||||
};
|
||||
@@ -161,6 +167,7 @@ export default function AdminUsers() {
|
||||
name: editForm.name || undefined,
|
||||
email: editForm.email || undefined,
|
||||
role: editForm.role,
|
||||
formateurId: editForm.formateurId,
|
||||
};
|
||||
|
||||
if (editForm.username) {
|
||||
@@ -268,6 +275,7 @@ export default function AdminUsers() {
|
||||
<SelectItem value="all">Tous les rôles</SelectItem>
|
||||
<SelectItem value="admin">Administrateur</SelectItem>
|
||||
<SelectItem value="user">Utilisateur</SelectItem>
|
||||
<SelectItem value="formateur">Formateur</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -325,8 +333,8 @@ export default function AdminUsers() {
|
||||
<TableCell>{user.email || "N/A"}</TableCell>
|
||||
<TableCell>{user.username || "N/A"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={user.role === "admin" ? "default" : "secondary"}>
|
||||
{user.role === "admin" ? "Administrateur" : "Utilisateur"}
|
||||
<Badge variant={user.role === "admin" ? "default" : user.role === "formateur" ? "outline" : "secondary"}>
|
||||
{user.role === "admin" ? "Administrateur" : user.role === "formateur" ? "Formateur" : "Utilisateur"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
@@ -452,7 +460,7 @@ export default function AdminUsers() {
|
||||
<Label htmlFor="createRole">Rôle</Label>
|
||||
<Select
|
||||
value={createForm.role}
|
||||
onValueChange={(value: "user" | "admin") =>
|
||||
onValueChange={(value: "user" | "admin" | "formateur") =>
|
||||
setCreateForm({ ...createForm, role: value })
|
||||
}
|
||||
>
|
||||
@@ -462,9 +470,33 @@ export default function AdminUsers() {
|
||||
<SelectContent>
|
||||
<SelectItem value="user">Utilisateur</SelectItem>
|
||||
<SelectItem value="admin">Administrateur</SelectItem>
|
||||
<SelectItem value="formateur">Formateur</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{createForm.role === "formateur" && (
|
||||
<div>
|
||||
<Label htmlFor="createFormateur">Formateur associé</Label>
|
||||
<Select
|
||||
value={createForm.formateurId?.toString() || ""}
|
||||
onValueChange={(value) =>
|
||||
setCreateForm({ ...createForm, formateurId: value ? parseInt(value) : undefined })
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="createFormateur">
|
||||
<SelectValue placeholder="Sélectionner un formateur" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{formateurs.map((formateur: any) => (
|
||||
<SelectItem key={formateur.id} value={formateur.id.toString()}>
|
||||
{formateur.nom}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
@@ -545,7 +577,7 @@ export default function AdminUsers() {
|
||||
<Label htmlFor="editRole">Rôle</Label>
|
||||
<Select
|
||||
value={editForm.role}
|
||||
onValueChange={(value: "user" | "admin") =>
|
||||
onValueChange={(value: "user" | "admin" | "formateur") =>
|
||||
setEditForm({ ...editForm, role: value })
|
||||
}
|
||||
>
|
||||
@@ -555,9 +587,33 @@ export default function AdminUsers() {
|
||||
<SelectContent>
|
||||
<SelectItem value="user">Utilisateur</SelectItem>
|
||||
<SelectItem value="admin">Administrateur</SelectItem>
|
||||
<SelectItem value="formateur">Formateur</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{editForm.role === "formateur" && (
|
||||
<div>
|
||||
<Label htmlFor="editFormateur">Formateur associé</Label>
|
||||
<Select
|
||||
value={editForm.formateurId?.toString() || ""}
|
||||
onValueChange={(value) =>
|
||||
setEditForm({ ...editForm, formateurId: value ? parseInt(value) : undefined })
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="editFormateur">
|
||||
<SelectValue placeholder="Sélectionner un formateur" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{formateurs.map((formateur: any) => (
|
||||
<SelectItem key={formateur.id} value={formateur.id.toString()}>
|
||||
{formateur.nom}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
|
||||
@@ -37,8 +37,12 @@ export default function Login() {
|
||||
|
||||
if (response.ok && data.success) {
|
||||
toast.success("Connexion réussie !");
|
||||
// Rediriger vers le tableau de bord
|
||||
setLocation("/admin");
|
||||
// Rediriger selon le rôle de l'utilisateur
|
||||
if (data.user.role === "formateur") {
|
||||
setLocation("/formateur");
|
||||
} else {
|
||||
setLocation("/admin");
|
||||
}
|
||||
} else {
|
||||
toast.error(data.message || "Identifiant ou mot de passe incorrect");
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { toast } from "sonner";
|
||||
import { FileText, Save } from "lucide-react";
|
||||
import ImageUpload from "@/components/ImageUpload";
|
||||
|
||||
export default function AdminAttestations() {
|
||||
const { data: config, isLoading, refetch } = trpc.attestations.getConfig.useQuery();
|
||||
@@ -17,6 +18,10 @@ export default function AdminAttestations() {
|
||||
nomSignataire: "",
|
||||
fonctionSignataire: "",
|
||||
texteAttestation: "",
|
||||
logoUrl: "",
|
||||
logoS3Key: "",
|
||||
signatureUrl: "",
|
||||
signatureS3Key: "",
|
||||
});
|
||||
|
||||
// Mettre à jour le formulaire quand les données sont chargées
|
||||
@@ -26,6 +31,10 @@ export default function AdminAttestations() {
|
||||
nomSignataire: config.nomSignataire || "",
|
||||
fonctionSignataire: config.fonctionSignataire || "",
|
||||
texteAttestation: config.texteAttestation || "",
|
||||
logoUrl: config.logoUrl || "",
|
||||
logoS3Key: config.logoS3Key || "",
|
||||
signatureUrl: config.signatureUrl || "",
|
||||
signatureS3Key: config.signatureS3Key || "",
|
||||
});
|
||||
}
|
||||
}, [config]);
|
||||
@@ -101,6 +110,32 @@ export default function AdminAttestations() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Logo et signature</CardTitle>
|
||||
<CardDescription>
|
||||
Ajoutez un logo et une signature pour personnaliser vos attestations
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<ImageUpload
|
||||
label="Logo de l'organisation"
|
||||
currentImageUrl={formData.logoUrl}
|
||||
onUploadComplete={(url, s3Key) =>
|
||||
setFormData({ ...formData, logoUrl: url, logoS3Key: s3Key })
|
||||
}
|
||||
/>
|
||||
|
||||
<ImageUpload
|
||||
label="Signature du signataire"
|
||||
currentImageUrl={formData.signatureUrl}
|
||||
onUploadComplete={(url, s3Key) =>
|
||||
setFormData({ ...formData, signatureUrl: url, signatureS3Key: s3Key })
|
||||
}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Texte de l'attestation</CardTitle>
|
||||
@@ -137,6 +172,10 @@ export default function AdminAttestations() {
|
||||
nomSignataire: config.nomSignataire || "",
|
||||
fonctionSignataire: config.fonctionSignataire || "",
|
||||
texteAttestation: config.texteAttestation || "",
|
||||
logoUrl: config.logoUrl || "",
|
||||
logoS3Key: config.logoS3Key || "",
|
||||
signatureUrl: config.signatureUrl || "",
|
||||
signatureS3Key: config.signatureS3Key || "",
|
||||
});
|
||||
}
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user