@vertesia/ui 0.70.0 → 0.72.0

package/src/shell/SplashScreen.tsx

@@ -1,11 +1,12 @@
 import { Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, ReactNode, useEffect, useState } from "react";
 import { useUserSession } from "@vertesia/ui/session";
 
 
 interface SplashScreenProps {
+    icon?: ReactNode;
 }
-export function SplashScreen({ }: SplashScreenProps) {
+export function SplashScreen({ icon: Icon }: SplashScreenProps) {
     const { isLoading } = useUserSession();
     const [show, setShow] = useState(true);
 
@@ -32,10 +33,42 @@ export function SplashScreen({ }: SplashScreenProps) {
             <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 className='animate-pulse rounded-full bg-transparent'>
+                            {Icon || <LoadingIcon />}
+                        </div>
                     </div>
                 </div>
             </div>
         </Transition>
     )
+}
+
+function LoadingIcon() {
+    const stopColor1 = "currentColor";
+    const stopColor2 = "currentColor";
+    // const stopColor1 = "#4F46E5";
+    // const stopColor2 = "#4F46E5";
+    return (
+        <svg
+            className="w-8 h-8 text-indigo-600"
+            viewBox="0 0 50 50"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <defs>
+                <linearGradient id="spinner-gradient" x1="1" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor={stopColor1} stopOpacity="1" />
+                    <stop offset="100%" stopColor={stopColor2} stopOpacity="0" />
+                </linearGradient>
+            </defs>
+            <circle
+                cx="25"
+                cy="25"
+                r="20"
+                stroke="url(#spinner-gradient)"
+                strokeWidth="5"
+                fill="none"
+                strokeLinecap="round"
+            />
+        </svg>
+    )
 }

package/src/shell/VertesiaShell.tsx

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

package/src/shell/apps/CheckAppAccess.tsx

@@ -0,0 +1,25 @@
+import { ErrorBox } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { ReactNode, useEffect, useState } from "react";
+
+
+export function CheckAppAccess({ name, children }: { name: string, children: ReactNode }) {
+    const [hasAccess, setHasAccess] = useState<boolean | null>(null);
+    const { authToken } = useUserSession();
+
+    useEffect(() => {
+        if (authToken) {
+            setHasAccess(authToken.apps?.includes(name) || false);
+        }
+    }, [authToken])
+
+    if (hasAccess == null) {
+        return null;
+    }
+
+    if (hasAccess) {
+        return children;
+    } else {
+        return <ErrorBox title="Forbidden">Access is not granted to this application</ErrorBox>
+    }
+}

package/src/shell/apps/index.ts

@@ -0,0 +1 @@
+export * from "./CheckAppAccess";

package/src/shell/index.tsx

@@ -4,3 +4,4 @@ export * from "./login/TerminalLogin";
 export * from "./login/UserSessionMenu";
 export * from "./utils";
 export * from './VertesiaShell';
+export * from "./apps/index";

package/src/shell/login/InviteAcceptModal.tsx

@@ -1,5 +1,5 @@
 import { TransientToken, UserInviteTokenData } from "@vertesia/common"
-import { Button, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core"
+import { Button, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core"
 import { useEffect, useState } from "react"
 import { useUserSession } from "@vertesia/ui/session"
 
@@ -14,15 +14,22 @@ export function InviteAcceptModal() {
     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.'
-                })*/
+                // 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])
 
@@ -32,8 +39,11 @@ export function InviteAcceptModal() {
         await client.account.acceptInvite(invite.id);
         await session.fetchAccounts();
         const remainingInvites = invites.filter(i => i.id !== invite.id)
-        setInvites(remainingInvites)
-        if (remainingInvites.length === 0) {
+
+        const notLegacyInvites = remainingInvites.filter(i => i.data.account);
+        if (notLegacyInvites.length > 0) {
+            setInvites(notLegacyInvites);
+        } else {
             closeModal();
         }
     }
@@ -47,31 +57,37 @@ export function InviteAcceptModal() {
         }
     }
 
-    const inviteList = invites.map(invite => (
-        <div key={invite.id} className="flex flex-row w-full justify-between border rounded-sm px-2 py-2 ">
+    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}</div>
+                <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>
                 <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>
-    ))
+        </div>)
+    })
 
     return (
         <div>
-            <Modal isOpen={showModal} onClose={closeModal}>
-                <ModalTitle>Review Invites</ModalTitle>
-                <ModalBody>
+            <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}
-                </ModalBody>
-            </Modal>
+                </VModalBody>
+            </VModal>
         </div>
     )