@vertesia/ui 1.6.0-dev.20261009.095813Z → 1.6.0-dev.20261014.015055Z

package/src/i18n/locales/ko.json

@@ -251,7 +251,7 @@
     "agent.toggleRightSidebar": "오른쪽 사이드바 전환",
     "agent.typeDifferentResponse": "또는 다른 응답을 입력하세요...",
     "agent.typeYourMessage": "메시지를 입력하세요...",
-    "agent.typeYourResponse": "응답을 입력하세요...",
+    "agent.typeYourResponse": "또는 다른 응답을 입력하세요...",
     "agent.unableToOpenPrint": "인쇄 미리보기를 열 수 없습니다",
     "agent.unknownError": "알 수 없는 오류",
     "agent.unknownTime": "알 수 없는 시간",
@@ -379,6 +379,10 @@
     "layout.searchPlaceholder": "검색...",
     "layout.toggleNavigationMenu": "탐색 메뉴 전환",
     "login.accept": "수락",
+    "login.inviteActionFailed": "이 초대를 업데이트할 수 없습니다. 목록을 새로 고쳤습니다.",
+    "login.inviteRole": "역할: {{role}}",
+    "login.invitedBy": "초대한 사람: {{name}}",
+    "login.invitesIntro": "다음 계정에 참여하도록 초대받았습니다. 각 초대를 수락하거나 거절하세요.",
     "login.reject": "거부",
     "login.reviewInvites": "초대 검토",
     "login.terminal.account": "계정",

package/src/i18n/locales/pt.json

@@ -253,7 +253,7 @@
     "agent.toggleRightSidebar": "Alternar painel lateral",
     "agent.typeDifferentResponse": "Ou digite uma resposta diferente...",
     "agent.typeYourMessage": "Digite sua mensagem...",
-    "agent.typeYourResponse": "Digite sua resposta...",
+    "agent.typeYourResponse": "Ou digite uma resposta diferente...",
     "agent.unableToOpenPrint": "Não foi possível abrir a visualização de impressão",
     "agent.unknownError": "Erro desconhecido",
     "agent.unknownTime": "Hora desconhecida",
@@ -381,6 +381,10 @@
     "layout.searchPlaceholder": "Pesquisar...",
     "layout.toggleNavigationMenu": "Alternar menu de navegação",
     "login.accept": "Aceitar",
+    "login.inviteActionFailed": "Não foi possível atualizar este convite. A lista foi atualizada.",
+    "login.inviteRole": "Função: {{role}}",
+    "login.invitedBy": "Convidado por {{name}}",
+    "login.invitesIntro": "Você foi convidado a participar das seguintes contas. Aceite ou recuse cada convite.",
     "login.reject": "Rejeitar",
     "login.reviewInvites": "Revisar convites",
     "login.terminal.account": "Conta",

package/src/i18n/locales/ru.json

@@ -257,7 +257,7 @@
     "agent.toggleRightSidebar": "Переключить правую панель",
     "agent.typeDifferentResponse": "Или введите другой ответ...",
     "agent.typeYourMessage": "Введите сообщение...",
-    "agent.typeYourResponse": "Введите ваш ответ...",
+    "agent.typeYourResponse": "Или введите другой ответ...",
     "agent.unableToOpenPrint": "Не удалось открыть предпросмотр печати",
     "agent.unknownError": "Неизвестная ошибка",
     "agent.unknownTime": "Неизвестное время",
@@ -385,6 +385,10 @@
     "layout.searchPlaceholder": "Поиск...",
     "layout.toggleNavigationMenu": "Переключить меню навигации",
     "login.accept": "Принять",
+    "login.inviteActionFailed": "Не удалось обновить это приглашение. Список обновлён.",
+    "login.inviteRole": "Роль: {{role}}",
+    "login.invitedBy": "Пригласил(а): {{name}}",
+    "login.invitesIntro": "Вас пригласили присоединиться к следующим аккаунтам. Примите или отклоните каждое приглашение.",
     "login.reject": "Отклонить",
     "login.reviewInvites": "Просмотреть приглашения",
     "login.terminal.account": "Аккаунт",

