@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/shell/login/SigninScreen.tsx

@@ -1,167 +1,264 @@
-import { SignupData, SignupPayload } from "@vertesia/common";
-import { Button, useSafeLayoutEffect } from "@vertesia/ui/core";
-import { Env } from "@vertesia/ui/env";
-import { useUITranslation } from "@vertesia/ui/i18n";
-import { UserNotFoundError, useUserSession, useUXTracking } from "@vertesia/ui/session";
-import { RegionTag } from "@vertesia/ui/layout";
-import clsx from "clsx";
-import { useEffect, useState } from "react";
-import EnterpriseSigninButton from "./EnterpriseSigninButton";
-import GitHubSignInButton from "./GitHubSignInButton";
-import GoogleSignInButton from "./GoogleSignInButton";
-import MicrosoftSignInButton from "./MicrosoftSigninButton";
-import SignupForm from "./SignupForm";
+import type { SignupData, SignupPayload } from '@vertesia/common';
+import { Env } from '@vertesia/ui/env';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { RegionTag } from '@vertesia/ui/layout';
+import { UserNotFoundError, 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 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';
 
 interface SigninScreenProps {
     isNested?: boolean;
-    allowedPrefix?: string;
+    allowedPrefix?: string | string[];
     lightLogo?: string;
     darkLogo?: string;
-}
-export function SigninScreen({ allowedPrefix, isNested = false, lightLogo, darkLogo }: SigninScreenProps) {
-    const [allow, setAllow] = useState(false);
-    useSafeLayoutEffect(() => {
-        allowedPrefix && setAllow(window.location.href.startsWith(allowedPrefix));
-    }, []);
-    return allow ? null : <SigninScreenImpl isNested={isNested} lightLogo={lightLogo} darkLogo={darkLogo} />;
+    preservePath?: boolean;
+    suppressAuthErrorPrefix?: string | string[];
 }
 
-function SigninScreenImpl({ isNested = false, lightLogo, darkLogo }: SigninScreenProps) {
-    const { t } = useUITranslation();
-    const { isLoading, user, authError } = useUserSession();
+export function SigninScreen({
+    allowedPrefix,
+    isNested = false,
+    lightLogo,
+    darkLogo,
+    preservePath,
+    suppressAuthErrorPrefix,
+}: SigninScreenProps) {
+    const pathname = typeof window === 'undefined' ? '' : window.location.pathname;
+    const allow = matchesPathPrefix(pathname, allowedPrefix);
+    const suppressAuthError = matchesPathPrefix(pathname, suppressAuthErrorPrefix);
+    return allow ? null : (
+        <SigninScreenImpl
+            isNested={isNested}
+            lightLogo={lightLogo}
+            darkLogo={darkLogo}
+            preservePath={preservePath}
+            suppressAuthError={suppressAuthError}
+        />
+    );
+}
 
-    return !isLoading && !user ? (
-        <div
-            style={{ zIndex: 999998 }}
-            className={(isNested ? "absolute" : "fixed") + "overflow-y-auto "}
-        >
-            <div
-                className={clsx(
-                    "flex flex-col items-center justify-center py-14 px-4",
-                )}
-            >
-
-                <StandardSigninPanel authError={authError} lightLogo={lightLogo} darkLogo={darkLogo} />
-                <div className="flex gap-x-6 mt-10 justify-center items-center text-muted">
-                    <a href="https://vertesiahq.com/privacy" className="text-sm">
-                        {t('auth.privacyPolicy')}
-                    </a>
-                    <a href="https://vertesiahq.com/terms" className="text-sm">
-                        {t('auth.termsOfService')}
-                    </a>
-                    <RegionTag />
-                </div>
-            </div>
-        </div>
-    ) : null;
+function matchesPathPrefix(pathname: string, prefix?: string | string[]) {
+    const prefixes = Array.isArray(prefix) ? prefix : prefix ? [prefix] : [];
+    return prefixes.some((candidate) => {
+        if (pathname === candidate) {
+            return true;
+        }
+        return pathname.startsWith(candidate.endsWith('/') ? candidate : `${candidate}/`);
+    });
 }
 
-function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
-    authError?: Error,
-    darkLogo?: string,
-    lightLogo?: string
-}) {
+type Mode = 'email' | 'providers' | 'tenant' | 'blocked' | 'returning' | 'pending' | 'signup';
+
+function SigninScreenImpl({
+    isNested = false,
+    lightLogo,
+    darkLogo,
+    preservePath,
+    suppressAuthError,
+}: SigninScreenProps & { suppressAuthError?: boolean }) {
     const { t } = useUITranslation();
-    const [signupData, setSignupData] = useState<SignupData | undefined>(undefined);
-    const [collectSignupData, setCollectSignupData] = useState(false);
-    const { signOut } = useUserSession();
+    const { isLoading, user, authError, signOut } = useUserSession();
     const { trackEvent } = useUXTracking();
 
-    history.replaceState({}, '', '/');
-
-    const goBack = () => {
-        console.log("Going back, signing out");
-        setSignupData(undefined);
-        setCollectSignupData(false);
-        signOut();
-    };
+    const [storedSession, setStoredSession] = useState<LastSuccessfulLogin | null>(() => readLastSuccessfulLogin());
+    const [mode, setMode] = useState<Mode>(() => {
+        const s = readLastSuccessfulLogin();
+        return s ? 'returning' : 'email';
+    });
+    const [email, setEmail] = useState('');
+    const [tenant, setTenant] = useState<TenantInfo | undefined>(undefined);
+    const [pendingProvider, setPendingProvider] = useState<ProviderId | null>(null);
 
-    const goToSignup = () => {
-        setSignupData(undefined);
-        setCollectSignupData(true);
-    };
+    useEffect(() => {
+        if (!preservePath) {
+            history.replaceState({}, '', '/');
+        }
+    }, [preservePath]);
 
+    // Route based on authError surfaced by the session.
     useEffect(() => {
+        if (!authError) return;
         if (authError instanceof UserNotFoundError) {
-            console.log("User not found, redirecting to signup");
-            goToSignup();
+            setMode('signup');
+        } else if (isInviteRequiredError(authError)) {
+            const pending = readPendingSignin();
+            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],
+    );
+
+    // "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();
+    }, []);
+
+    // Submits the signup form to /auth/signup, then redirects into the app.
     const onSignup = (data: SignupData, fbToken: string) => {
-        console.log("Got Signup data", data);
-        setSignupData(data);
-        const payload: SignupPayload = {
-            signupData: data,
-            firebaseToken: fbToken,
-        };
-        fetch(Env.endpoints.studio + "/auth/signup", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
+        const payload: SignupPayload = { signupData: data, firebaseToken: fbToken };
+        void fetch(`${Env.endpoints.studio}/auth/signup`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload),
-        }).then((res) => {
-            console.log("Signup successful", payload, res);
-
-            trackEvent("sign_up");
-            window.location.href = "/";
+        }).then(() => {
+            trackEvent('sign_up');
+            window.location.href = '/';
         });
     };
 
