@vertesia/ui 0.24.0-dev.202601221707

package/src/shell/login/GitHubSignInButton.tsx

@@ -0,0 +1,40 @@
+import { GithubAuthProvider, signInWithRedirect } from "firebase/auth";
+import { getFirebaseAuth } from "@vertesia/ui/session";
+import { Button } from "@vertesia/ui/core";
+
+interface GitHubSignInButtonProps {
+    redirectTo?: string;
+}
+export default function GitHubSignInButton({ }: GitHubSignInButtonProps) {
+    const signIn = () => {
+        localStorage.removeItem("tenantName");
+        //with github can only have one allowed redirect
+        const baseUrl = "https://dengenlabs.firebaseapp.com/__/auth/handler";
+        let redirectPath = baseUrl + window.location.pathname;
+        if (redirectPath[0] !== "/") {
+            redirectPath = "/" + redirectPath;
+        }
+        const provider = new GithubAuthProvider();
+        provider.addScope("profile");
+        provider.addScope("email");
+        /*provider.setCustomParameters({
+            redirect_uri: redirectPath,
+        });*/
+        signInWithRedirect(getFirebaseAuth(), provider);
+    };
+
+    return (
+        <Button variant={"outline"}
+            onClick={signIn}
+            className="w-full py-5 flex rounded-lg hover:shadow-sm transition duration-150 text-center mb-2">
+            {/* <Github className="size-6" /> */}
+            <img
+                className="size-6 bg-white rounded-full"
+                src="https://www.svgrepo.com/show/503359/github.svg"
+                loading="lazy"
+                alt="github logo"
+            />
+            <span className="text-sm font-semibold">Continue with GitHub</span>
+        </Button>
+    );
+}

package/src/shell/login/GoogleSignInButton.tsx

@@ -0,0 +1,36 @@
+import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";
+import { getFirebaseAuth } from "@vertesia/ui/session";
+import { Button } from "@vertesia/ui/core";
+
+interface GoogleSignInButtonProps {
+    redirectTo?: string;
+}
+export default function GoogleSignInButton({ redirectTo }: GoogleSignInButtonProps) {
+
+    const signIn = () => {
+        localStorage.removeItem("tenantName");
+        let redirectPath = redirectTo || window.location.pathname || '/';
+        if (redirectPath[0] !== '/') {
+            redirectPath = '/' + redirectPath;
+        }
+        const provider = new GoogleAuthProvider();
+        provider.addScope('profile');
+        provider.addScope('email');
+        // always ask to select the google account
+        //console.log('redirectPath', window.location.origin + redirectPath)
+        provider.setCustomParameters({
+            prompt: 'select_account',
+            redirect_uri: window.location.origin + redirectPath
+        });
+        signInWithRedirect(getFirebaseAuth(), provider);
+    };
+
+    return (
+        <Button variant={"outline"}
+            onClick={signIn}
+            className="w-full py-5 flex rounded-lg hover:shadow-sm transition duration-150 text-center mb-2">
+            <img className="size-6" src="https://www.svgrepo.com/show/475656/google-color.svg" loading="lazy" alt="google logo" />
+            <span className="text-sm font-semibold">Continue with Google</span>
+        </Button>
+    );
+}

package/src/shell/login/InviteAcceptModal.tsx

