Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced turbopack alias for canvas in next.config.mjs. - Updated package.json scripts for development and branding tasks. - Added new dependencies for Tiptap extensions. - Implemented new demo layouts for agenda, contacts, drive, and mail applications. - Enhanced globals.css for improved theming and splash screen animations. - Added OAuth callback handling for drive mounts. - Updated layout components to integrate new demo shells and improve structure.
91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { UserRound } from "lucide-react"
|
|
import { CompteAvatarField } from "@/components/compte/compte-avatar-field"
|
|
import { CompteAuthentikPanel } from "@/components/compte/compte-authentik-panel"
|
|
import { CompteSettingsCard } from "@/components/compte/compte-settings-card"
|
|
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"
|
|
|
|
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 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="space-y-4">
|
|
<CompteAvatarField avatarUrl={user?.avatar_url} name={name} email={email} />
|
|
|
|
<CompteSettingsCard className="overflow-hidden p-0">
|
|
<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}
|
|
</CompteSettingsCard>
|
|
|
|
<CompteAuthentikPanel
|
|
icon={<UserRound className="size-5" aria-hidden />}
|
|
title="Modifier le profil"
|
|
description="Nom, adresse e-mail et locale selon les droits définis par votre organisation."
|
|
tab="details"
|
|
actionLabel="Modifier le profil"
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|