package/src/i18n/locales/tr.json

@@ -251,7 +251,7 @@
     "agent.toggleRightSidebar": "Sağ kenar çubuğunu aç/kapat",
     "agent.typeDifferentResponse": "Ya da farklı bir yanıt yazın...",
     "agent.typeYourMessage": "Mesajınızı yazın...",
-    "agent.typeYourResponse": "Yanıtınızı yazın...",
+    "agent.typeYourResponse": "Ya da farklı bir yanıt yazın...",
     "agent.unableToOpenPrint": "Yazdırma önizlemesi açılamadı",
     "agent.unknownError": "Bilinmeyen hata",
     "agent.unknownTime": "Bilinmeyen zaman",
@@ -379,6 +379,10 @@
     "layout.searchPlaceholder": "Ara...",
     "layout.toggleNavigationMenu": "Gezinme menüsünü aç veya kapat",
     "login.accept": "Kabul Et",
+    "login.inviteActionFailed": "Bu davet güncellenemedi. Liste yenilendi.",
+    "login.inviteRole": "Rol: {{role}}",
+    "login.invitedBy": "Davet eden: {{name}}",
+    "login.invitesIntro": "Aşağıdaki hesaplara katılmaya davet edildiniz. Her daveti kabul edin veya reddedin.",
     "login.reject": "Reddet",
     "login.reviewInvites": "Davetleri İncele",
     "login.terminal.account": "Hesap",

package/src/i18n/locales/zh-TW.json

@@ -251,7 +251,7 @@
     "agent.toggleRightSidebar": "切換右側邊欄",
     "agent.typeDifferentResponse": "或輸入其他回覆...",
     "agent.typeYourMessage": "輸入訊息...",
-    "agent.typeYourResponse": "輸入您的回覆...",
+    "agent.typeYourResponse": "或輸入其他回覆...",
     "agent.unableToOpenPrint": "無法開啟列印預覽",
     "agent.unknownError": "未知錯誤",
     "agent.unknownTime": "未知時間",
@@ -379,6 +379,10 @@
     "layout.searchPlaceholder": "搜尋...",
     "layout.toggleNavigationMenu": "切換導覽選單",
     "login.accept": "接受",
+    "login.inviteActionFailed": "無法更新此邀請。清單已重新整理。",
+    "login.inviteRole": "角色：{{role}}",
+    "login.invitedBy": "邀請人：{{name}}",
+    "login.invitesIntro": "您已受邀加入以下帳戶。請接受或拒絕每個邀請。",
     "login.reject": "拒絕",
     "login.reviewInvites": "查看邀請",
     "login.terminal.account": "帳戶",

package/src/i18n/locales/zh.json

@@ -251,7 +251,7 @@
     "agent.toggleRightSidebar": "切换右侧边栏",
     "agent.typeDifferentResponse": "或输入其他回复...",
     "agent.typeYourMessage": "输入消息...",
-    "agent.typeYourResponse": "输入您的回复...",
+    "agent.typeYourResponse": "或输入其他回复...",
     "agent.unableToOpenPrint": "无法打开打印预览",
     "agent.unknownError": "未知错误",
     "agent.unknownTime": "未知时间",
@@ -379,6 +379,10 @@
     "layout.searchPlaceholder": "搜索...",
     "layout.toggleNavigationMenu": "切换导航菜单",
     "login.accept": "接受",
+    "login.inviteActionFailed": "无法更新此邀请。列表已刷新。",
+    "login.inviteRole": "角色：{{role}}",
+    "login.invitedBy": "邀请人：{{name}}",
+    "login.invitesIntro": "您已被邀请加入以下账户。请接受或拒绝每个邀请。",
     "login.reject": "拒绝",
     "login.reviewInvites": "查看邀请",
     "login.terminal.account": "账户",

package/src/i18n/rtl.ts