@@ -0,0 +1,94 @@
+import { TransientToken, UserInviteTokenData } from "@vertesia/common"
+import { Button, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core"
+import { useEffect, useState } from "react"
+import { useUserSession } from "@vertesia/ui/session"
+
+
+export function InviteAcceptModal() {
+
+    const session = useUserSession()
+    const { client, account } = session;
+    const [showModal, setShowModal] = useState(false)
+    const [invites, setInvites] = useState<TransientToken<UserInviteTokenData>[]>([])
+
+    useEffect(() => {
+        client.account.listInvites().then(invites => {
+            if (invites.length > 0) {
+                // Filter out legacy invites that do not have account data
+                const notLegacyInvites = invites.filter(i => i.data.account);
+                if (notLegacyInvites.length === 0) {
+                    console.log("No valid invites found, closing modal")
+                    return;
+                }
+                // If we have valid invites, show the modal
+                console.log("Found valid invites", notLegacyInvites.length)
+                setShowModal(true);
+                setInvites(notLegacyInvites);
+            } else {
+                console.log("No invites found, closing modal")
+                setShowModal(false);
+            }
+        }).catch(err => {
+            console.error("Error fetching invites", err);
+        })
+    }, [account?.id])
+
+    const closeModal = () => setShowModal(false)
+
+    const accept = async (invite: TransientToken<UserInviteTokenData>) => {
+        await client.account.acceptInvite(invite.id);
+        await session.fetchAccounts();
+        const remainingInvites = invites.filter(i => i.id !== invite.id)
+
+        const notLegacyInvites = remainingInvites.filter(i => i.data.account);
+        if (notLegacyInvites.length > 0) {
+            setInvites(notLegacyInvites);
+        } else {
+            closeModal();
+        }
+    }
+
+    const reject = async (invite: TransientToken<UserInviteTokenData>) => {
+        await client.account.rejectInvite(invite.id)
+        const remainingInvites = invites.filter(i => i.id !== invite.id)
+        setInvites(remainingInvites)
+        if (remainingInvites.length === 0) {
+            closeModal();
+        }
+    }
+
+    const inviteList = invites.map(invite => {
+        if (!invite.data.account) {
+            console.warn("Invite has no account data", invite);
+            return null; // Skip rendering this invite
+        }
+
+        return (<div key={invite.id} className="flex flex-row w-full justify-between border rounded-sm px-2 py-2 ">
+            <div className="flex flex-col">
+                <div className="w-full font-semibold">{invite.data.account.name ?? invite.data.account}</div>
+                {invite.data.project && <div className="w-full text-base">- {invite.data.project.name}</div>}
+                <div className="text-xs">Role: {invite.data.role}</div>
+                {invite.data.invited_by &&<div className="text-xs">by {invite.data.invited_by.name ?? invite.data.invited_by}</div>}
+            </div>
+            <div className="flex flex-col gap-4">
+                <Button size={'xs'} onClick={() => accept(invite)}>Accept</Button> <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>Reject</Button>
+            </div>
+        </div>)
+    })
+
+    return (
+        <div>
+            <VModal isOpen={showModal} onClose={closeModal}>
+                <VModalTitle>Review Invites</VModalTitle>
+                <VModalBody>
+                    <div className="text-sm pb-4">
+                        You have received the following invites to join other accounts.
+                        Please review and accept or declined them.
+                    </div>
+                    {inviteList}
+                </VModalBody>
+            </VModal>
+        </div>
+    )
+
+}

package/src/shell/login/MicrosoftSigninButton.tsx

@@ -0,0 +1,30 @@
+import { OAuthProvider, signInWithRedirect } from "firebase/auth";
+import { getFirebaseAuth } from "@vertesia/ui/session";
+import { Button } from "@vertesia/ui/core";
+
+interface GoogleSignInButtonProps {
+    redirectTo?: string;
+}
+export default function MicrosoftSignInButton({ redirectTo }: GoogleSignInButtonProps) {
+
+    const signIn = () => {
+        localStorage.removeItem("tenantName");
+        let redirectPath = redirectTo || window.location.pathname || '/';
+        if (redirectPath[0] !== '/') {
+            redirectPath = '/' + redirectPath;
+        }
+        const provider = new OAuthProvider('microsoft.com');
+        provider.addScope('profile');
+        provider.addScope('email');
+        signInWithRedirect(getFirebaseAuth(), provider);
+    };
+
+    return (
+        <Button variant={"outline"}
+            onClick={signIn}
+            className="w-full py-5 flex rounded-lg hover:shadow-sm transition duration-150 text-center">
+            <img className="size-6" src="https://learn.microsoft.com/en-us/entra/identity-platform/media/howto-add-branding-in-apps/ms-symbollockup_mssymbol_19.svg" loading="lazy" alt="microsoft logo" />
+            <span className="text-sm font-semibold">Continue with Microsoft</span>
+        </Button>
+    );
+}

package/src/shell/login/PreviewIcon.tsx

@@ -0,0 +1,29 @@
+import { SvgIcon } from "@vertesia/ui/widgets";
+
+interface PreviewIconProps {
+    className?: string;
+}
+export function PreviewIcon({ className }: PreviewIconProps) {
+    return (
+        <SvgIcon content={SVG} className={className} />
+    )
+}
+
+
+const SVG = `
+<?xml version="1.0"?>
+<svg fill="none" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="white" fill-opacity="0.01" height="48" width="48" />
+    <path
+        d="M6 16C6.63472 17.2193 7.59646 18.3504 8.82276 19.3554C12.261 22.1733 17.779 24 24 24C30.221 24 35.739 22.1733 39.1772 19.3554C40.4035 18.3504 41.3653 17.2193 42 16"
+        stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
+    <path d="M28.9777 24L31.0482 31.7274" stroke="currentColor" stroke-linecap="round"
+        stroke-linejoin="round" stroke-width="4" />
+    <path d="M37.3535 21.3536L43.0104 27.0104" stroke="currentColor" stroke-linecap="round"
+        stroke-linejoin="round" stroke-width="4" />
+    <path d="M4.99998 27.0104L10.6568 21.3536" stroke="currentColor" stroke-linecap="round"
+        stroke-linejoin="round" stroke-width="4" />
+    <path d="M16.9276 31.7274L18.9982 24" stroke="currentColor" stroke-linecap="round"
+        stroke-linejoin="round" stroke-width="4" />
+</svg>
+`;

package/src/shell/login/SignInModal.tsx

@@ -0,0 +1,28 @@
+import { Button, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
+import GitHubSignInButton from "./GitHubSignInButton";
+import GoogleSignInButton from "./GoogleSignInButton";
+import MicrosoftSignInButton from "./MicrosoftSigninButton";
+
+
+
+interface SignInModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export default function SignInModal({ isOpen, onClose }: SignInModalProps) {
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose}>
+            <ModalTitle>Sign In</ModalTitle>
+            <ModalBody className="flex justify-center">
+                <GoogleSignInButton />
+                <GitHubSignInButton />
+                <MicrosoftSignInButton />
+            </ModalBody>
+            <ModalFooter justify="end">
+                <Button variant="ghost" onClick={onClose}>Cancel</Button>
+            </ModalFooter>
+        </Modal>
+    );
+
+}

