@vertesia/ui 0.67.0 → 0.68.0

package/src/features/user/UserInfo.tsx

@@ -1,5 +1,5 @@
 import { useUserSession } from "@vertesia/ui/session";
-import { ApiKey, ApiKeyTypes, PrincipalType, User } from "@vertesia/common";
+import { ApiKey, PrincipalType, User } from "@vertesia/common";
 import { Avatar, Table, Popover, PopoverContent, PopoverTrigger, useFetch } from "@vertesia/ui/core";
 import { ReactNode } from "react";
 
@@ -137,8 +137,12 @@ function UserAvatar({ userId, showTitle = false, size = "md" }: UserAvatarProps)
         return <AvatarPlaceholder />
     }
 
+    const description = (
+        <div className="truncate" title={user.email}>{user.email}</div>
+    )
+
     return (
-        <UserPopoverPanel title={user.name || user.email || user.username || "unknown"} description={user.email}>
+        <UserPopoverPanel title={user.name || user.email || user.username || "unknown"} description={description}>
             <div className="flex flex-row items-center gap-2">
                 <Avatar src={user.picture} name={user.name} color="bg-indigo-500" size={size} />
                 {showTitle && <div className="text-sm font-semibold pl-2">{user.name || user.email || user.username || "unknown"}</div>}
@@ -162,22 +166,21 @@ export function ApiKeyAvatar({ keyId, showTitle = false, size = "md" }: ApiKeyAv
         return <AvatarPlaceholder />
     }
 
-    const isPublic = data.type === ApiKeyTypes.public;
-    const title = isPublic ? "Public Key" : "Private Key";
-    const avatar = <Avatar name={isPublic ? "PK" : "SK"} color="bg-pink-500" size={size} />;
+    const title = "Private Key";
+    const avatar = <Avatar name={"PK"} color="bg-pink-500" size={size} />;
     const description = (
-        <Table className="dark:bg-gray-800 dark:text-gray-200">
+        <Table className="dark:bg-gray-800 dark:text-gray-200 table-fixed w-full">
             <tr>
-                <td className="font-semibold">Key:</td>
-                <td>{data?.name}</td>
+                <td className="font-semibold w-20">Key:</td>
+                <td className="truncate max-w-0">{data?.name}</td>
             </tr>
             <tr>
-                <td className="font-semibold">Account:</td>
-                <td>{data?.account}</td>
+                <td className="font-semibold w-20">Account:</td>
+                <td className="truncate max-w-0">{data?.account}</td>
             </tr>
             <tr>
-                <td className="font-semibold">Project:</td>
-                <td>{data?.project}</td>
+                <td className="font-semibold w-20">Project:</td>
+                <td className="truncate max-w-0">{data?.project}</td>
             </tr>
         </Table>
     );
@@ -186,7 +189,7 @@ export function ApiKeyAvatar({ keyId, showTitle = false, size = "md" }: ApiKeyAv
         <UserPopoverPanel title={title} description={description}>
             <div className="flex flex-row items-center gap-2">
                 {avatar}
-                {showTitle && <div className="text-sm font-semibold pl-2">{data?.name || data?.account || data?.project || "unknown"}</div>}
+                {showTitle && <div className="text-sm font-semibold">{data?.name || data?.account || data?.project || "unknown"}</div>}
             </div>
         </UserPopoverPanel >
     )
@@ -206,7 +209,7 @@ function UserPopoverPanel({ title, description, children }: UserPopoverPanelProp
             <PopoverContent align="center" sideOffset={8} side="right">
                 <div className="flex flex-col gap-1 rounded-md shadow-md p-2">
                     <div className='text-md font-semibold'>{title}</div>
-                    <div>{description}</div>
+                    {description}
                 </div>
             </PopoverContent>
         </Popover>

package/src/router/HistoryNavigator.ts

@@ -70,8 +70,8 @@ export interface NavigateOptions {
 
 function getElementHrefAsUrl(elem: HTMLElement) {
     if (elem && elem.tagName.toLowerCase() === 'a') {
-        const href = (elem as HTMLAnchorElement).href;
-        if (href != null) {
+        const href = (elem as HTMLAnchorElement)?.href.trim();
+        if (typeof href === 'string' && href.length > 0) {
             return new URL(href);
         }
     }

package/src/shell/SplashScreen.tsx

@@ -0,0 +1,41 @@
+import { Transition } from "@headlessui/react";
+import { Fragment, useEffect, useState } from "react";
+import { useUserSession } from "@vertesia/ui/session";
+
+
+interface SplashScreenProps {
+}
+export function SplashScreen({ }: SplashScreenProps) {
+    const { isLoading } = useUserSession();
+    const [show, setShow] = useState(true);
+
+    useEffect(() => {
+        if (!isLoading) {
+            setShow(false)
+        }
+        // setTimeout(() => {
+        //     setShow(false)
+        // }, 2000)
+    }, [isLoading])
+
+    // 300 500 700 1000
+    return (
+        <Transition
+            appear={true}
+            show={show}
+            as={Fragment}
+            unmount
+            leave="transition ease-in duration-500"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+        >
+            <div style={{ zIndex: 999999 }} className='fixed inset-x-0 inset-y-0'>
+                <div className="flex w-full h-full items-center justify-center">
+                    <div className="animate-[spin_4s_linear_infinite]">
+                        <img src='/icon.svg' className='w-10 h-auto animate-pulse rounded-full' />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    )
+}

package/src/shell/VertesiaShell.tsx

@@ -0,0 +1,27 @@
+import { ThemeProvider, ToastProvider } from "@vertesia/ui/core";
+import { UserPermissionProvider } from "@vertesia/ui/features";
+import { UserSessionProvider } from "@vertesia/ui/session";
+import { SplashScreen } from "./SplashScreen";
+import { SigninScreen } from "./login/SigninScreen";
+
+
+interface VertesiaShellProps {
+    children: React.ReactNode;
+    lightLogo?: string;
+    darkLogo?: string;
+}
+export function VertesiaShell({ children, lightLogo, darkLogo }: VertesiaShellProps) {
+    return (
+        <ToastProvider>
+            <UserSessionProvider>
+                <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+                    <SplashScreen />
+                    <SigninScreen allowedPrefix="/shared/" lightLogo={lightLogo} darkLogo={darkLogo} />
+                    <UserPermissionProvider>
+                        {children}
+                    </UserPermissionProvider>
+                </ThemeProvider>
+            </UserSessionProvider>
+        </ToastProvider>
+    )
+}

package/src/shell/index.tsx

@@ -0,0 +1,6 @@
+export * from './login/InviteAcceptModal';
+export * from "./login/SigninScreen";
+export * from "./login/TerminalLogin";
+export * from "./login/UserSessionMenu";
+export * from "./utils";
+export * from './VertesiaShell';

package/src/shell/login/EnterpriseSigninButton.tsx

@@ -0,0 +1,106 @@
+import { Button, Input, Spinner, useToast } from "@vertesia/ui/core";
+import { Env } from "@vertesia/ui/env";
+import { getFirebaseAuth, setFirebaseTenant, useUXTracking } from "@vertesia/ui/session";
+import { GoogleAuthProvider, OAuthProvider, signInWithRedirect } from "firebase/auth";
+import { useState } from "react";
+
+
+function getProvider(redirectTo?: string) {
+    const providerType = Env.firebase.providerType;
+    switch (providerType) {
+        case "oidc":
+            return new OAuthProvider("oidc.main");
+        case "google": {
+            let redirectPath = redirectTo || window.location.pathname || '/';
+            if (redirectPath[0] !== '/') {
+                redirectPath = '/' + redirectPath;
+            }
+            const provider = new GoogleAuthProvider();
+            provider.addScope('profile');
+            provider.addScope('email');
+            provider.setCustomParameters({
+                prompt: 'select_account',
+                redirect_uri: window.location.origin + redirectPath
+            });
+            return provider;
+        }
+        case "microsoft":
+            return new OAuthProvider("microsoft.com");
+        case "github":
+            return new OAuthProvider("github.com");
+        default:
+            return new OAuthProvider("oidc.main");
+    }
+}
+
+interface EnterpriseSigninButtonProps {
+    redirectTo?: string;
+}
+export default function EnterpriseSigninButton({ redirectTo }: EnterpriseSigninButtonProps) {
+    const [isLoading, setIsLoading] = useState(false);
+    const { trackEvent } = useUXTracking();
+
+    const [email, setEmail] = useState<string | undefined>("");
+    const toast = useToast();
+
+    const signIn = async () => {
+        if (!email) return;
+
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            toast({
+                title: "Invalid email address",
+                status: "error",
+                duration: 5000,
+            });
+            return;
+        }
+        // Env.firebase.tenantEmail = email;
+        setIsLoading(true);
+        setFirebaseTenant(email).then((data) => {
+            if (!data) {
+                toast({
+                    title: "Tenant not found",
+                    status: "error",
+                    duration: 5000,
+                });
+                setIsLoading(false);
+                return;
+            }
+            localStorage.setItem("tenantName", data.name ?? "");
+            const provider = getProvider(redirectTo);
+            trackEvent("enterprise_signin", {
+                firebaseTenantName: data.name,
+            });
+            Env.logger.info('Enterprise single sign-in', {
+                vertesia: {
+                    email: email,
+                    firebaseTenantName: data.name,
+                    firebaseTenantId: data.firebaseTenantId,
+                },
+            });
+
+            signInWithRedirect(getFirebaseAuth(), provider);
+            setIsLoading(false);
+        });
+    };
+
+    return (
+        <>
+            <Input value={email} onChange={setEmail} placeholder="Enter your enterprise email" type="email" />
+            {
+                isLoading ? (
+                    <div className="w-full flex justify-center">
+                        <Spinner />
+                    </div>
+                ) : (
+                    <Button variant={"outline"}
+                        onClick={signIn}
+                        className="w-full mt-2 py-4 flex rounded-lg hover:shadow-sm transition duration-150 text-center">
+                        <span className="text-sm font-semibold">Continue with Enterprise SSO</span>
+                    </Button>
+                )
+            }
+        </>
+    );
+}

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,78 @@
+import { TransientToken, UserInviteTokenData } from "@vertesia/common"
+import { Button, Modal, ModalBody, ModalTitle } 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) {
+                console.log("Got invites - showing modal")
+                setInvites(invites)
+                /*toast({
+                    status: 'info',
+                    title: 'You have pending invites',
+                    description: 'Click the button on the top right to review them.'
+                })*/
+                setShowModal(true);
+            }
+        })
+    }, [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)
+        setInvites(remainingInvites)
+        if (remainingInvites.length === 0) {
+            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 => (
+        <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}</div>
+                <div className="text-xs">Role: {invite.data.role}</div>
+                <div className="text-xs">by {invite.data.invitedBy.name}</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>
+            <Modal isOpen={showModal} onClose={closeModal}>
+                <ModalTitle>Review Invites</ModalTitle>
+                <ModalBody>
+                    <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}
+                </ModalBody>
+            </Modal>
+        </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>
+    );
+
+}