ultisuite-client/components/compte/sections/compte-security-section.tsx
R3D347HR4Y ad1370ea7e
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
feat: enhance configuration and add new demo layouts
- 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.
2026-06-12 19:10:24 +02:00

78 lines
2.9 KiB
TypeScript

"use client"
import { KeyRound, LogOut, MonitorSmartphone, ShieldCheck, Smartphone } from "lucide-react"
import { CompteAuthentikPanel } from "@/components/compte/compte-authentik-panel"
import { SettingsSectionHeader } from "@/components/gmail/settings/settings-section-header"
import { Button } from "@/components/ui/button"
import { useAuthLogout } from "@/components/auth/auth-provider"
import {
AUTHENTIK_SELF_SERVICE_FLOWS,
} from "@/lib/auth/authentik-user-url"
export function CompteSecuritySection() {
const signOut = useAuthLogout()
return (
<>
<SettingsSectionHeader
title="Sécurité"
description="Mot de passe, validation en deux étapes, sessions actives et déconnexion."
/>
<div className="space-y-4">
<CompteAuthentikPanel
icon={<KeyRound className="size-5" aria-hidden />}
title="Mot de passe"
description="Changez le mot de passe de votre compte Ulti."
flowSlug={AUTHENTIK_SELF_SERVICE_FLOWS.passwordChange}
actionLabel="Changer le mot de passe"
/>
<CompteAuthentikPanel
icon={<Smartphone className="size-5" aria-hidden />}
title="Validation en deux étapes"
description="Ajoutez ou retirez des appareils TOTP, clés de sécurité WebAuthn ou codes de secours."
tab="mfa"
actionLabel="Gérer la validation"
/>
<CompteAuthentikPanel
icon={<MonitorSmartphone className="size-5" aria-hidden />}
title="Sessions et appareils"
description="Consultez les sessions actives et déconnectez un appareil distant."
tab="sessions"
actionLabel="Gérer les sessions"
/>
<CompteAuthentikPanel
icon={<ShieldCheck className="size-5" aria-hidden />}
title="Services connectés"
description="Liez ou déliez des comptes externes (Google, GitHub, etc.) si votre organisation les propose."
tab="sources"
actionLabel="Gérer les connexions"
/>
<div className="flex flex-col gap-3 rounded-lg border border-mail-border bg-mail-surface p-5 shadow-sm dark:bg-mail-surface-elevated sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0">
<h3 className="text-sm font-medium text-foreground">
Session sur cet appareil
</h3>
<p className="mt-0.5 text-sm text-muted-foreground">
Met fin à votre session Ulti sur ce navigateur. Vous devrez vous reconnecter.
</p>
</div>
<Button
type="button"
variant="outline"
className="h-9 shrink-0 rounded-full px-4 text-sm font-medium"
onClick={() => void signOut()}
>
<LogOut className="size-4" aria-hidden />
Se déconnecter
</Button>
</div>
</div>
</>
)
}