@@ -29,6 +29,9 @@ export const SUPPORTED_LANGUAGES = [
 
 export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
 
+/** Where `LanguageProvider` persists the chosen language; the boot runtime reads it too. */
+export const LANGUAGE_STORAGE_KEY = 'vertesia-ui-language';
+
 export const RTL_LANGUAGES: ReadonlySet<string> = new Set(['ar', 'he', 'fa', 'ur']);
 
 export function isRTL(lng?: string): boolean {
@@ -42,8 +45,8 @@ export function isRTL(lng?: string): boolean {
  *   2. base-language fallback (`pt-BR` -> `pt`)
  *   3. `'en'` fallback
  *
- * The inline FOUC script in `index.html` must reimplement this same logic
- * verbatim (it cannot import ESM before bundle load).
+ * The pre-React boot runtime (`../boot/index.ts`) reimplements this same logic
+ * in its inline script, which runs before any bundle loads.
  */
 export function resolveLanguage(raw: string | undefined | null): SupportedLanguage {
     if (!raw) return 'en';

package/src/session/UserSessionProvider.tsx

@@ -280,10 +280,17 @@ export function UserSessionProvider({ children, loadOnboardingStatus = false }:
                         })
                         .catch((err) => {
                             if (surfaceAuthError(err)) return;
-                            console.error('Unexpected failure while fetching a user token', err);
-                            Env.logger.error('Unexpected failure while fetching a user token', {
-                                vertesia: { account_id: selectedAccount, project_id: selectedProject, error: err },
-                            });
+                            // A customer-domain user without an invite is an expected sign-in outcome, already
+                            // logged at warn where the 403 is received.
+                            const inviteRequired =
+                                err instanceof Error &&
+                                err.message === 'Customer-domain user requires an invite to join';
+                            if (!inviteRequired) {
+                                console.error('Unexpected failure while fetching a user token', err);
+                                Env.logger.error('Unexpected failure while fetching a user token', {
+                                    vertesia: { account_id: selectedAccount, project_id: selectedProject, error: err },
+                                });
+                            }
                             session.logout();
                             session.isLoading = false;
                             session.authError = err;

package/src/session/auth/oauth.ts

@@ -13,7 +13,14 @@ const MAX_TRANSACTION_AGE = 10 * 60_000;
 let pending: Promise<string> | undefined;
 // Long-lived credentials never enter browser storage. A reload resumes via the broker when access expires.
 let refreshSession:
-    | { token: string; clientId: string; issuer: string; tokenEndpoint: string; revocationEndpoint?: string }
+    | {
+          token: string;
+          clientId: string;
+          issuer: string;
+          resource?: string;
+          tokenEndpoint: string;
+          revocationEndpoint?: string;
+      }
     | undefined;
 
 export class OAuthLoginError extends Error {}
@@ -61,6 +68,7 @@ interface Transaction {
     clientId: string;
     redirectUri: string;
     issuer: string;
+    resource?: string;
     target: string;
     rememberedScope?: ScopeSelection;
     retryScope?: ScopeSelection;
@@ -90,6 +98,12 @@ async function acquireToken(forceRefresh = false): Promise<string> {
     const redirectUri = redirect.toString();
     if (new URL(redirectUri).origin !== window.location.origin) throw new Error('OAuth callback must be same-origin');
     const issuer = (config.issuer ? httpsUrl(config.issuer).toString() : Env.endpoints.sts).replace(/\/+$/, '');
+    // A token is issued for one audience. The default audience follows the issuer, which is already part of every
+    // stored credential's identity; a configured one is recorded alongside it, so changing it never reuses a token,
+    // refresh session or login transaction issued for the previous audience.
+    const configuredResource = config.resource ? httpsUrl(config.resource).toString() : undefined;
+    const sameClient = (stored: { clientId: string; issuer: string; resource?: string }) =>
+        stored.clientId === clientId && stored.issuer === issuer && stored.resource === configuredResource;
     let current = new URL(window.location.href);
     let { accountId, projectId } = resolveAuthSelection(current);
     const callback = current.origin + current.pathname === new URL(redirectUri).origin + new URL(redirectUri).pathname;
@@ -105,9 +119,8 @@ async function acquireToken(forceRefresh = false): Promise<string> {
         if (
             !transaction ||
             transaction.state !== state ||
-            transaction.clientId !== clientId ||
+            !sameClient(transaction) ||
             transaction.redirectUri !== redirectUri ||
-            transaction.issuer !== issuer ||
             Date.now() - transaction.created > MAX_TRANSACTION_AGE ||
             transaction.created > Date.now()
         ) {
@@ -133,25 +146,21 @@ async function acquireToken(forceRefresh = false): Promise<string> {
                 token: string;
                 clientId: string;
                 issuer: string;
+                resource?: string;
                 refreshToken?: string;
             };
             const claims = jwtDecode<AuthTokenPayload>(cached.token);
             if (
                 config.offlineAccess &&
-                cached.clientId === clientId &&
-                cached.issuer === issuer &&
+                sameClient(cached) &&
                 (!projectId || claims.project?.id === projectId) &&
                 (!accountId || claims.account?.id === accountId)
             )
-                refreshCredential =
-                    refreshSession?.clientId === clientId && refreshSession.issuer === issuer
-                        ? refreshSession.token
-                        : undefined;
+                refreshCredential = refreshSession && sameClient(refreshSession) ? refreshSession.token : undefined;
             // Discard credentials persisted by older SDK versions rather than loading them into the new session.
             if (cached.refreshToken) sessionStorage.removeItem(TOKEN_KEY);
             if (
-                cached.clientId === clientId &&
-                cached.issuer === issuer &&
+                sameClient(cached) &&
                 !forceRefresh &&
                 claims.exp > Date.now() / 1000 + (config.offlineAccess ? 300 : 30) &&
                 (!projectId || claims.project?.id === projectId) &&
@@ -179,7 +188,7 @@ async function acquireToken(forceRefresh = false): Promise<string> {
     const tokenEndpoint = httpsUrl(metadata.token_endpoint);
     const revocationEndpoint =
         metadata.revocation_endpoint === undefined ? undefined : httpsUrl(metadata.revocation_endpoint).toString();
-    const resource = config.resource ? httpsUrl(config.resource).toString() : new URL(metadata.issuer).toString();
+    const resource = configuredResource ?? new URL(metadata.issuer).toString();
     if (refreshCredential) {
         try {
             const response = await fetch(tokenEndpoint, {
@@ -215,12 +224,14 @@ async function acquireToken(forceRefresh = false): Promise<string> {
                         token: grant.access_token,
                         clientId,
                         issuer,
+                        resource: configuredResource,
                     }),
                 );
                 refreshSession = {
                     token: grant.refresh_token ?? refreshCredential,
                     clientId,
                     issuer,
+                    resource: configuredResource,
                     tokenEndpoint: tokenEndpoint.toString(),
                     revocationEndpoint,
                 };
@@ -262,6 +273,7 @@ async function acquireToken(forceRefresh = false): Promise<string> {
                 token: grant.access_token,
                 clientId,
                 issuer,
+                resource: configuredResource,
             }),
         );
         refreshSession =
@@ -270,6 +282,7 @@ async function acquireToken(forceRefresh = false): Promise<string> {
                       token: grant.refresh_token,
                       clientId,
                       issuer,
+                      resource: configuredResource,
                       tokenEndpoint: tokenEndpoint.toString(),
                       revocationEndpoint,
                   }
@@ -307,6 +320,7 @@ async function acquireToken(forceRefresh = false): Promise<string> {
         clientId,
         redirectUri,
         issuer,
+        resource: configuredResource,
         target: current.toString(),
         rememberedScope:
             accountId && explicitScope?.projectId === undefined && (!explicitScope?.accountId || projectId)

package/src/shell/VertesiaShell.tsx

@@ -28,8 +28,13 @@ export interface VertesiaShellProps {
     suppressSignInErrorPrefixes?: string | string[];
     /** Use an already-issued Vertesia token instead of starting the normal sign-in flow. */
     authToken?: string;
-    /** Force a default language. If omitted, falls back to localStorage then navigator.language then 'en'. */
+    /** Language used only when there is neither a saved choice nor a browser language. */
     defaultLanguage?: SupportedLanguage;
+    /**
+     * Pin the language the shell renders in, whatever the saved choice or browser language.
+     * Embedded apps still receive the user's own language (`useLanguage().preferredLanguage`).
+     */
+    language?: SupportedLanguage;
 }
 export function VertesiaShell({
     children,
@@ -41,6 +46,7 @@ export function VertesiaShell({
     suppressSignInErrorPrefixes,
     authToken,
     defaultLanguage,
+    language,
     authScreens,
     branding,
 }: VertesiaShellProps) {
@@ -48,7 +54,7 @@ export function VertesiaShell({
     const brandedContent = (
         <TypeRegistryProvider>
             <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-                <LanguageProvider defaultLanguage={defaultLanguage}>
+                <LanguageProvider defaultLanguage={defaultLanguage} language={language}>
                     <LanguageBoundI18nProvider>
                         <AppBrandingBoundary branding={branding}>
                             <IframeAppContextSync />

package/src/shell/login/InviteAcceptModal.tsx

@@ -2,7 +2,12 @@ import type { UserInviteToken } from '@vertesia/common';
 import { Button, Modal, ModalBody, ModalTitle } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+// Legacy invites have no account data and cannot be shown or accepted here.
+function withAccount(invites: UserInviteToken[]) {
+    return invites.filter((i) => i.data.account);
+}
 
 export function InviteAcceptModal() {
     const session = useUserSession();
@@ -10,95 +15,137 @@ export function InviteAcceptModal() {
     const { t } = useUITranslation();
     const [showModal, setShowModal] = useState(false);
     const [invites, setInvites] = useState<UserInviteToken[]>([]);
+    const [pendingId, setPendingId] = useState<string>();
+    const [error, setError] = useState<string>();
+    const [acceptedAccountIds, setAcceptedAccountIds] = useState<string[]>([]);
+    const isOpen = showModal && invites.length > 0;
+
+    const loadInvites = useCallback(async () => {
+        const valid = withAccount(await client.account.listInvites());
+        setInvites(valid);
+        return valid;
+    }, [client]);
 
     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);
+        loadInvites()
+            .then((valid) => {
+                if (valid.length > 0) {
+                    console.log('Found valid invites', valid.length);
                     setShowModal(true);
-                    setInvites(notLegacyInvites);
-                } else {
-                    console.log('No invites found, closing modal');
-                    setShowModal(false);
                 }
             })
             .catch((err) => {
                 console.error('Error fetching invites', err);
             });
-    }, [client.account.listInvites]);
+    }, [loadInvites]);
 
     const closeModal = () => setShowModal(false);
 
-    const accept = async (invite: UserInviteToken) => {
-        await client.account.acceptInvite(invite.id);
-        await session.authCallback;
-        await session.fetchAccounts();
-        await session.fetchProjects(invite.data.account.id);
-        const remainingInvites = invites.filter((i) => i.id !== invite.id);
+    // Refreshing the session re-renders the app around the modal, so it waits until the modal has closed and
+    // then picks up every accepted invite at once.
+    useEffect(() => {
+        if (isOpen || acceptedAccountIds.length === 0) return;
+        setAcceptedAccountIds([]);
+        void (async () => {
+            try {
+                // The current token predates the new memberships and does not list the new accounts, so the
+                // server rejects reads of them until a fresh token is minted.
+                await session.refreshAuthToken();
+                await session.fetchAccounts();
+            } catch (err) {
+                console.error('Failed to refresh the session after accepting invites', err);
+                return;
+            }
+            // Each account loads on its own, so one failure does not hide the others.
+            for (const accountId of new Set(acceptedAccountIds)) {
+                await session.fetchProjects(accountId).catch((err) => {
+                    console.error('Failed to load projects for an accepted invite', err);
+                });
+            }
+        })();
+    }, [isOpen, acceptedAccountIds, session]);
 
-        const notLegacyInvites = remainingInvites.filter((i) => i.data.account);
-        if (notLegacyInvites.length > 0) {
-            setInvites(notLegacyInvites);
-        } else {
-            closeModal();
-        }
+    const removeInvite = (inviteId: string) => setInvites((current) => current.filter((i) => i.id !== inviteId));
+
+    // An accept or reject can fail because the invite was already used, e.g. from another tab: show the server's list.
+    const recoverFromFailure = async (action: string, err: unknown) => {
+        console.error(`Failed to ${action} invite`, err);
+        setError(t('login.inviteActionFailed'));
+        return loadInvites().catch((reloadErr) => {
+            console.error('Error fetching invites', reloadErr);
+            return undefined;
+        });
     };
 
-    const reject = async (invite: UserInviteToken) => {
-        await client.account.rejectInvite(invite.id);
-        const remainingInvites = invites.filter((i) => i.id !== invite.id);
-        setInvites(remainingInvites);
-        if (remainingInvites.length === 0) {
-            closeModal();
+    const accept = async (invite: UserInviteToken) => {
+        setPendingId(invite.id);
+        setError(undefined);
+        try {
+            await client.account.acceptInvite(invite.id);
+            removeInvite(invite.id);
+            setAcceptedAccountIds((current) => [...current, invite.data.account.id]);
+        } catch (err) {
+            const remaining = await recoverFromFailure('accept', err);
+            // A gone invite was most likely accepted after all (e.g. the response was lost), so its account
+            // still needs loading. If it was rejected elsewhere instead, that load fails harmlessly.
+            if (remaining && !remaining.some((i) => i.id === invite.id)) {
+                setAcceptedAccountIds((current) => [...current, invite.data.account.id]);
+            }
+        } finally {
+            setPendingId(undefined);
         }
     };
 
-    const inviteList = invites.map((invite) => {
-        if (!invite.data.account) {
-            console.warn('Invite has no account data', invite);
-            return null; // Skip rendering this invite
+    const reject = async (invite: UserInviteToken) => {
+        setPendingId(invite.id);
+        setError(undefined);
+        try {
+            await client.account.rejectInvite(invite.id);
+            removeInvite(invite.id);
+        } catch (err) {
+            await recoverFromFailure('reject', err);
+        } finally {
+            setPendingId(undefined);
         }
+    };
 
-        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)}>
-                        {t('login.accept')}
-                    </Button>{' '}
-                    <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>
-                        {t('login.reject')}
-                    </Button>
-                </div>
+    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>
+                {invite.data.project && <div className="w-full text-base">- {invite.data.project.name}</div>}
+                <div className="text-xs">{t('login.inviteRole', { role: invite.data.role })}</div>
+                {invite.data.invited_by && (
+                    <div className="text-xs">{t('login.invitedBy', { name: invite.data.invited_by.name })}</div>
+                )}
             </div>
-        );
-    });
+            <div className="flex flex-col gap-4">
+                <Button
+                    size={'xs'}
+                    isDisabled={!!pendingId}
+                    isLoading={pendingId === invite.id}
+                    onClick={() => void accept(invite)}
+                >
+                    {t('login.accept')}
+                </Button>{' '}
+                <Button size={'xs'} variant="secondary" isDisabled={!!pendingId} onClick={() => void reject(invite)}>
+                    {t('login.reject')}
+                </Button>
+            </div>
+        </div>
+    ));
 
     return (
         <div>
-            <Modal isOpen={showModal} onClose={closeModal}>
+            <Modal isOpen={isOpen} onClose={closeModal}>
                 <ModalTitle>{t('login.reviewInvites')}</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>
+                    <div className="text-sm pb-4">{t('login.invitesIntro')}</div>
+                    {error && (
+                        <div role="alert" className="text-sm text-destructive pb-4">
+                            {error}
+                        </div>
+                    )}
                     {inviteList}
                 </ModalBody>
             </Modal>