+    const shouldHideTransientAuthError =
+        suppressAuthError && authError !== undefined && !(authError instanceof UserNotFoundError);
+
+    if (isLoading || user || shouldHideTransientAuthError) return null;
+
+    let content: React.ReactNode = null;
+    if (mode === 'pending' && pendingProvider) {
+        content = <SignInAuthPending provider={pendingProvider} />;
+    } else if (mode === 'blocked') {
+        content = (
+            <SignInTenantBlockedStep
+                email={email || storedSession?.email || ''}
+                tenantName={tenant?.label || tenant?.name || storedSession?.tenantName || undefined}
+                onBack={startOver}
+            />
+        );
+    } 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} />;
+    }
+
     return (
-        <>
-            {lightLogo && <img src={lightLogo} alt='logo' className='h-15 block dark:hidden' />}
-            {darkLogo && <img src={darkLogo} alt='logo' className='h-15 hidden dark:block' />}
-
-            {signupData && (
-                <div className="my-6">
-                    {t('auth.needToMakeChange')}{" "}
-                    <Button onClick={goToSignup}> {t('auth.goBack')}</Button>
-                </div>
-            )}
-            <div className="flex flex-col space-y-2">
-                {collectSignupData && !localStorage.getItem('tenantName') ? (
-                    <SignupForm onSignup={onSignup} goBack={goBack} />
-                ) : (
-
-                    <div className="flex flex-col">
-                        <div className="my-4">
-                            <h2 className="text-2xl font-bold text-center">{t('auth.logInOrSignUp')}</h2>
-                        </div>
-                        <div className="max-w-2xl text-center my-2 px-2">
-                            {t('auth.firstTimeMessage')}
-                            <br />
-                            {t('auth.firstTimeDetails')}
+        <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>
-                        <div className="flex items-center flex-col">
-                            <div className="py-4 w-70">
-                                <GoogleSignInButton />
-                                <GitHubSignInButton />
-                                <MicrosoftSignInButton />
-                            </div>
-                            <div className="flex items-center flex-row w-70 text-muted">
-                                <hr className="w-full" />
-                                <div className="px-2 text-xs">{t('auth.or')}</div>
-                                <hr className="w-full" />
-                            </div>
-                            <div className="py-4 w-70">
-                                <EnterpriseSigninButton />
+                    )}
+
+                    {content}
+
+                    {authError && !(authError instanceof UserNotFoundError) && !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')}
+                                <pre className="mt-2 text-xs">{t('auth.error', { message: authError.message })}</pre>
                             </div>
                         </div>
-                        {authError && !(authError instanceof UserNotFoundError) && (
-                            <div className="text-center">
-                                <div className="">
-                                    {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')}
-                                    <pre className="mt-2">{t('auth.error', { message: authError.message })}</pre>
-                                </div>
-                            </div>
-                        )}
+                    )}
+
+                    <div className="flex items-center gap-5 mt-10 text-xs text-muted-foreground">
+                        <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>
             </div>
-        </>
+        </div>
     );
 }

