efaaf16f60
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Refactored metadata for contacts, administration, and Ulticards pages to utilize dynamic app names and descriptions. - Introduced new product pages for Ultiai, Ultical, Ulticards, Ultidrive, Ultimail, and Ultimeet with appropriate metadata. - Enhanced layout components to ensure consistent styling and functionality across new product sections. - Updated various components to replace hardcoded labels with dynamic references to improve maintainability and consistency.
97 lines
4.3 KiB
TypeScript
97 lines
4.3 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
|
|
const ACCENT = "#7C3AED"
|
|
|
|
type Provider = {
|
|
name: string
|
|
type: string
|
|
icon: string
|
|
brandLogo?: boolean
|
|
enabled: boolean
|
|
status: "synced" | "pending"
|
|
}
|
|
|
|
const PROVIDERS: Provider[] = [
|
|
{ name: "Google Workspace", type: "OAuth", icon: "logos:google-icon", brandLogo: true, enabled: true, status: "synced" },
|
|
{ name: "Azure AD / Entra", type: "SAML", icon: "logos:microsoft-icon", brandLogo: true, enabled: true, status: "synced" },
|
|
{ name: "Active Directory", type: "LDAP", icon: "mdi:server-network", enabled: true, status: "pending" },
|
|
{ name: "Okta", type: "SAML", icon: "logos:okta-icon", brandLogo: true, enabled: false, status: "pending" },
|
|
]
|
|
|
|
const RESTRICTIONS = ["acme.com", "filiale.fr", "ulti-users", "ulti-admins"]
|
|
|
|
/** Aperçu statique des fournisseurs d'identité (SSO) gérés via Authentik. */
|
|
export function AdminIdentityDemo() {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
|
|
<div className="flex items-center gap-2.5 border-b border-[var(--landing-line)] px-4 py-3">
|
|
<Icon icon="mdi:account-key-outline" className="size-5" style={{ color: ACCENT }} aria-hidden />
|
|
<span className="text-sm font-semibold tracking-tight">Fournisseurs d'identité</span>
|
|
<span className="ml-auto text-[11px] font-medium text-[var(--landing-muted)]">SSO · Authentik</span>
|
|
</div>
|
|
|
|
<ul className="divide-y divide-[var(--landing-line)]">
|
|
{PROVIDERS.map((p) => (
|
|
<li key={p.name} className="flex items-center gap-3 px-4 py-2.5">
|
|
<span
|
|
className={
|
|
p.brandLogo
|
|
? "flex size-8 shrink-0 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-[var(--landing-line)]"
|
|
: "flex size-8 shrink-0 items-center justify-center rounded-lg"
|
|
}
|
|
style={p.brandLogo ? undefined : { backgroundColor: `${ACCENT}1f`, color: ACCENT }}
|
|
>
|
|
<Icon icon={p.icon} className={p.brandLogo ? "size-5" : "size-4"} aria-hidden />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-[var(--landing-fg)]">{p.name}</p>
|
|
<p className="text-[11px] text-[var(--landing-muted)]">{p.type}</p>
|
|
</div>
|
|
<span
|
|
className="rounded-full px-2 py-0.5 text-[10px] font-medium"
|
|
style={
|
|
p.status === "synced"
|
|
? { backgroundColor: `${ACCENT}1f`, color: ACCENT }
|
|
: { backgroundColor: "var(--landing-chip)", color: "var(--landing-muted)" }
|
|
}
|
|
>
|
|
{p.status === "synced" ? "Synchronisé" : "En attente"}
|
|
</span>
|
|
<Icon
|
|
icon={p.enabled ? "mdi:toggle-switch" : "mdi:toggle-switch-off-outline"}
|
|
className="size-6 shrink-0"
|
|
style={{ color: p.enabled ? ACCENT : "var(--landing-muted)" }}
|
|
aria-hidden
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="border-t border-[var(--landing-line)] bg-[var(--landing-bg)]/60 p-4">
|
|
<p className="mb-2 flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:shield-account-outline" className="size-3.5" aria-hidden />
|
|
Restrictions d'accès & groupes par défaut
|
|
</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{RESTRICTIONS.map((r) => (
|
|
<span
|
|
key={r}
|
|
className="rounded-full border border-[var(--landing-line)] bg-[var(--landing-chip)]/50 px-2 py-0.5 text-xs text-[var(--landing-fg)]"
|
|
>
|
|
{r}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
|
|
Aperçu statique — OAuth, SAML et LDAP/AD, provisioning des groupes et domaines autorisés.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|