package/src/shell/login/SigninScreen.tsx

@@ -0,0 +1,162 @@
+import { SignupData, SignupPayload } from "@vertesia/common";
+import { Button, useSafeLayoutEffect } from "@vertesia/ui/core";
+import { Env } from "@vertesia/ui/env";
+import { UserNotFoundError, useUserSession, useUXTracking } from "@vertesia/ui/session";
+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";
+
+interface SigninScreenProps {
+    isNested?: boolean;
+    allowedPrefix?: 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} />;
+}
+
+function SigninScreenImpl({ isNested = false, lightLogo, darkLogo }: SigninScreenProps) {
+    const { isLoading, user, authError } = useUserSession();
+
+    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 text-muted">
+                    <a href="https://vertesiahq.com/privacy" className="text-sm">
+                        Privacy Policy
+                    </a>
+                    <a href="https://vertesiahq.com/terms" className="text-sm">
+                        Terms of Service
+                    </a>
+                </div>
+            </div>
+        </div>
+    ) : null;
+}
+
+function StandardSigninPanel({ authError, darkLogo, lightLogo }: {
+    authError?: Error,
+    darkLogo?: string,
+    lightLogo?: string
+}) {
+    const [signupData, setSignupData] = useState<SignupData | undefined>(undefined);
+    const [collectSignupData, setCollectSignupData] = useState(false);
+    const { signOut } = useUserSession();
+    const { trackEvent } = useUXTracking();
+
+    history.replaceState({}, '', '/');
+
+    const goBack = () => {
+        console.log("Going back, signing out");
+        setSignupData(undefined);
+        setCollectSignupData(false);
+        signOut();
+    };
+
+    const goToSignup = () => {
+        setSignupData(undefined);
+        setCollectSignupData(true);
+    };
+
+    useEffect(() => {
+        if (authError instanceof UserNotFoundError) {
+            console.log("User not found, redirecting to signup");
+            goToSignup();
+        }
+    }, [authError]);
+
+    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" },
+            body: JSON.stringify(payload),
+        }).then((res) => {
+            console.log("Signup successful", payload, res);
+
+            trackEvent("sign_up");
+            window.location.href = "/";
+        });
+    };
+
+    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">
+                    Need to make a change?{" "}
+                    <Button onClick={goToSignup}> Go back</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">Log in or Sign up</h2>
+                        </div>
+                        <div className="max-w-2xl text-center my-2 px-2">
+                            First time here? No problem, it&apos;s free to try!
+                            <br />
+                            We&apos;ll just ask you a couple of questions next and you&apos;ll be on your way.
+                        </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">OR</div>
+                                <hr className="w-full" />
+                            </div>
+                            <div className="py-4 w-70">
+                                <EnterpriseSigninButton />
+                            </div>
+                        </div>
+                        {authError && !(authError instanceof UserNotFoundError) && (
+                            <div className="text-center">
+                                <div className="">
+                                    Sorry, we have not been able to sign you in.
+                                    <br />
+                                    Please try again or contact
+                                    <a className='text-info mx-1' href="mailto:support@vertesiahq.com">support@vertesiahq.com</a>
+                                    if it persists.
+                                    <pre className="mt-2">Error: {authError.message}</pre>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </>
+    );
+}

package/src/shell/login/SignupForm.tsx

