96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { ExternalLink } from "lucide-react"
|
|
import { SettingsSectionHeader } from "@/components/gmail/settings/settings-section-header"
|
|
import { SettingsSyncBanner } from "@/components/gmail/settings/settings-sync-banner"
|
|
import { useCurrentUser } from "@/lib/api/hooks/use-current-user"
|
|
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"
|
|
import { authentikUserSettingsUrl } from "@/lib/auth/authentik-user-url"
|
|
|
|
const ROLE_LABELS: Record<string, string> = {
|
|
admin: "Administrateur",
|
|
user: "Utilisateur",
|
|
guest: "Invité",
|
|
suspended: "Suspendu",
|
|
}
|
|
|
|
export function ComptePersonalInfoSection() {
|
|
const identity = useChromeIdentity()
|
|
const { data: user, isFetching, isError, refetch } = useCurrentUser()
|
|
const idpUrl = authentikUserSettingsUrl()
|
|
|
|
const name = user?.name || identity?.name || "—"
|
|
const email = user?.email || identity?.email || "—"
|
|
|
|
return (
|
|
<>
|
|
<SettingsSectionHeader
|
|
title="Informations personnelles"
|
|
description="Informations de votre compte Ulti, partagées par toutes les applications de la suite."
|
|
/>
|
|
<SettingsSyncBanner
|
|
isFetching={isFetching}
|
|
isError={isError}
|
|
onRetry={() => refetch()}
|
|
/>
|
|
|
|
<div className="overflow-hidden rounded-2xl border border-border">
|
|
<InfoRow label="Nom" value={name} />
|
|
<InfoRow label="Adresse e-mail" value={email} />
|
|
<InfoRow label="Identifiant" value={user?.sub ?? "—"} mono />
|
|
{user ? (
|
|
<InfoRow label="Rôle" value={ROLE_LABELS[user.role] ?? user.role} />
|
|
) : null}
|
|
{user?.groups?.length ? (
|
|
<InfoRow label="Groupes" value={user.groups.join(", ")} />
|
|
) : null}
|
|
</div>
|
|
|
|
<p className="mt-4 text-sm text-muted-foreground">
|
|
Votre identité est gérée par le fournisseur d'identité de votre
|
|
organisation. Pour modifier votre nom ou votre adresse e-mail,
|
|
rapprochez-vous de votre administrateur
|
|
{idpUrl ? " ou utilisez le portail d'identité" : ""}.
|
|
</p>
|
|
{idpUrl ? (
|
|
<a
|
|
href={idpUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-2 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
|
|
>
|
|
Ouvrir le portail d'identité
|
|
<ExternalLink className="size-3.5" aria-hidden />
|
|
</a>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function InfoRow({
|
|
label,
|
|
value,
|
|
mono = false,
|
|
}: {
|
|
label: string
|
|
value: string
|
|
mono?: boolean
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-0.5 border-b border-border px-4 py-3 last:border-b-0 sm:flex-row sm:items-center sm:gap-4">
|
|
<span className="w-40 shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
{label}
|
|
</span>
|
|
<span
|
|
className={
|
|
mono
|
|
? "min-w-0 break-all font-mono text-xs text-foreground"
|
|
: "min-w-0 truncate text-sm text-foreground"
|
|
}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|