@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/components/activity-descriptor-parser.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import {MarkdownParser} from "./markdown-parser";
+import {getNestedValue} from "../../infrastructure/utilities/values";
+import {authUserConnectedStore} from "../../infrastructure/stores/auth-user-connected.store";
+
+export interface ActivityDescriptorParserProps {
+    template: string;
+    context: Record<string, any>;
+    className?: string;
+}
+
+export function ActivityDescriptorParser({template, context, className}: ActivityDescriptorParserProps) {
+    const connectedUser = authUserConnectedStore(state => state.getCurrentUser);
+
+    const fullContext: Record<string, any> = {
+        ...connectedUser,
+        ...context,
+    };
+
+    let result = template;
+
+    const placeholderRegex = /\[([^\]]+)\](?!\()/g;
+    let match;
+
+    while ((match = placeholderRegex.exec(template)) !== null) {
+        const placeholder = match[0];
+        const path = match[1];
+
+        const value = getNestedValue(fullContext, path);
+        const stringValue = value !== null && value !== undefined ? `**${value}**` : '';
+
+        result = result.replace(new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), stringValue);
+    }
+
+    return <MarkdownParser text={result} className={className}/>;
+}

package/src/presentation/components/activity-header.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { ReactNode } from "react"
+import { cn } from "../../infrastructure/utilities/utils"
+
+export interface ActivityHeaderProps {
+  children: ReactNode
+  className?: string
+}
+
+export function ActivityHeader({ children, className }: ActivityHeaderProps) {
+  return (
+    <div
+      data-slot="activity-header"
+      className={cn("flex flex-row items-center justify-between gap-3", className)}
+    >
+      {children}
+    </div>
+  )
+}

package/src/presentation/components/activity-loader.tsx

@@ -0,0 +1,19 @@
+import { Motion } from "../../infrastructure/library/motion"
+import { elasticPulse } from "../../infrastructure/library/motion-utils"
+import {LoaderIcon} from "lucide-react"
+import {cn} from "../../infrastructure/utilities/utils"
+
+export interface ActivityLoaderProps {
+    size?: number
+    className?: string
+}
+
+export function ActivityLoader({size = 24, className}: ActivityLoaderProps){
+    return (
+        <div className={cn("flex-auto flex flex-col items-center justify-center", className)}>
+            <Motion animation={elasticPulse()}>
+                <LoaderIcon size={size} className={"animate-spin"} />
+            </Motion>
+        </div>
+    )
+}

