@vertesia/ui 1.5.0-dev.20260910.052912Z → 1.6.0-dev.20260912.110338Z

package/src/shell/login/SigninScreen.test.tsx

@@ -0,0 +1,104 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Button } from '@vertesia/ui/core';
+import { Env } from '@vertesia/ui/env';
+import { CredentialError } from '@vertesia/ui/session';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type SignInScreenViewProps, SigninScreen } from './SigninScreen';
+
+const session = {
+    isLoading: false,
+    user: undefined as { name: string } | undefined,
+    authError: undefined as Error | undefined,
+    signOut: vi.fn(),
+};
+vi.mock('@vertesia/ui/session', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('@vertesia/ui/session')>()),
+    useUserSession: () => session,
+    useUXTracking: () => ({ trackEvent: vi.fn() }),
+}));
+vi.mock('./signInUtils', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('./signInUtils')>()),
+    resetSignInState: vi.fn().mockResolvedValue(undefined),
+}));
+
+function CustomSignIn({ flow, onUseDifferentAccount, notice }: SignInScreenViewProps) {
+    return (
+        <main>
+            <h1>My application login</h1>
+            <p>Mode: {flow.mode}</p>
+            <Button onClick={() => flow.onProceedFromEmail('person@example.com')}>Continue with email</Button>
+            <Button onClick={onUseDifferentAccount}>Change identity</Button>
+            {notice}
+        </main>
+    );
+}
+
+describe('custom sign-in presentation', () => {
+    beforeEach(() => {
+        Env.init({
+            version: '1.0.0',
+            isLocalDev: true,
+            isDocker: false,
+            type: 'development',
+            name: 'Test application',
+            endpoints: {
+                studio: 'https://studio.example.test',
+                zeno: 'https://store.example.test',
+                sts: 'https://sts.example.test',
+            },
+        });
+        session.isLoading = false;
+        session.user = undefined;
+        session.authError = undefined;
+        session.signOut.mockClear();
+        localStorage.clear();
+        sessionStorage.clear();
+        history.replaceState({}, '', '/app/deep-link');
+    });
+    afterEach(cleanup);
+
+    it('replaces the complete page and drives the existing flow while preserving the return path', () => {
+        const view = render(<SigninScreen preservePath View={CustomSignIn} />);
+        expect(view.container.firstElementChild?.tagName).toBe('MAIN');
+        expect(screen.queryByText('Privacy Policy')).toBeNull();
+        expect(screen.getByText('Mode: email')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', { name: 'Continue with email' }));
+        expect(screen.getByText('Mode: providers')).toBeTruthy();
+        expect(window.location.pathname).toBe('/app/deep-link');
+    });
+
+    it('keeps session gating in shared code for custom views', () => {
+        session.isLoading = true;
+        const view = render(<SigninScreen preservePath View={CustomSignIn} />);
+        expect(screen.queryByText('My application login')).toBeNull();
+        session.isLoading = false;
+        view.rerender(<SigninScreen preservePath View={CustomSignIn} />);
+        expect(screen.getByText('My application login')).toBeTruthy();
+        session.user = { name: 'Signed-in user' };
+        view.rerender(<SigninScreen preservePath View={CustomSignIn} />);
+        expect(screen.queryByText('My application login')).toBeNull();
+    });
+
+    it('retains allowed-path and transient-error suppression for custom views', () => {
+        const view = render(<SigninScreen allowedPrefix="/app/" View={CustomSignIn} />);
+        expect(screen.queryByText('My application login')).toBeNull();
+        session.authError = new Error('Transient failure');
+        view.rerender(<SigninScreen suppressAuthErrorPrefix="/app/" View={CustomSignIn} />);
+        expect(screen.queryByText('My application login')).toBeNull();
+    });
+
+    it('exposes dedicated recovery modes and working identity reset even on a suppressed path', async () => {
+        session.authError = new CredentialError('Expired credential', 'https://sts.example.test');
+        render(<SigninScreen preservePath suppressAuthErrorPrefix="/app/" View={CustomSignIn} />);
+        expect(await screen.findByText('Mode: credentialFailure')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', { name: 'Change identity' }));
+        await waitFor(() => expect(session.signOut).toHaveBeenCalledOnce());
+        expect(screen.getByText('Mode: email')).toBeTruthy();
+    });
+
+    it('continues to render the default page when no override is supplied', () => {
+        render(<SigninScreen preservePath />);
+        expect(screen.queryByText('My application login')).toBeNull();
+        expect(screen.getByRole('link', { name: /privacy policy/i })).toBeTruthy();
+    });
+});

package/src/shell/login/SigninScreen.tsx

@@ -1,7 +1,6 @@
 import { REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE, type SignupData, type SignupPayload } from '@vertesia/common';
 import { Env } from '@vertesia/ui/env';
 import { useUITranslation } from '@vertesia/ui/i18n';
-import { RegionTag } from '@vertesia/ui/layout';
 import {
     AuthenticationServiceError,
     CredentialError,
@@ -12,29 +11,33 @@ import {
     useUserSession,
     useUXTracking,
 } from '@vertesia/ui/session';
-import { useCallback, useEffect, useState } from 'react';
-import SignInAuthPending from './SignInAuthPending';
-import SignInEmailStep, { type TenantInfo } from './SignInEmailStep';
-import SignInProvidersStep from './SignInProvidersStep';
+import { type ComponentType, type ReactNode, useCallback, useEffect } from 'react';
+import { type SignInFlowController, SignInFlowSteps, useSignInFlow } from './SignInFlow';
+import { SignInPageShell } from './SignInPageShell';
 import SignInRecoveryStep, { type SignInRecoveryKind } from './SignInRecoveryStep';
 import SignInRestrictedEnvStep from './SignInRestrictedEnvStep';
-import SignInReturningStep from './SignInReturningStep';
 import SignInTenantBlockedStep from './SignInTenantBlockedStep';
-import SignInTenantStep from './SignInTenantStep';
 import SignupForm from './SignupForm';
-import {
-    clearLastSuccessfulLogin,
-    clearPendingSignin,
-    isInviteRequiredError,
-    type LastSuccessfulLogin,
-    type ProviderId,
-    readLastSuccessfulLogin,
-    readPendingSignin,
-    resetSignInState,
-    writeLastSuccessfulLogin,
-} from './signInUtils';
+import { isInviteRequiredError, readPendingSignin, resetSignInState } from './signInUtils';
 
-interface SigninScreenProps {
+/** Presentation only: the shared screen still owns session gating and recovery transitions. */
+export interface SignInScreenViewProps {
+    flow: SignInFlowController<SignInRecoveryMode>;
+    authError?: Error;
+    /** Retain these shared forms for tenant resolution and provider sign-in; flow alone does not initiate redirects. */
+    children: ReactNode;
+    notice: ReactNode;
+    isNested: boolean;
+    lightLogo?: string;
+    darkLogo?: string;
+    onUseDifferentAccount: () => void;
+    onContinueWithSanitizedScope: () => void;
+    onRetry: () => void;
+    onSignup: (data: SignupData, firebaseToken: string) => void;
+}
+
+export interface SigninScreenProps {
+    View?: ComponentType<SignInScreenViewProps>;
     isNested?: boolean;
     allowedPrefix?: string | string[];
     lightLogo?: string;
@@ -50,6 +53,7 @@ export function SigninScreen({
     darkLogo,
     preservePath,
     suppressAuthErrorPrefix,
+    View,
 }: SigninScreenProps) {
     const pathname = typeof window === 'undefined' ? '' : window.location.pathname;
     const allow = matchesPathPrefix(pathname, allowedPrefix);
@@ -61,6 +65,7 @@ export function SigninScreen({
             darkLogo={darkLogo}
             preservePath={preservePath}
             suppressAuthError={suppressAuthError}
+            View={View}
         />
     );
 }
@@ -75,13 +80,12 @@ function matchesPathPrefix(pathname: string, prefix?: string | string[]) {
     });
 }
 
-type Mode =
-    | 'email'
-    | 'providers'
-    | 'tenant'
+/**
+ * The modes this screen adds on top of {@link SignInCoreMode}: every one is entered from an
+ * `authError` the session surfaced, which is why they stay here rather than in the shared flow.
+ */
+export type SignInRecoveryMode =
     | 'blocked'
-    | 'returning'
-    | 'pending'
     | 'signup'
     | 'restricted'
     | 'scopeUnavailable'
@@ -106,19 +110,17 @@ function SigninScreenImpl({
     darkLogo,
     preservePath,
     suppressAuthError,
+    View,
 }: SigninScreenProps & { suppressAuthError?: boolean }) {
-    const { t } = useUITranslation();
     const { isLoading, user, authError, signOut } = useUserSession();
     const { trackEvent } = useUXTracking();
 
-    const [storedSession, setStoredSession] = useState<LastSuccessfulLogin | null>(() => readLastSuccessfulLogin());
-    const [mode, setMode] = useState<Mode>(() => {
-        const s = readLastSuccessfulLogin();
-        return s ? 'returning' : 'email';
+    const flow = useSignInFlow<SignInRecoveryMode>({
+        signOut,
+        trackEvent,
+        user,
     });
-    const [email, setEmail] = useState('');
-    const [tenant, setTenant] = useState<TenantInfo | undefined>(undefined);
-    const [pendingProvider, setPendingProvider] = useState<ProviderId | null>(null);
+    const { mode, setMode, email, setEmail, tenant, setTenant, storedSession, setStoredSession } = flow;
 
     const recoveryIdentity =
         authError instanceof RequestedScopeUnavailableError || authError instanceof NoAccessibleAccountError
@@ -166,68 +168,14 @@ function SigninScreenImpl({
             if (pending) setEmail(pending.email);
             setMode('blocked');
         }
-    }, [authError]);
-
-    // On successful login, finalize the last-successful-login entry with the user's name.
-    useEffect(() => {
-        if (!user) return;
-        const pending = readPendingSignin();
-        if (!pending) return;
-        writeLastSuccessfulLogin({
-            email: pending.email,
-            lastProvider: pending.provider,
-            tenantName: pending.tenantName,
-            name: user.name || undefined,
-        });
-        clearPendingSignin();
-    }, [user]);
-
-    const onProceedFromEmail = useCallback((e: string, t: TenantInfo | undefined) => {
-        setEmail(e);
-        setTenant(t);
-        setMode(t ? 'tenant' : 'providers');
-    }, []);
-
-    const onBack = useCallback(() => {
-        setMode('email');
-        setTenant(undefined);
-    }, []);
-
-    const onNotYou = useCallback(() => {
-        clearLastSuccessfulLogin();
-        clearPendingSignin();
-        setStoredSession(null);
-        setEmail('');
-        setTenant(undefined);
-        setMode('email');
-        void signOut();
-    }, [signOut]);
-
-    const onProviderClicked = useCallback(
-        (provider: ProviderId) => {
-            // Tenant context comes from a resolved tenant or stored tenantName, not the provider.
-            const hasTenant = !!tenant || !!storedSession?.tenantName;
-            // Only the pre-existing enterprise_signin event; non-tenant sign-ins emit nothing.
-            if (hasTenant) trackEvent('enterprise_signin', { provider });
-            setPendingProvider(provider);
-            setMode('pending');
-            // The redirect itself happens in the calling step's startSignIn(); this just shows the pending screen.
-        },
-        [trackEvent, storedSession?.tenantName, tenant],
-    );
+    }, [authError, setEmail, setMode]);
 
     // "Use a different email" out of the blocked/signup screen. The user reached it
     // as a valid Firebase user with no Vertesia account, so a partial reset isn't
     // enough: unless we also clear the persisted records and sign out of Firebase,
     // the leftover session re-runs the invite check on the next auth change or
     // reload and lands them back on blocked.
-    const startOver = useCallback(() => {
-        setStoredSession(null); // drop the in-memory mirror too — resetSignInState only clears storage
-        setEmail('');
-        setTenant(undefined);
-        setMode('email');
-        void resetSignInState();
-    }, []);
+    const { startOver } = flow;
 
     const useDifferentAccount = useCallback(() => {
         Env.logger.info('Authentication recovery action selected', {
@@ -238,7 +186,7 @@ function SigninScreenImpl({
         setTenant(undefined);
         setMode('email');
         void resetSignInState().finally(() => signOut());
-    }, [signOut]);
+    }, [setStoredSession, setEmail, setTenant, setMode, signOut]);
 
     const continueWithSanitizedScope = useCallback(() => {
         if (!(authError instanceof RequestedScopeUnavailableError)) return;
@@ -279,9 +227,7 @@ function SigninScreenImpl({
     if (isLoading || user || shouldHideTransientAuthError) return null;
 
     let content: React.ReactNode = null;
-    if (mode === 'pending' && pendingProvider) {
-        content = <SignInAuthPending provider={pendingProvider} />;
-    } else if (mode === 'blocked') {
+    if (mode === 'blocked') {
         content = (
             <SignInTenantBlockedStep
                 email={email || storedSession?.email || ''}
@@ -336,67 +282,91 @@ function SigninScreenImpl({
         );
     } else if (mode === 'signup' && !localStorage.getItem('tenantName')) {
         content = <SignupForm onSignup={onSignup} goBack={startOver} />;
-    } else if (mode === 'tenant' && tenant) {
-        content = (
-            <SignInTenantStep
-                email={email}
-                tenant={tenant}
-                onBack={onBack}
-                onProviderClicked={() => onProviderClicked((tenant.provider ?? 'oidc') as ProviderId)}
-            />
-        );
-    } else if (mode === 'providers') {
-        content = <SignInProvidersStep email={email} onBack={onBack} onProviderClicked={onProviderClicked} />;
-    } else if (mode === 'returning' && storedSession) {
-        content = (
-            <SignInReturningStep session={storedSession} onNotYou={onNotYou} onProviderClicked={onProviderClicked} />
-        );
     } else {
-        content = <SignInEmailStep initialEmail={email} onProceed={onProceedFromEmail} />;
+        // Every remaining mode is a core one; an unmatched recovery mode falls through to the
+        // email step, exactly as it did when this chain owned all twelve branches.
+        content = <SignInFlowSteps flow={flow} />;
+    }
+
+    const notice = authError && !isDedicatedAuthError(authError) && !isInviteRequiredError(authError) && (
+        <SignInErrorNotice />
+    );
+
+    if (View) {
+        return (
+            <View
+                flow={flow}
+                authError={authError}
+                notice={notice}
+                isNested={isNested}
+                lightLogo={lightLogo}
+                darkLogo={darkLogo}
+                onUseDifferentAccount={useDifferentAccount}
+                onContinueWithSanitizedScope={continueWithSanitizedScope}
+                onRetry={retryAuthentication}
+                onSignup={onSignup}
+            >
+                {content}
+            </View>
+        );
     }
 
+    return (
+        <DefaultSignInScreen isNested={isNested} lightLogo={lightLogo} darkLogo={darkLogo} notice={notice}>
+            {content}
+        </DefaultSignInScreen>
+    );
+}
+
+/** The shared Studio sign-in layout; branding only supplies its content and assets. */
+export function DefaultSignInScreen({
+    isNested,
+    lightLogo,
+    darkLogo,
+    notice,
+    children,
+    logoAlt,
+    footer,
+}: {
+    isNested?: boolean;
+    lightLogo?: string;
+    darkLogo?: string;
+    notice?: ReactNode;
+    children: ReactNode;
+    logoAlt?: string;
+    footer?: string;
+}) {
     return (
         <div
             style={{ zIndex: 999998 }}
             className={`${isNested ? 'absolute' : 'fixed'} inset-0 overflow-y-auto bg-background`}
         >
-            <div className="min-h-full flex flex-col items-center justify-center py-12 px-4">
-                <div className="flex flex-col items-center w-full">
-                    {(lightLogo || darkLogo) && (
-                        <div className="mb-7">
-                            {lightLogo && <img src={lightLogo} alt="Vertesia" className="h-10 block dark:hidden" />}
-                            {darkLogo && <img src={darkLogo} alt="Vertesia" className="h-10 hidden dark:block" />}
-                        </div>
-                    )}
-
-                    {content}
-
-                    {authError && !isDedicatedAuthError(authError) && !isInviteRequiredError(authError) && (
-                        <div className="mt-6 max-w-[420px] text-center text-sm text-muted">
-                            <div>
-                                {t('auth.signInError')}
-                                <br />
-                                {t('auth.signInErrorContact')}
-                                <a className="text-info mx-1" href="mailto:support@vertesiahq.com">
-                                    support@vertesiahq.com
-                                </a>
-                                {t('auth.signInErrorPersists')}
-                            </div>
-                        </div>
-                    )}
+            <SignInPageShell
+                lightLogo={lightLogo}
+                darkLogo={darkLogo}
+                logoAlt={logoAlt}
+                footer={footer}
+                notice={notice}
+            >
+                {children}
+            </SignInPageShell>
+        </div>
+    );
+}
 
-                    <div className="flex items-center gap-5 mt-10 text-xs text-muted">
-                        <a href="https://vertesiahq.com/privacy" className="hover:text-foreground transition">
-                            {t('auth.privacyPolicy')}
-                        </a>
-                        <span className="text-border">·</span>
-                        <a href="https://vertesiahq.com/terms" className="hover:text-foreground transition">
-                            {t('auth.termsOfService')}
-                        </a>
-                        <span className="text-border">·</span>
-                        <RegionTag className="cursor-default" />
-                    </div>
-                </div>
+/** Shared generic authentication error notice. */
+export function SignInErrorNotice() {
+    const { t } = useUITranslation();
+    return (
+        <div className="mt-6 max-w-[420px] text-center text-sm text-muted">
+            <div>
+                {t('auth.signInError')}
+                <br />
+                {t('auth.signInErrorContact')}
+                <a className="text-info mx-1" href="mailto:support@vertesiahq.com">
+                    support@vertesiahq.com
+                </a>
+                {t('auth.signInErrorPersists')}
             </div>
         </div>
     );

package/src/shell/login/SignupForm.tsx

@@ -11,18 +11,19 @@ interface CompanySizeOption {
 }
 
 interface SignupFormProps {
+    identity?: Pick<User, 'displayName' | 'email'>;
     onSignup: (data: SignupData, fbToken: string) => void;
     goBack: () => void;
 }
 
-export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
+export default function SignupForm({ onSignup, goBack, identity }: SignupFormProps) {
     const { t } = useUITranslation();
     const [accountType, setAccountType] = useState<string | undefined>(undefined);
     const [companySize, setCompanySize] = useState<CompanySizeOption | undefined>(undefined);
     const [companyName, setCompanyName] = useState<string | undefined>(undefined);
     const [companyWebsite, setCompanyWebsite] = useState<string | undefined>(undefined);
     const [projectMaturity, setProjectMaturity] = useState<string | undefined>(undefined);
-    const [fbUser, setFbUser] = useState<User | undefined>(undefined);
+    const [fbUser, setFbUser] = useState<Pick<User, 'displayName' | 'email'> | undefined>(identity);
 
     const [error, setError] = useState<string | undefined>(undefined);
     const isCompany = accountType === 'company';
@@ -57,13 +58,17 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
     ];
 
     useEffect(() => {
+        if (identity) {
+            setFbUser(identity);
+            return;
+        }
         const user = getFirebaseAuth().currentUser;
         if (!user) {
             console.error('No user found');
             return;
         }
         setFbUser(user);
-    }, []);
+    }, [identity]);
 
     const isValid = () => {
         if (!accountType) {

package/src/shell/login/signInUtils.ts

@@ -82,13 +82,27 @@ export function clearPendingSignin(): void {
 }
 
 /**
- * Clears the persisted sign-in records (last-successful-login and pending) and
- * signs out of Firebase. Best-effort: sign-out errors (e.g. no active session)
- * are swallowed.
+ * Promotes the pending sign-in record to the last-successful-login entry, stamping the
+ * authenticated user's display name.
+ *
+ * The returning-user step reads the record this writes, so a host that never calls it never
+ * remembers anyone. No-op when no sign-in is pending, which is the normal case for a page load
+ * that did not come back from an identity provider.
  */
-export async function resetSignInState(): Promise<void> {
-    clearLastSuccessfulLogin();
+export function finalizeSuccessfulLogin(name?: string): void {
+    const pending = readPendingSignin();
+    if (!pending) return;
+    writeLastSuccessfulLogin({
+        email: pending.email,
+        lastProvider: pending.provider,
+        tenantName: pending.tenantName,
+        name: name || undefined,
+    });
     clearPendingSignin();
+}
+
+/** Drops the Firebase session. Best-effort: no active session, or auth not initialized. */
+export async function signOutOfFirebase(): Promise<void> {
     try {
         await firebaseSignOut(getFirebaseAuth());
     } catch {
@@ -96,6 +110,17 @@ export async function resetSignInState(): Promise<void> {
     }
 }
 
+/**
+ * Clears the persisted sign-in records (last-successful-login and pending) and
+ * signs out of Firebase. Best-effort: sign-out errors (e.g. no active session)
+ * are swallowed.
+ */
+export async function resetSignInState(): Promise<void> {
+    clearLastSuccessfulLogin();
+    clearPendingSignin();
+    await signOutOfFirebase();
+}
+
 function buildRedirectPath(redirectTo?: string): string {
     let path = redirectTo || window.location.pathname || '/';
     if (path[0] !== '/') path = `/${path}`;

package/src/widgets/json-view/JSONCode.test.tsx

@@ -17,8 +17,8 @@ describe('JSONCode', () => {
         // number
         expect(html).toContain('<span class="text-attention">42</span>');
         // literals
-        expect(html).toContain('<span class="text-primary">true</span>');
-        expect(html).toContain('<span class="text-primary">null</span>');
+        expect(html).toContain('<span class="text-info">true</span>');
+        expect(html).toContain('<span class="text-info">null</span>');
     });
 
     it('treats a string with escaped quotes as a single token', () => {

package/src/widgets/json-view/JSONCode.tsx

@@ -54,7 +54,7 @@ export function renderJsonLine(line: string) {
             : stringValue
               ? 'text-success'
               : literal
-                ? 'text-primary'
+                ? 'text-info'
                 : numberValue
                   ? 'text-attention'
                   : undefined;