package/src/shell/login/SignupForm.tsx

@@ -1,10 +1,9 @@
-import { SignupData } from "@vertesia/common";
-import { Button, Input, RadioGroup, SelectBox } from "@vertesia/ui/core";
-import { User } from "firebase/auth";
-import { useEffect, useState } from "react";
-import { getFirebaseAuth } from "@vertesia/ui/session";
-import { useUITranslation } from '../../i18n/index.js';
-
+import type { SignupData } from '@vertesia/common';
+import { Button, Input, RadioGroup, SelectBox } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { getFirebaseAuth } from '@vertesia/ui/session';
+import type { User } from 'firebase/auth';
+import { useEffect, useState } from 'react';
 
 interface CompanySizeOption {
     id: number;
@@ -26,7 +25,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
     const [fbUser, setFbUser] = useState<User | undefined>(undefined);
 
     const [error, setError] = useState<string | undefined>(undefined);
-    const isCompany = accountType === "company";
+    const isCompany = accountType === 'company';
 
     const companySizeOptions: CompanySizeOption[] = [
         { id: 1, label: t('signup.size1to10') },
@@ -38,23 +37,23 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
 
     const accountTypeOptions = [
         {
-            id: "personal",
+            id: 'personal',
             label: t('signup.personal'),
             description: t('signup.personalDescription'),
         },
         {
-            id: "company",
+            id: 'company',
             label: t('signup.company'),
             description: t('signup.companyDescription'),
         },
     ];
 
     const projectMaturityOptions = [
-        { id: "testing", label: t('signup.justTesting') },
-        { id: "exploring", label: t('signup.activelyExploring') },
-        { id: "using", label: t('signup.alreadyUsing') },
-        { id: "migrating", label: t('signup.migratingLLMs') },
-        { id: "other", label: t('signup.other') },
+        { id: 'testing', label: t('signup.justTesting') },
+        { id: 'exploring', label: t('signup.activelyExploring') },
+        { id: 'using', label: t('signup.alreadyUsing') },
+        { id: 'migrating', label: t('signup.migratingLLMs') },
+        { id: 'other', label: t('signup.other') },
     ];
 
     useEffect(() => {
@@ -64,7 +63,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
             return;
         }
         setFbUser(user);
-    }, [fbUser]);
+    }, []);
 
     const isValid = () => {
         if (!accountType) {
@@ -81,9 +80,8 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
             return false;
         }
 
-        return true
-    }
-
+        return true;
+    };
 
     const onSubmit = async () => {
         if (!isValid()) return;
@@ -97,7 +95,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
             maturity: projectMaturity,
         };
 
-        window.localStorage.setItem("composableSignupData", JSON.stringify(signupData));
+        window.localStorage.setItem('composableSignupData', JSON.stringify(signupData));
 
         const fbToken = await getFirebaseAuth().currentUser?.getIdToken();
         console.log('Got firebase token', getFirebaseAuth(), fbToken);
@@ -107,8 +105,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
         }
 
         onSignup(signupData, fbToken);
-
-    }
+    };
 
     return (
         <div className="flex flex-col space-y-2">
@@ -116,9 +113,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
                 <p className="prose text-sm text-muted pt-4">
                     {t('signup.welcomeMessage', { name: fbUser?.displayName, email: fbUser?.email })}
                 </p>
-                {error &&
-                    <div className="text-destructive">{error}</div>
-                }
+                {error && <div className="text-destructive">{error}</div>}
             </div>
             <FormItem label={t('signup.accountType')}>
                 <RadioGroup
@@ -127,10 +122,11 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
                     onSelect={(option) => setAccountType(option.id)}
                 />
             </FormItem>
-            {isCompany &&
+            {isCompany && (
                 <>
                     <FormItem label={t('signup.companySize')}>
-                        <SelectBox className="w-full border border-accent bg-muted"
+                        <SelectBox
+                            className="w-full border border-accent bg-muted"
                             value={companySize}
                             options={companySizeOptions}
                             onChange={setCompanySize}
@@ -145,9 +141,10 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
                         <Input value={companyWebsite} onChange={setCompanyWebsite} type="text" />
                     </FormItem>
                 </>
-            }
+            )}
             <FormItem label={t('signup.projectMaturity')}>
-                <SelectBox className="w-full border border-accent bg-muted"
+                <SelectBox
+                    className="w-full border border-accent bg-muted"
                     options={projectMaturityOptions}
                     value={projectMaturityOptions.find((option) => option.id === projectMaturity)}
                     optionLabel={(option) => option?.label}
@@ -167,13 +164,11 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
     );
 }
 
-function FormItem({ label, children }: { label: string, children: React.ReactNode }) {
-
+function FormItem({ label, children }: { label: string; children: React.ReactNode }) {
     return (
         <div className="flex flex-col space-y-2 pt-4">
             <div className="text-sm text-muted">{label}</div>
             {children}
         </div>
-    )
-
+    );
 }