package/src/presentation/components/activity-title.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { ReactNode } from "react"
+import { cn } from "../../infrastructure/utilities/utils"
+
+export interface ActivityTitleProps {
+  label: ReactNode
+  description?: ReactNode
+  icon?: ReactNode
+  className?: string
+}
+
+export function ActivityTitle({ label, description, icon, className }: ActivityTitleProps) {
+  return (
+    <div
+      data-slot="activity-title"
+      className={cn("flex items-center gap-3 min-w-0", className)}
+    >
+      {icon && (
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          {icon}
+        </span>
+      )}
+      <div className="flex flex-col flex-auto min-w-0 overflow-hidden">
+        <h1 className="text-2xl font-bold truncate text-ellipsis">{label}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/presentation/components/activity.tsx

@@ -0,0 +1,22 @@
+import {ActivityContainer} from "./activity-container"
+import {ActivityLoader} from "./activity-loader"
+import {ActivityContent} from "./activity-content"
+import {ActivityHeader} from "./activity-header"
+import {ActivityTitle} from "./activity-title"
+import {ActivityActions} from "./activity-actions"
+
+export const Activity = {
+    Container: ActivityContainer,
+    Content: ActivityContent,
+    Header: ActivityHeader,
+    Title: ActivityTitle,
+    Actions: ActivityActions,
+    Loader: ActivityLoader,
+}
+
+export type {ActivityContainerProps} from "./activity-container"
+export type {ActivityLoaderProps} from "./activity-loader"
+export type {ActivityContentProps} from "./activity-content"
+export type {ActivityHeaderProps} from "./activity-header"
+export type {ActivityTitleProps} from "./activity-title"
+export type {ActivityActionsProps} from "./activity-actions"

package/src/presentation/components/auth/index.tsx

@@ -0,0 +1,4 @@
+// @liorian/sdk/presentation/components/auth — SSO views.
+export * from "./sso-callback.view";
+export * from "./sso-disconnect.view";
+export * from "./sso-sign-in.view";

package/src/presentation/components/auth/sso-callback.view.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import {useEffect, useRef} from "react";
+import {useRouter} from "next/navigation";
+import {handleSsoCallback, isSsoCallbackInPopup} from "../../../infrastructure/utilities/sso-auth.util";
+import {Activity} from "../activity";
+
+export interface SsoCallbackViewProps {
+    /** Destination après une authentification réussie (mode redirection complète). */
+    successRedirect?: string
+    /** Destination en cas d'échec de l'échange du code d'autorisation. */
+    errorRedirect?: string
+}
+
+/**
+ * Écran de rappel SSO : échange le code d'autorisation contre une session puis
+ * redirige. En mode popup, le résultat est renvoyé à l'onglet d'origine via
+ * `postMessage` et le popup est refermé.
+ */
+export function SsoCallbackView({successRedirect = '/', errorRedirect = '/auth/sign-in'}: SsoCallbackViewProps) {
+    const router = useRouter();
+    const done = useRef(false);
+
+    useEffect(() => {
+        if (done.current) {
+            return;
+        }
+        done.current = true;
+        handleSsoCallback()
+            .then(() => {
+                if (!isSsoCallbackInPopup()) router.replace(successRedirect);
+            })
+            .catch(() => {
+                if (!isSsoCallbackInPopup()) router.replace(errorRedirect);
+            });
+    }, [router, successRedirect, errorRedirect]);
+
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-4 bg-background">
+            <Activity.Loader size={24}/>
+            <p className="text-sm text-muted-foreground">Finalisation de la connexion…</p>
+        </div>
+    );
+}

package/src/presentation/components/auth/sso-disconnect.view.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import {UnplugIcon} from "lucide-react";
+import {useEffect} from "react";
+import {useRouter} from "next/navigation";
+import {AuthConfig} from "../../../domain/config/auth.config";
+
+export interface SsoDisconnectViewProps {
+    /** Délai avant redirection automatique vers la page de connexion (ms). */
+    redirectAfterMs?: number
+}
+
+/**
+ * Écran de déconnexion : confirme la fin de session puis redirige vers la
+ * connexion SSO après quelques secondes.
+ */
+export function SsoDisconnectView({redirectAfterMs = 3000}: SsoDisconnectViewProps) {
+    const router = useRouter();
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            router.replace(AuthConfig.routes.login)
+            router.refresh()
+        }, redirectAfterMs);
+        return () => clearTimeout(timeout);
+    }, [router, redirectAfterMs]);
+
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+            <div className="w-full max-w-xl flex flex-col items-start md:flex-row md:items-center gap-6">
+                <div className="">
+                    <UnplugIcon className={"w-16 h-16 text-primary"}/>
+                </div>
+                <div className="">
+                    <h1>Vous êtes maintenant déconnecté</h1>
+                    <p>Redirection vers la page d&apos;accueil dans quelques secondes...</p>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/presentation/components/auth/sso-sign-in.view.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import {useEffect} from "react";
+import {startSsoLogin} from "../../../infrastructure/utilities/sso-auth.util";
+import {Activity} from "../activity";
+
+export interface SsoSignInViewProps {
+    /** Destination si le SSO ne peut pas être démarré (popup/redirection bloquée). */
+    fallbackRedirect?: string
+}
+
+/**
+ * Écran de connexion SSO : redirige vers Liorian Auth (flux Authorization Code
+ * + PKCE) dès le montage. Réutilisable par toutes les applications consommatrices.
+ */
+export function SsoSignInView({fallbackRedirect = '/auth/sign-up'}: SsoSignInViewProps) {
+    useEffect(() => {
+        startSsoLogin().catch(() => {
+            window.location.assign(fallbackRedirect);
+        });
+    }, [fallbackRedirect]);
+
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-4 bg-background">
+            <Activity.Loader size={24}/>
+            <p className="text-sm text-muted-foreground">Connexion…</p>
+        </div>
+    );
+}

