Checkpoint: Évolution v2 complète : nouveau profil Adhérent FEHAP, connexion locale par email/mot de passe (bcrypt), création manuelle d'utilisateurs par les gestionnaires, affectation d'établissements aux adhérents, page de choix de connexion (/login), refonte de la page Admin avec CRUD complet. 33 tests Vitest passés, zéro erreur TypeScript.
This commit is contained in:
Manus
@@ -5,19 +5,42 @@ import {
|
||||
Building2,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Key,
|
||||
Pencil,
|
||||
Plus,
|
||||
Shield,
|
||||
User,
|
||||
Trash2,
|
||||
UserCheck,
|
||||
Users,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { useLocation } from "wouter";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
type SonumRole = "referent" | "gestionnaire" | "adherent";
|
||||
|
||||
const ROLE_LABELS: Record<SonumRole, string> = {
|
||||
referent: "Référent numérique",
|
||||
gestionnaire: "Gestionnaire SONUM",
|
||||
adherent: "Adhérent FEHAP",
|
||||
};
|
||||
|
||||
const ROLE_COLORS: Record<SonumRole, string> = {
|
||||
referent: "bg-primary/10 text-primary border-primary/20",
|
||||
gestionnaire: "bg-accent/10 text-accent border-accent/20",
|
||||
adherent: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||
};
|
||||
|
||||
// ─── Page principale ──────────────────────────────────────────────────────────
|
||||
|
||||
export default function Admin() {
|
||||
const { user } = useAuth();
|
||||
const [, navigate] = useLocation();
|
||||
const [activeTab, setActiveTab] = useState<"users" | "etablissements">("users");
|
||||
const isGestionnaire = user?.sonumRole === "gestionnaire" || user?.role === "admin";
|
||||
|
||||
if (!isGestionnaire) {
|
||||
@@ -33,115 +56,487 @@ export default function Admin() {
|
||||
|
||||
return (
|
||||
<SonumLayout>
|
||||
<div className="p-6 lg:p-8 max-w-6xl mx-auto">
|
||||
<div className="p-6 lg:p-8 max-w-7xl mx-auto">
|
||||
{/* En-tête */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-foreground mb-1">Administration SONUM</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Gestion des utilisateurs, des établissements et du référentiel
|
||||
Gestion des utilisateurs, des établissements et des affectations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Gestion des utilisateurs */}
|
||||
<div className="lg:col-span-2">
|
||||
<UsersPanel />
|
||||
</div>
|
||||
|
||||
{/* Gestion des établissements */}
|
||||
<div className="lg:col-span-2">
|
||||
<EtablissementsPanel />
|
||||
</div>
|
||||
{/* Onglets */}
|
||||
<div className="flex gap-1 p-1 bg-muted rounded-xl mb-6 w-fit">
|
||||
{(["users", "etablissements"] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||
activeTab === tab
|
||||
? "bg-card text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{tab === "users" ? <Users size={15} /> : <Building2 size={15} />}
|
||||
{tab === "users" ? "Utilisateurs" : "Établissements"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeTab === "users" && <UsersPanel />}
|
||||
{activeTab === "etablissements" && <EtablissementsPanel />}
|
||||
</div>
|
||||
</SonumLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Panel Utilisateurs ───────────────────────────────────────────────────────
|
||||
|
||||
function UsersPanel() {
|
||||
const utils = trpc.useUtils();
|
||||
const usersQuery = trpc.admin.users.useQuery();
|
||||
const updateRoleMutation = trpc.admin.updateRole.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Rôle mis à jour");
|
||||
usersQuery.refetch();
|
||||
},
|
||||
const etablissementsQuery = trpc.etablissements.all.useQuery();
|
||||
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [expandedAffectations, setExpandedAffectations] = useState<number | null>(null);
|
||||
const [showPasswordFor, setShowPasswordFor] = useState<number | null>(null);
|
||||
|
||||
// Formulaire de création
|
||||
const [createForm, setCreateForm] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
sonumRole: "referent" as SonumRole,
|
||||
password: "",
|
||||
showPassword: false,
|
||||
});
|
||||
|
||||
// Formulaire d'édition
|
||||
const [editForm, setEditForm] = useState<{
|
||||
name: string;
|
||||
email: string;
|
||||
sonumRole: SonumRole;
|
||||
}>({ name: "", email: "", sonumRole: "referent" });
|
||||
|
||||
// Formulaire de réinitialisation de mot de passe
|
||||
const [resetPasswordForm, setResetPasswordForm] = useState({ userId: 0, password: "", show: false });
|
||||
|
||||
const refetchAll = () => {
|
||||
utils.admin.users.invalidate();
|
||||
};
|
||||
|
||||
const createMutation = trpc.admin.createUser.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Utilisateur créé avec succès");
|
||||
setShowCreate(false);
|
||||
setCreateForm({ name: "", email: "", sonumRole: "referent", password: "", showPassword: false });
|
||||
refetchAll();
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const updateMutation = trpc.admin.updateUser.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Utilisateur mis à jour");
|
||||
setEditingId(null);
|
||||
refetchAll();
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const deleteMutation = trpc.admin.deleteUser.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Utilisateur supprimé");
|
||||
refetchAll();
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const resetPasswordMutation = trpc.admin.resetPassword.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Mot de passe réinitialisé");
|
||||
setResetPasswordForm({ userId: 0, password: "", show: false });
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const setAffectationsMutation = trpc.admin.setAffectations.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Affectations mises à jour");
|
||||
refetchAll();
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const startEdit = (u: any) => {
|
||||
setEditingId(u.id);
|
||||
setEditForm({ name: u.name ?? "", email: u.email ?? "", sonumRole: u.sonumRole ?? "referent" });
|
||||
};
|
||||
|
||||
const toggleAffectation = (userId: number, etablissementId: number, currentIds: number[]) => {
|
||||
const newIds = currentIds.includes(etablissementId)
|
||||
? currentIds.filter((id) => id !== etablissementId)
|
||||
: [...currentIds, etablissementId];
|
||||
setAffectationsMutation.mutate({ userId, etablissementIds: newIds });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-card rounded-xl border border-border shadow-sm overflow-hidden">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-border">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="space-y-6">
|
||||
{/* Bouton créer */}
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => setShowCreate(!showCreate)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors shadow-sm"
|
||||
>
|
||||
<Plus size={15} />
|
||||
Créer un utilisateur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Formulaire de création */}
|
||||
{showCreate && (
|
||||
<div className="bg-card border border-primary/20 rounded-xl p-6 shadow-sm">
|
||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<UserCheck size={16} className="text-primary" />
|
||||
Nouvel utilisateur
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-foreground mb-1.5">Nom complet *</label>
|
||||
<input
|
||||
value={createForm.name}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, name: e.target.value }))}
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30"
|
||||
placeholder="Prénom Nom"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-foreground mb-1.5">Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
value={createForm.email}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, email: e.target.value }))}
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30"
|
||||
placeholder="prenom.nom@etablissement.fr"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-foreground mb-1.5">Profil SONUM *</label>
|
||||
<select
|
||||
value={createForm.sonumRole}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, sonumRole: e.target.value as SonumRole }))}
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30"
|
||||
>
|
||||
<option value="referent">Référent numérique</option>
|
||||
<option value="gestionnaire">Gestionnaire SONUM</option>
|
||||
<option value="adherent">Adhérent FEHAP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-foreground mb-1.5">
|
||||
Mot de passe * <span className="text-muted-foreground font-normal">(min. 8 caractères)</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={createForm.showPassword ? "text" : "password"}
|
||||
value={createForm.password}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, password: e.target.value }))}
|
||||
className="w-full px-3 py-2 pr-9 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreateForm((f) => ({ ...f, showPassword: !f.showPassword }))}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{createForm.showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowCreate(false)}
|
||||
className="px-3 py-1.5 text-xs font-medium border border-border rounded-lg text-foreground hover:bg-muted"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={() => createMutation.mutate(createForm)}
|
||||
disabled={!createForm.name.trim() || !createForm.email.trim() || createForm.password.length < 8 || createMutation.isPending}
|
||||
className="flex items-center gap-1.5 px-4 py-1.5 text-xs font-medium bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50 shadow-sm"
|
||||
>
|
||||
<Check size={13} />
|
||||
{createMutation.isPending ? "Création..." : "Créer l'utilisateur"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tableau des utilisateurs */}
|
||||
<div className="bg-card rounded-xl border border-border shadow-sm overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-5 py-4 border-b border-border">
|
||||
<Users size={18} className="text-primary" />
|
||||
<h2 className="font-semibold text-foreground">Utilisateurs</h2>
|
||||
<span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
|
||||
{usersQuery.data?.length ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{usersQuery.isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-muted/20">
|
||||
<th className="text-left px-5 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Utilisateur</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden md:table-cell">Email</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Profil</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden lg:table-cell">Connexion</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden xl:table-cell">Établissements</th>
|
||||
<th className="text-right px-5 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{usersQuery.data?.map((u) => {
|
||||
const isEditing = editingId === u.id;
|
||||
const affectedIds = (u.etablissements ?? []).map((e: any) => e.id);
|
||||
const isExpanded = expandedAffectations === u.id;
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr key={u.id} className="hover:bg-muted/20 transition-colors">
|
||||
<td className="px-5 py-3.5">
|
||||
{isEditing ? (
|
||||
<input
|
||||
value={editForm.name}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, name: e.target.value }))}
|
||||
className="w-full px-2 py-1 text-sm bg-background border border-primary/40 rounded-md focus:outline-none focus:ring-1 focus:ring-primary/30"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center text-xs font-semibold text-primary flex-shrink-0">
|
||||
{u.name?.charAt(0)?.toUpperCase() ?? "U"}
|
||||
</div>
|
||||
<span className="font-medium text-foreground">{u.name ?? "—"}</span>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3.5 hidden md:table-cell">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="email"
|
||||
value={editForm.email}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, email: e.target.value }))}
|
||||
className="w-full px-2 py-1 text-sm bg-background border border-primary/40 rounded-md focus:outline-none focus:ring-1 focus:ring-primary/30"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-xs">{u.email ?? "—"}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3.5">
|
||||
{isEditing ? (
|
||||
<select
|
||||
value={editForm.sonumRole}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, sonumRole: e.target.value as SonumRole }))}
|
||||
className="text-xs px-2 py-1.5 rounded-lg border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary/30"
|
||||
>
|
||||
<option value="referent">Référent numérique</option>
|
||||
<option value="gestionnaire">Gestionnaire SONUM</option>
|
||||
<option value="adherent">Adhérent FEHAP</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className={`text-xs px-2.5 py-1 rounded-full border font-medium ${ROLE_COLORS[u.sonumRole as SonumRole] ?? ROLE_COLORS.referent}`}>
|
||||
{ROLE_LABELS[u.sonumRole as SonumRole] ?? u.sonumRole}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3.5 hidden lg:table-cell text-muted-foreground text-xs">
|
||||
<span className={`text-xs px-2 py-0.5 rounded border ${u.loginMethod === "local" ? "bg-amber-50 text-amber-700 border-amber-200" : "bg-blue-50 text-blue-700 border-blue-200"}`}>
|
||||
{u.loginMethod === "local" ? "Local" : u.loginMethod ?? "OAuth"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3.5 hidden xl:table-cell">
|
||||
{u.sonumRole === "adherent" ? (
|
||||
<button
|
||||
onClick={() => setExpandedAffectations(isExpanded ? null : u.id)}
|
||||
className="flex items-center gap-1.5 text-xs text-primary hover:text-primary/80 font-medium transition-colors"
|
||||
>
|
||||
<Building2 size={12} />
|
||||
{affectedIds.length} établissement{affectedIds.length !== 1 ? "s" : ""}
|
||||
{isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-5 py-3.5">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
{isEditing ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => updateMutation.mutate({ userId: u.id, ...editForm })}
|
||||
disabled={updateMutation.isPending}
|
||||
className="p-1.5 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
|
||||
title="Enregistrer"
|
||||
>
|
||||
<Check size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingId(null)}
|
||||
className="p-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-muted/80 transition-colors"
|
||||
title="Annuler"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={() => startEdit(u)}
|
||||
className="p-1.5 rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
|
||||
title="Modifier"
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setResetPasswordForm({ userId: u.id, password: "", show: true })}
|
||||
className="p-1.5 rounded-lg text-muted-foreground hover:bg-amber-50 hover:text-amber-600 transition-colors"
|
||||
title="Réinitialiser le mot de passe"
|
||||
>
|
||||
<Key size={14} />
|
||||
</button>
|
||||
{u.sonumRole === "adherent" && (
|
||||
<button
|
||||
onClick={() => setExpandedAffectations(isExpanded ? null : u.id)}
|
||||
className="p-1.5 rounded-lg text-muted-foreground hover:bg-emerald-50 hover:text-emerald-600 transition-colors xl:hidden"
|
||||
title="Gérer les affectations"
|
||||
>
|
||||
<Building2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Supprimer l'utilisateur "${u.name}" ?`)) {
|
||||
deleteMutation.mutate({ userId: u.id });
|
||||
}
|
||||
}}
|
||||
className="p-1.5 rounded-lg text-muted-foreground hover:bg-red-50 hover:text-red-500 transition-colors"
|
||||
title="Supprimer"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Panneau d'affectations (adhérent uniquement) */}
|
||||
{isExpanded && u.sonumRole === "adherent" && (
|
||||
<tr key={`aff-${u.id}`}>
|
||||
<td colSpan={6} className="px-5 py-4 bg-emerald-50/50 border-b border-emerald-100">
|
||||
<div className="max-w-2xl">
|
||||
<p className="text-xs font-semibold text-emerald-800 mb-3 flex items-center gap-1.5">
|
||||
<Building2 size={13} />
|
||||
Établissements affectés à {u.name}
|
||||
</p>
|
||||
{etablissementsQuery.isLoading ? (
|
||||
<div className="text-xs text-muted-foreground">Chargement...</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
{etablissementsQuery.data?.map((etab) => {
|
||||
const isAffected = affectedIds.includes(etab.id);
|
||||
return (
|
||||
<button
|
||||
key={etab.id}
|
||||
onClick={() => toggleAffectation(u.id, etab.id, affectedIds)}
|
||||
disabled={setAffectationsMutation.isPending}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-xs font-medium transition-all text-left ${
|
||||
isAffected
|
||||
? "bg-emerald-100 border-emerald-300 text-emerald-800"
|
||||
: "bg-white border-border text-muted-foreground hover:border-emerald-200 hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
<div className={`w-4 h-4 rounded flex items-center justify-center flex-shrink-0 ${isAffected ? "bg-emerald-600" : "bg-muted border border-border"}`}>
|
||||
{isAffected && <Check size={10} className="text-white" />}
|
||||
</div>
|
||||
<span className="truncate">{etab.nom}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{usersQuery.isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-muted/20">
|
||||
<th className="text-left px-5 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Utilisateur</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden md:table-cell">Email</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Rôle SONUM</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden lg:table-cell">Dernière connexion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{usersQuery.data?.map((u) => (
|
||||
<tr key={u.id} className="hover:bg-muted/20 transition-colors">
|
||||
<td className="px-5 py-3.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center text-xs font-semibold text-primary">
|
||||
{u.name?.charAt(0)?.toUpperCase() ?? "U"}
|
||||
</div>
|
||||
<span className="font-medium text-foreground">{u.name ?? "—"}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3.5 hidden md:table-cell text-muted-foreground text-xs">{u.email ?? "—"}</td>
|
||||
<td className="px-4 py-3.5">
|
||||
<select
|
||||
value={u.sonumRole ?? "referent"}
|
||||
onChange={(e) =>
|
||||
updateRoleMutation.mutate({
|
||||
userId: u.id,
|
||||
sonumRole: e.target.value as "referent" | "gestionnaire",
|
||||
})
|
||||
}
|
||||
className={`text-xs px-2.5 py-1.5 rounded-lg border font-medium focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all ${
|
||||
u.sonumRole === "gestionnaire"
|
||||
? "bg-accent/10 text-accent border-accent/20"
|
||||
: "bg-primary/10 text-primary border-primary/20"
|
||||
}`}
|
||||
>
|
||||
<option value="referent">Référent numérique</option>
|
||||
<option value="gestionnaire">Gestionnaire SONUM</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-4 py-3.5 hidden lg:table-cell text-muted-foreground text-xs">
|
||||
{u.lastSignedIn
|
||||
? new Date(u.lastSignedIn).toLocaleDateString("fr-FR", { day: "2-digit", month: "short", year: "numeric" })
|
||||
: "—"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Modal réinitialisation mot de passe */}
|
||||
{resetPasswordForm.show && (
|
||||
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-card rounded-2xl border border-border shadow-xl p-6 w-full max-w-sm">
|
||||
<h3 className="font-semibold text-foreground mb-1 flex items-center gap-2">
|
||||
<Key size={16} className="text-amber-500" />
|
||||
Réinitialiser le mot de passe
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground mb-4">
|
||||
Définissez un nouveau mot de passe pour cet utilisateur.
|
||||
</p>
|
||||
<div className="relative mb-4">
|
||||
<input
|
||||
type={showPasswordFor === resetPasswordForm.userId ? "text" : "password"}
|
||||
value={resetPasswordForm.password}
|
||||
onChange={(e) => setResetPasswordForm((f) => ({ ...f, password: e.target.value }))}
|
||||
className="w-full px-3 py-2 pr-9 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30"
|
||||
placeholder="Nouveau mot de passe (min. 8 caractères)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswordFor(showPasswordFor === resetPasswordForm.userId ? null : resetPasswordForm.userId)}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{showPasswordFor === resetPasswordForm.userId ? <EyeOff size={14} /> : <Eye size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setResetPasswordForm({ userId: 0, password: "", show: false })}
|
||||
className="flex-1 px-3 py-2 text-sm font-medium border border-border rounded-lg text-foreground hover:bg-muted"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={() => resetPasswordMutation.mutate({ userId: resetPasswordForm.userId, newPassword: resetPasswordForm.password })}
|
||||
disabled={resetPasswordForm.password.length < 8 || resetPasswordMutation.isPending}
|
||||
className="flex-1 px-3 py-2 text-sm font-medium bg-amber-500 text-white rounded-lg hover:bg-amber-600 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{resetPasswordMutation.isPending ? "Enregistrement..." : "Enregistrer"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Panel Établissements ─────────────────────────────────────────────────────
|
||||
|
||||
function EtablissementsPanel() {
|
||||
const etablissementsQuery = trpc.etablissements.all.useQuery();
|
||||
const usersQuery = trpc.admin.users.useQuery();
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [form, setForm] = useState({
|
||||
nom: "",
|
||||
@@ -149,17 +544,21 @@ function EtablissementsPanel() {
|
||||
region: "",
|
||||
typeActivite: "",
|
||||
tailleEffectifs: "",
|
||||
referentId: undefined as number | undefined,
|
||||
});
|
||||
|
||||
const createMutation = trpc.etablissements.create.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Établissement créé");
|
||||
setShowCreate(false);
|
||||
setForm({ nom: "", finess: "", region: "", typeActivite: "", tailleEffectifs: "" });
|
||||
setForm({ nom: "", finess: "", region: "", typeActivite: "", tailleEffectifs: "", referentId: undefined });
|
||||
etablissementsQuery.refetch();
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const referents = usersQuery.data?.filter((u) => u.sonumRole === "referent" || u.sonumRole === "gestionnaire") ?? [];
|
||||
|
||||
return (
|
||||
<div className="bg-card rounded-xl border border-border shadow-sm overflow-hidden">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-border">
|
||||
@@ -179,11 +578,10 @@ function EtablissementsPanel() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Formulaire de création */}
|
||||
{showCreate && (
|
||||
<div className="px-5 py-4 border-b border-border bg-muted/20">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
|
||||
<div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-3">
|
||||
<div className="sm:col-span-2 lg:col-span-1">
|
||||
<label className="block text-xs font-medium text-foreground mb-1">Nom *</label>
|
||||
<input
|
||||
value={form.nom}
|
||||
@@ -219,6 +617,19 @@ function EtablissementsPanel() {
|
||||
placeholder="MCO, EHPAD..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-foreground mb-1">Référent numérique</label>
|
||||
<select
|
||||
value={form.referentId ?? ""}
|
||||
onChange={(e) => setForm((f) => ({ ...f, referentId: e.target.value ? Number(e.target.value) : undefined }))}
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30"
|
||||
>
|
||||
<option value="">— Non assigné —</option>
|
||||
{referents.map((r) => (
|
||||
<option key={r.id} value={r.id}>{r.name ?? r.email}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
@@ -240,40 +651,65 @@ function EtablissementsPanel() {
|
||||
)}
|
||||
|
||||
{etablissementsQuery.isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto max-h-96 overflow-y-auto">
|
||||
<div className="overflow-x-auto max-h-[500px] overflow-y-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="sticky top-0">
|
||||
<thead className="sticky top-0 z-10">
|
||||
<tr className="border-b border-border bg-muted/30">
|
||||
<th className="text-left px-5 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Établissement</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden md:table-cell">Région</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden lg:table-cell">Type</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden lg:table-cell">Référent</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden xl:table-cell">Référent</th>
|
||||
<th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden xl:table-cell">Adhérents affectés</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{etablissementsQuery.data?.map((etab) => (
|
||||
<tr key={etab.id} className="hover:bg-muted/20 transition-colors">
|
||||
<td className="px-5 py-3">
|
||||
<div className="font-medium text-foreground text-sm">{etab.nom}</div>
|
||||
{etab.finess && <div className="text-xs text-muted-foreground">FINESS : {etab.finess}</div>}
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden md:table-cell text-muted-foreground text-sm">{etab.region ?? "—"}</td>
|
||||
<td className="px-4 py-3 hidden lg:table-cell">
|
||||
{etab.typeActivite ? (
|
||||
<span className="text-xs bg-secondary text-secondary-foreground px-2 py-0.5 rounded border border-border">
|
||||
{etab.typeActivite}
|
||||
</span>
|
||||
) : <span className="text-muted-foreground text-xs">—</span>}
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden lg:table-cell text-muted-foreground text-xs">
|
||||
{etab.referentId ? `Réf. #${etab.referentId}` : <span className="italic">Non assigné</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{etablissementsQuery.data?.map((etab) => {
|
||||
const adherentsAffectes = usersQuery.data?.filter(
|
||||
(u) => u.sonumRole === "adherent" && (u.etablissements ?? []).some((e: any) => e.id === etab.id)
|
||||
) ?? [];
|
||||
const referent = usersQuery.data?.find((u) => u.id === etab.referentId);
|
||||
|
||||
return (
|
||||
<tr key={etab.id} className="hover:bg-muted/20 transition-colors">
|
||||
<td className="px-5 py-3">
|
||||
<div className="font-medium text-foreground text-sm">{etab.nom}</div>
|
||||
{etab.finess && <div className="text-xs text-muted-foreground">FINESS : {etab.finess}</div>}
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden md:table-cell text-muted-foreground text-sm">{etab.region ?? "—"}</td>
|
||||
<td className="px-4 py-3 hidden lg:table-cell">
|
||||
{etab.typeActivite ? (
|
||||
<span className="text-xs bg-secondary text-secondary-foreground px-2 py-0.5 rounded border border-border">
|
||||
{etab.typeActivite}
|
||||
</span>
|
||||
) : <span className="text-muted-foreground text-xs">—</span>}
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden xl:table-cell text-muted-foreground text-xs">
|
||||
{referent ? (
|
||||
<span className="font-medium text-foreground">{referent.name ?? referent.email}</span>
|
||||
) : (
|
||||
<span className="italic">Non assigné</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 hidden xl:table-cell">
|
||||
{adherentsAffectes.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{adherentsAffectes.map((a) => (
|
||||
<span key={a.id} className="text-xs bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5 rounded-full">
|
||||
{a.name ?? a.email}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">Aucun</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
88
client/src/pages/Login.tsx
Normal file
88
client/src/pages/Login.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import { getLoginUrl } from "@/const";
|
||||
import { useLocation } from "wouter";
|
||||
import { Building2, KeyRound, ExternalLink } from "lucide-react";
|
||||
|
||||
export default function Login() {
|
||||
const [, navigate] = useLocation();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background px-4">
|
||||
<div className="w-full max-w-md">
|
||||
{/* En-tête */}
|
||||
<div className="text-center mb-10">
|
||||
<div className="inline-flex items-center gap-3 mb-5">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary flex items-center justify-center shadow-lg">
|
||||
<Building2 size={26} className="text-white" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-xs font-semibold text-muted-foreground uppercase tracking-widest">FEHAP</div>
|
||||
<div
|
||||
className="text-3xl font-bold text-primary leading-tight"
|
||||
style={{ fontFamily: "'Playfair Display', serif" }}
|
||||
>
|
||||
SONUM
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold text-foreground">Bienvenue</h1>
|
||||
<p className="text-sm text-muted-foreground mt-2 max-w-xs mx-auto">
|
||||
Cartographie des Solutions Numériques des établissements FEHAP
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Options de connexion */}
|
||||
<div className="space-y-4">
|
||||
{/* Connexion via espace adhérent FEHAP */}
|
||||
<a
|
||||
href={getLoginUrl()}
|
||||
className="group flex items-center gap-4 p-5 bg-primary text-white rounded-2xl shadow-md hover:bg-primary/90 transition-all hover:shadow-lg hover:-translate-y-0.5"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center flex-shrink-0">
|
||||
<ExternalLink size={20} className="text-white" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<div className="font-semibold text-base">Espace adhérent FEHAP</div>
|
||||
<div className="text-sm text-white/75 mt-0.5">
|
||||
Connexion via votre compte FEHAP existant
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-white/50 group-hover:text-white/80 transition-colors">
|
||||
→
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Séparateur */}
|
||||
<div className="flex items-center gap-3 py-1">
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
<span className="text-xs text-muted-foreground font-medium">ou</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
</div>
|
||||
|
||||
{/* Connexion locale */}
|
||||
<button
|
||||
onClick={() => navigate("/login/local")}
|
||||
className="group w-full flex items-center gap-4 p-5 bg-card border border-border rounded-2xl shadow-sm hover:border-primary/40 hover:shadow-md transition-all hover:-translate-y-0.5 text-left"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-xl bg-muted flex items-center justify-center flex-shrink-0">
|
||||
<KeyRound size={20} className="text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-base text-foreground">Connexion locale</div>
|
||||
<div className="text-sm text-muted-foreground mt-0.5">
|
||||
Email et mot de passe fournis par un gestionnaire SONUM
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-muted-foreground group-hover:text-primary transition-colors">
|
||||
→
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Pied de page */}
|
||||
<p className="text-center text-xs text-muted-foreground mt-8">
|
||||
En vous connectant, vous acceptez les conditions générales d'utilisation de la plateforme SONUM.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
151
client/src/pages/LoginLocal.tsx
Normal file
151
client/src/pages/LoginLocal.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import { getLoginUrl } from "@/const";
|
||||
import { useState } from "react";
|
||||
import { useLocation } from "wouter";
|
||||
import { toast } from "sonner";
|
||||
import { Eye, EyeOff, Lock, Mail, ArrowLeft, ExternalLink } from "lucide-react";
|
||||
|
||||
export default function LoginLocal() {
|
||||
const [, navigate] = useLocation();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const loginMutation = trpc.auth.loginLocal.useMutation({
|
||||
onSuccess: () => {
|
||||
// Forcer un rechargement complet pour réinitialiser le contexte auth
|
||||
window.location.href = "/";
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(err.message || "Email ou mot de passe incorrect");
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!email || !password) {
|
||||
toast.error("Veuillez renseigner votre email et votre mot de passe");
|
||||
return;
|
||||
}
|
||||
loginMutation.mutate({ email, password });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background px-4">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center shadow-md">
|
||||
<Lock size={22} className="text-white" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-xs font-semibold text-muted-foreground uppercase tracking-widest">FEHAP</div>
|
||||
<div
|
||||
className="text-2xl font-bold text-primary leading-tight"
|
||||
style={{ fontFamily: "'Playfair Display', serif" }}
|
||||
>
|
||||
SONUM
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold text-foreground">Connexion locale</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Connectez-vous avec votre email et votre mot de passe
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Formulaire */}
|
||||
<div className="bg-card rounded-2xl border border-border shadow-sm p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Adresse email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="prenom.nom@etablissement.fr"
|
||||
autoComplete="email"
|
||||
className="w-full pl-10 pr-4 py-2.5 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mot de passe */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">
|
||||
Mot de passe
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
autoComplete="current-password"
|
||||
className="w-full pl-10 pr-10 py-2.5 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bouton connexion */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loginMutation.isPending}
|
||||
className="w-full py-2.5 px-4 bg-primary text-white rounded-lg font-medium text-sm hover:bg-primary/90 transition-colors shadow-sm disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{loginMutation.isPending ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
Connexion en cours...
|
||||
</>
|
||||
) : (
|
||||
"Se connecter"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Liens */}
|
||||
<div className="mt-6 space-y-3 text-center">
|
||||
<button
|
||||
onClick={() => navigate("/login")}
|
||||
className="flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mx-auto"
|
||||
>
|
||||
<ArrowLeft size={14} />
|
||||
Retour aux options de connexion
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
<span className="text-xs text-muted-foreground">ou</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={getLoginUrl()}
|
||||
className="flex items-center justify-center gap-2 text-sm text-primary hover:text-primary/80 font-medium transition-colors"
|
||||
>
|
||||
<ExternalLink size={14} />
|
||||
Se connecter via l'espace adhérent FEHAP
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user