feat: v8 - skill itinova-user-management (3 profils admin/standard/readonly, logo FEHAP, login/email)
This commit is contained in:
Manus Deploy
@@ -1,87 +1,135 @@
|
||||
import { getLoginUrl } from "@/const";
|
||||
import { useLocation } from "wouter";
|
||||
import { Building2, KeyRound, ExternalLink } from "lucide-react";
|
||||
import { KeyRound, ExternalLink } from "lucide-react";
|
||||
|
||||
const FEHAP_LOGO = "/manus-storage/logoFEHAP_69ddd0ee.PNG";
|
||||
const SANTINOVA_LOGO_TEXT = "Santinova Soft";
|
||||
|
||||
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 className="min-h-screen flex bg-background">
|
||||
{/* ── Colonne gauche : branding SONUM ── */}
|
||||
<div className="hidden lg:flex flex-col justify-between w-1/2 bg-primary px-14 py-12">
|
||||
<div>
|
||||
{/* Logo FEHAP */}
|
||||
<img
|
||||
src={FEHAP_LOGO}
|
||||
alt="FEHAP – Santé Social, Privé Solidaire"
|
||||
className="h-16 object-contain bg-white rounded-xl px-3 py-2 shadow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-white">
|
||||
<h1 className="text-5xl font-bold mb-4" style={{ fontFamily: "'Playfair Display', serif" }}>
|
||||
SONUM
|
||||
</h1>
|
||||
<p className="text-lg text-white/80 max-w-sm leading-relaxed">
|
||||
Cartographie des Solutions Numériques des établissements FEHAP
|
||||
</p>
|
||||
<div className="mt-8 space-y-3 text-sm text-white/70">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white/50" />
|
||||
Référencement des logiciels métiers
|
||||
</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 className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white/50" />
|
||||
Cartographie par établissement et région
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white/50" />
|
||||
Mise en relation entre adhérents
|
||||
</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
|
||||
</div>
|
||||
|
||||
<div className="text-white/40 text-xs">
|
||||
© {new Date().getFullYear()} FEHAP — Tous droits réservés
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Colonne droite : formulaire de connexion ── */}
|
||||
<div className="flex flex-col justify-between flex-1 px-8 py-12 lg:px-16">
|
||||
{/* Logo FEHAP en haut (mobile + desktop) */}
|
||||
<div className="flex justify-center lg:justify-end">
|
||||
<img
|
||||
src={FEHAP_LOGO}
|
||||
alt="FEHAP"
|
||||
className="h-12 object-contain bg-white rounded-lg px-2 py-1 shadow-sm border border-border"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Formulaire centré */}
|
||||
<div className="w-full max-w-sm mx-auto">
|
||||
{/* Titre mobile */}
|
||||
<div className="text-center mb-8 lg:hidden">
|
||||
<h1 className="text-3xl font-bold text-primary" style={{ fontFamily: "'Playfair Display', serif" }}>
|
||||
SONUM
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Cartographie des Solutions Numériques
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-2">Connexion</h2>
|
||||
<p className="text-sm text-muted-foreground mb-8">
|
||||
Choisissez votre mode d'authentification
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<span className="text-white/50 group-hover:text-white/80 transition-colors text-lg">→</span>
|
||||
</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">
|
||||
Identifiant / email et mot de passe
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-muted-foreground group-hover:text-primary transition-colors text-lg">→</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
{/* Pied de page : powered by Santinova */}
|
||||
<div className="flex justify-center lg:justify-end items-center gap-2 mt-8">
|
||||
<span className="text-xs text-muted-foreground">powered by</span>
|
||||
<span className="text-xs font-semibold text-foreground/70">{SANTINOVA_LOGO_TEXT}</span>
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user