@@ -0,0 +1,179 @@
+import { SignupData } from "@vertesia/common";
+import { Button, Input, VSelectBox, SelectStack } from "@vertesia/ui/core";
+import { User } from "firebase/auth";
+import { useEffect, useState } from "react";
+import { getFirebaseAuth } from "@vertesia/ui/session";
+
+
+interface CompanySizeOption {
+    id: number;
+    label: string;
+}
+
+const companySizeOptions: CompanySizeOption[] = [
+    { id: 1, label: "1-10 employees" },
+    { id: 11, label: "11-100 employees" },
+    { id: 101, label: "101-1000 employees" },
+    { id: 1001, label: "1001-5000 employees" },
+    { id: 5001, label: "5000+ employees" },
+];
+
+const accountTypeOptions = [
+    {
+        id: "personal",
+        label: "Personal",
+        description: "For personal use, or for a small team.",
+    },
+    {
+        id: "company",
+        label: "Company",
+        description: "For a company or organization.",
+    },
+];
+
+const projectMaturityOptions = [
+    { id: "testing", label: "Just Testing or Evaluating LLMs" },
+    { id: "exploring", label: "Actively Exploring LLMs on a Project" },
+    { id: "using", label: "Already Using LLMs in Production" },
+    { id: "migrating", label: "Migrating to different LLMs" },
+    { id: "other", label: "Other" },
+];
+
+interface SignupFormProps {
+    onSignup: (data: SignupData, fbToken: string) => void;
+    goBack: () => void;
+}
+
+export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
+    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 [error, setError] = useState<string | undefined>(undefined);
+    const isCompany = accountType === "company";
+
+    useEffect(() => {
+        const user = getFirebaseAuth().currentUser;
+        if (!user) {
+            console.error('No user found');
+            return;
+        }
+        setFbUser(user);
+    }, [fbUser]);
+
+    const isValid = () => {
+        if (!accountType) {
+            setError("Please select an account type");
+            return false;
+        }
+        if (isCompany && !companyName) {
+            setError("Please enter an organization name");
+            return false;
+        }
+
+        if (isCompany && !companySize) {
+            setError("Please select a company size");
+            return false;
+        }
+
+        return true
+    }
+
+
+    const onSubmit = async () => {
+        if (!isValid()) return;
+        if (!accountType) return;
+
+        const signupData = {
+            accountType: accountType,
+            companyName: companyName,
+            companySize: companySize?.id,
+            companyWebsite: companyWebsite,
+            maturity: projectMaturity,
+        };
+
+        window.localStorage.setItem("composableSignupData", JSON.stringify(signupData));
+
+        const fbToken = await getFirebaseAuth().currentUser?.getIdToken();
+        console.log('Got firebase token', getFirebaseAuth(), fbToken);
+        if (!fbToken) {
+            console.error('No firebase token found');
+            return;
+        }
+
+        onSignup(signupData, fbToken);
+
+    }
+
+    return (
+        <div className="flex flex-col space-y-2">
+            <div className="prose">
+                <p className="prose text-sm text-muted pt-4">
+                    Welcome to Vertesia, {fbUser?.displayName} ({fbUser?.email}).
+                    Please tell us a little bit about yourself and you&apos;ll be on your way.
+                    No credit card is required.
+                </p>
+                {error &&
+                    <div className="text-destructive">{error}</div>
+                }
+            </div>
+            <FormItem label="Account Type">
+                <SelectStack
+                    options={accountTypeOptions}
+                    selected={accountTypeOptions.find((option) => option.id === accountType)}
+                    onSelect={(option) => setAccountType(option.id)}
+                />
+            </FormItem>
+            {isCompany &&
+                <>
+                    <FormItem label="Company Size">
+                        <VSelectBox className="w-full border border-accent bg-muted"
+                            value={companySize}
+                            options={companySizeOptions}
+                            onChange={setCompanySize}
+                            optionLabel={(option) => option?.label}
+                            placeholder='Select Company Size'
+                        />
+                    </FormItem>
+                    <FormItem label="Company Name">
+                        <Input value={companyName} onChange={setCompanyName} type="text" required={true} />
+                    </FormItem>
+                    <FormItem label="Company Website">
+                        <Input value={companyWebsite} onChange={setCompanyWebsite} type="text" />
+                    </FormItem>
+                </>
+            }
+            <FormItem label="Project Maturity">
+                <VSelectBox className="w-full border border-accent bg-muted"
+                    options={projectMaturityOptions}
+                    value={projectMaturityOptions.find((option) => option.id === projectMaturity)}
+                    optionLabel={(option) => option?.label}
+                    placeholder='Select Project Maturity'
+                    onChange={(option) => setProjectMaturity(option?.id)}
+                />
+            </FormItem>
+            <div className="pt-8 flex flex-col">
+                <Button variant="primary" onClick={onSubmit} size="xl">
+                    <span className="text-lg">Sign Up</span>
+                </Button>
+                <Button variant="ghost" size="xl" className="mt-4" onClick={goBack}>
+                    <span className="">Wrong account, go back</span>
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+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>
+    )
+
+}