package/src/presentation/components/auth-lock-screen.tsx

@@ -0,0 +1,309 @@
+"use client"
+
+import * as React from "react"
+import {useEffect, useMemo, useState} from "react"
+import {Eye, EyeOff, FingerprintIcon, KeyRoundIcon, LockKeyholeIcon} from "lucide-react"
+import {AppConfig} from "../../domain/config/app.config"
+import {AuthUserService} from "../../application/service/auth-user.service"
+import {AuthApiService, webauthnBytes} from "../../application/service/auth-api-service"
+import {ActivityLockService} from "../../infrastructure/utilities/activity-lock.service"
+import {startSsoLogin, startSsoLoginPopup, SSO_CALLBACK_MESSAGE} from "../../infrastructure/utilities/sso-auth.util"
+import {Avatar, AvatarFallback} from "../ui/avatar"
+import {Button} from "../ui/button"
+import {Input} from "../ui/input"
+import {Label} from "../ui/label"
+import {StorageMedia} from "../uploading/storage-media"
+import {View} from "../themes/katon/view"
+import {cn} from "../../infrastructure/utilities/utils"
+import type {UserInterface} from "../../domain/entities/user.interface"
+import {Activity} from "./activity";
+import {ThemeLogo} from "../system/logo.theme";
+import {LegacyInput} from "../ui/legacy-input";
+
+export interface AuthLockScreenProps {
+    /** Classes supplémentaires appliquées au conteneur. */
+    className?: string
+    /** URL de destination après authentification réussie (navigation complète). Par défaut, recharge la page courante. */
+    redirectUrl?: string
+    /** Callback invoqué après une authentification réussie. */
+    onAuthenticated?: () => void
+    /** Callback invoqué après un déverrouillage réussi (session déjà valide). */
+    onUnlocked?: () => void
+    /** Libellé de l'action d'authentification. */
+    actionLabel?: string
+}
+
+/**
+ * Écran de verrouillage de type macOS.
+ *
+ * - Si aucune session active : présente l'avatar (ou les initiales) et un bouton pour
+ *   s'authentifier via Liorian Auth (popup, redirection en repli).
+ * - Si une session est déjà valide (utilisateur connecté) : demande le mot de passe ou
+ *   un déverrouillage par passkey / empreinte WebAuthn.
+ */
+export function AuthLockScreen(
+    {
+        className,
+        redirectUrl,
+        onAuthenticated,
+        onUnlocked,
+        actionLabel = 'Se connecter avec Liorian Auth',
+    }: AuthLockScreenProps) {
+    const [connecting, setConnecting] = useState(false)
+    const [user, setUser] = useState<UserInterface | null>(null)
+    const [mode, setMode] = useState<'sso' | 'unlock'>(() => AuthUserService.isAuthenticated() ? 'unlock' : 'sso')
+    const [password, setPassword] = useState('')
+    const [showPassword, setShowPassword] = useState(false)
+    const [unlocking, setUnlocking] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        setUser(AuthUserService.getUser())
+    }, [])
+
+    const identity = useMemo(() => {
+        const name = user?.userData?.firstname
+            ? `${user.userData.firstname} ${user.userData.lastname ?? ''}`.trim()
+            : user?.username || AppConfig.APP_NAME || 'Liorian';
+
+        const avatarId = user?.avatar?.id;
+        let initials = 'S';
+        if (user?.userData?.firstname && user?.userData?.lastname) {
+            initials = `${user.userData.firstname[0]}${user.userData.lastname[0]}`.toUpperCase();
+        } else if (user?.username) {
+            initials = user.username.substring(0, 2).toUpperCase();
+        } else if (user?.email) {
+            initials = user.email.substring(0, 2).toUpperCase();
+        } else if (AppConfig.APP_NAME) {
+            initials = AppConfig.APP_NAME.substring(0, 2).toUpperCase();
+        }
+
+        return {name, avatarId, initials};
+    }, [user]);
+
+    useEffect(() => {
+        const onMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return;
+            if (event.data?.source !== 'liorian-auth') return;
+            if (event.data?.type !== SSO_CALLBACK_MESSAGE) return;
+
+            if (event.data?.success) {
+                setConnecting(false);
+                onAuthenticated?.();
+                // La session a été installée dans le `localStorage` partagé : on force une
+                // navigation complète pour que `AuthProvider` ré-hydrate le store depuis le stockage.
+                if (redirectUrl) {
+                    window.location.assign(redirectUrl);
+                } else {
+                    window.location.reload();
+                }
+            } else {
+                setConnecting(false);
+            }
+        };
+        window.addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, [redirectUrl, onAuthenticated]);
+
+    const handleAuthenticate = async () => {
+        if (connecting) return;
+        setConnecting(true);
+        try {
+            const popup = await startSsoLoginPopup();
+            if (!popup) {
+                await startSsoLogin();
+                return;
+            }
+
+            // Si le popup est fermé sans message de succès, réactiver le bouton.
+            const watchPopup = setInterval(() => {
+                if (popup.closed) {
+                    clearInterval(watchPopup);
+                    setConnecting(false);
+                }
+            }, 500);
+            window.addEventListener('beforeunload', () => clearInterval(watchPopup));
+        } catch (e) {
+            console.error('Impossible de démarrer l’authentification SSO', e);
+            setConnecting(false);
+        }
+    };
+
+    const handleUnlockWithPassword = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (unlocking || !password) return;
+        setUnlocking(true);
+        setError(null);
+        try {
+            const response = await AuthApiService.verifyPassword(password);
+            const valid = response?.data?.data?.valid;
+            if (!valid) {
+                setError('Mot de passe incorrect');
+                return;
+            }
+            ActivityLockService.unlock();
+            onUnlocked?.();
+        } catch (err: any) {
+            setError(err?.response?.data?.message || 'Mot de passe incorrect');
+        } finally {
+            setUnlocking(false);
+        }
+    };
+
+    const handleUnlockWithPasskey = async () => {
+        if (unlocking) return;
+        setUnlocking(true);
+        setError(null);
+        try {
+            const options = await AuthApiService.webauthnAuthnOptions();
+            const credential = (await window.navigator.credentials.get({
+                publicKey: options as unknown as PublicKeyCredentialRequestOptions,
+            })) as PublicKeyCredential | null;
+            if (!credential) {
+                throw new Error('Aucune clé de sécurité reconnue.');
+            }
+            const webauthn = credential as PublicKeyCredential & {
+                response: AuthenticatorAssertionResponse;
+            };
+            const {clientDataJSON, authenticatorData, signature, userHandle} = webauthn.response;
+            await AuthApiService.webauthnAuthnVerify({
+                credentialId: webauthn.id,
+                rawId: Array.from(new Uint8Array(webauthn.rawId)),
+                response: {
+                    clientDataJSON: webauthnBytes(clientDataJSON),
+                    authenticatorData: webauthnBytes(authenticatorData),
+                    signature: webauthnBytes(signature),
+                    userHandle: webauthnBytes(userHandle),
+                },
+            });
+            ActivityLockService.unlock();
+            onUnlocked?.();
+        } catch (err: any) {
+            setError(err?.message || 'Impossible de se déverrouiller');
+        } finally {
+            setUnlocking(false);
+        }
+    };
+
+    return (
+        <View>
+            <View.Frame className={cn('flex min-h-svh flex-col', className)}>
+                <div className="flex flex-1 flex-col items-center justify-center gap-6 p-6">
+                    <div className="flex flex-row justify-center items-center">
+                        <div className="w-12">
+                            <ThemeLogo variant={'square'}/>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col items-center justify-end flex-auto gap-5">
+                        <Avatar size="lg"
+                                className="size-48! overflow-hidden rounded-full border-4 border-border shadow-lg">
+                            {identity.avatarId ? (
+                                <StorageMedia id={identity.avatarId} className="size-full object-cover"/>
+                            ) : (
+                                <AvatarFallback className="text-3xl font-semibold">{identity.initials}</AvatarFallback>
+                            )}
+                        </Avatar>
+                        <div className="flex flex-col items-center gap-1 text-center">
+                            <p className="text-xl font-semibold text-foreground">{identity.name}</p>
+                            {/*<p className="flex items-center gap-1.5 text-sm text-muted-foreground">*/}
+                            {/*    <LockKeyholeIcon className="size-3.5"/>*/}
+                            {/*    Session verrouillée*/}
+                            {/*</p>*/}
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-3 pb-6 w-full max-w-lg ">
+                        {mode === 'unlock' ? (
+                            <div className="w-full flex flex-col gap-3">
+                                <form onSubmit={handleUnlockWithPassword} className="flex w-full flex-col gap-3">
+                                    <div className="">
+                                        {/*<Label htmlFor="lock-password" className="sr-only">Mot de passe</Label>*/}
+                                        <LegacyInput
+                                            id={"lock-password"}
+                                            label="Mot de passe"
+                                            input={{
+                                                type: showPassword ? "text" : "password",
+                                                placeholder: "••••••••",
+                                                required: true,
+                                                autoFocus: true,
+                                                value: password,
+                                                onChange: (e) => setPassword(e.target.value),
+                                                disabled: unlocking,
+                                                // className: "h-11 rounded-full px-4"
+                                            }}
+                                            icon={
+                                                <button
+                                                    type="button"
+                                                    onClick={() => setShowPassword(!showPassword)}
+                                                    className="text-muted-foreground/60 hover:text-white transition-colors cursor-pointer flex items-center justify-center"
+                                                >
+                                                    {showPassword
+                                                        ? <EyeOff className="size-4"/>
+                                                        : <Eye className="size-4"/>}
+                                                </button>
+                                            }
+                                        />
+                                    </div>
+                                    {error && (
+                                        <p className="px-2 text-center text-xs font-medium text-destructive">{error}</p>
+                                    )}
+
+                                    <div className="flex flex-row gap-3 items-center">
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            size="lg"
+                                            className=" rounded-full"
+                                            onClick={handleUnlockWithPasskey}
+                                            disabled={unlocking}
+                                        >
+                                            <FingerprintIcon className="size-4"/>
+                                            Clé de sécurité
+                                        </Button>
+                                        <Button
+                                            type="submit"
+                                            size="lg"
+                                            className="flex-auto rounded-full"
+                                            disabled={unlocking || !password}
+                                        >
+                                            <span className="flex-none">
+                                            {
+                                                unlocking
+                                                    ? <Activity.Loader/>
+                                                    : <KeyRoundIcon className="size-4"/>
+                                            }
+                                            </span>
+                                            <span className="flex-auto">Déverrouiller</span>
+                                        </Button>
+                                    </div>
+
+                                </form>
+                            </div>
+                        ) : (
+                            <div className="w-full flex items-center justify-center">
+                                <Button
+                                    size="lg"
+                                    className="w-full flex flex-row items-center"
+                                    onClick={handleAuthenticate}
+                                    disabled={connecting}>
+                                <span className="flex-none">
+                                    {connecting ? (
+                                        <Activity.Loader/>
+                                    ) : (
+                                        <LockKeyholeIcon className="size-4"/>
+                                    )}
+                                </span>
+                                    <span className="flex-auto">
+                                    {connecting ? 'Connexion…' : actionLabel}
+                                </span>
+                                </Button>
+                            </div>
+                        )}
+                    </div>
+
+                </div>
+            </View.Frame>
+        </View>
+    )
+}

package/src/presentation/components/auth-session.view.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import {Waiting} from "./waiting";
+
+/**
+ * Écran de synchronisation affiché pendant la (ré)hydratation de la session.
+ * Partagé par `AuthProvider` et `AuthGuard`.
+ */
+export function AuthSessionView() {
+    return (
+        <div className="w-screen h-screen flex justify-center items-center flex-col gap-4">
+            <div className="max-w-md w-full mx-6">
+                <Waiting label={"Synchronisation..."}/>
+            </div>
+        </div>
+    )
+}