9ea2d3325d
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Updated login and signup components to utilize AuthCard for better user experience during redirection. - Introduced AuthentikEmbedDialog for seamless integration of Authentik's identity portal within the application. - Enhanced password recovery and signup flows with dynamic theme handling and improved loading states. - Refactored existing components to streamline authentication processes and improve maintainability.
96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useEffect, useState } from "react"
|
|
import { Loader2 } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
|
|
export type AuthentikEmbedDialogProps = {
|
|
url: string
|
|
title: string
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
description?: string
|
|
}
|
|
|
|
export function AuthentikEmbedDialog({
|
|
url,
|
|
title,
|
|
open,
|
|
onOpenChange,
|
|
description,
|
|
}: AuthentikEmbedDialogProps) {
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setIsLoading(true)
|
|
}
|
|
}, [open, url])
|
|
|
|
const handleIframeLoad = useCallback(() => {
|
|
setIsLoading(false)
|
|
}, [])
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent
|
|
className="gap-0 overflow-hidden border-mail-border bg-mail-surface p-0 sm:max-w-2xl dark:bg-mail-surface-elevated"
|
|
showCloseButton
|
|
>
|
|
<DialogHeader className="space-y-1 border-b border-mail-border px-6 py-4 pr-12">
|
|
<DialogTitle className="text-base font-semibold">{title}</DialogTitle>
|
|
{description ? (
|
|
<DialogDescription>{description}</DialogDescription>
|
|
) : null}
|
|
</DialogHeader>
|
|
|
|
<div className="relative bg-mail-surface dark:bg-mail-surface-elevated">
|
|
{isLoading ? (
|
|
<div
|
|
className="absolute inset-0 z-10 flex items-center justify-center bg-mail-surface/80 dark:bg-mail-surface-elevated/80"
|
|
aria-busy="true"
|
|
aria-live="polite"
|
|
>
|
|
<Loader2
|
|
className="size-6 animate-spin text-muted-foreground"
|
|
aria-hidden
|
|
/>
|
|
<span className="sr-only">Chargement du portail d'identité…</span>
|
|
</div>
|
|
) : null}
|
|
<iframe
|
|
key={url}
|
|
src={url}
|
|
title={title}
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
allow="clipboard-write"
|
|
onLoad={handleIframeLoad}
|
|
className="block w-full rounded-none border-0 bg-mail-surface dark:bg-mail-surface-elevated"
|
|
style={{ height: "min(72vh, 640px)" }}
|
|
/>
|
|
</div>
|
|
|
|
<DialogFooter className="flex-row items-center justify-between gap-3 border-t border-mail-border px-6 py-3 sm:justify-between">
|
|
<p className="text-xs text-muted-foreground">
|
|
Géré via votre identité UltiSuite
|
|
</p>
|
|
<DialogClose asChild>
|
|
<Button type="button" variant="outline" className="h-8 rounded-full px-4 text-sm">
|
|
Fermer
|
|
</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|