fix(console,phrases): fix a batch of organization invitation console …

…ui issues

packages/console/src/cloud/pages/Main/InvitationList/index.module.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   height: 100%;
   min-height: 600px;
-  background: var(--color-surface-1);
+  background: var(--color-base);
   align-items: center;
   justify-content: center;
   overflow-y: auto;
@@ -16,17 +16,11 @@
     width: 540px;
     padding: _.unit(20) _.unit(17.5);
     gap: _.unit(6);
-    background: var(--color-bg-float);
+    background: var(--color-layer-1);
     border-radius: 16px;
     box-shadow: var(--shadow-1);
     white-space: pre-wrap;
 
-    .icon {
-      width: 40px;
-      height: 40px;
-      flex-shrink: 0;
-    }
-
     .title {
       font: var(--font-headline-2);
     }

packages/console/src/cloud/pages/Main/InvitationList/index.tsx

@@ -2,11 +2,12 @@ import { OrganizationInvitationStatus, getTenantIdFromOrganizationId } from '@lo
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Icon from '@/assets/icons/organization-preview.svg';
+import OrganizationIcon from '@/assets/icons/organization-preview.svg';
 import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
 import { type TenantResponse, type InvitationListResponse } from '@/cloud/types/router';
 import CreateTenantModal from '@/components/CreateTenantModal';
 import TenantEnvTag from '@/components/TenantEnvTag';
+import ThemedIcon from '@/components/ThemedIcon';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import Spacer from '@/ds-components/Spacer';
@@ -32,7 +33,7 @@ function InvitationList({ invitations }: Props) {
           <div className={styles.description}>{t('invitation.find_tenants_description')}</div>
           {invitations.map(({ id, organizationId, tenantName, tenantTag }) => (
             <div key={id} className={styles.tenant}>
-              <Icon className={styles.icon} />
+              <ThemedIcon for={OrganizationIcon} size={40} />
               <span className={styles.name}>{tenantName}</span>
               <TenantEnvTag isAbbreviated className={styles.tag} tag={tenantTag} />
               <Spacer />

packages/console/src/components/ItemPreview/index.module.scss

@@ -31,9 +31,12 @@
       .title {
         display: block;
         font: var(--font-body-2);
-        color: var(--color-text-link);
         text-decoration: none;
         @include _.text-ellipsis;
+
+        &.withLink {
+          color: var(--color-text-link);
+        }
       }
 
       .subtitle {

packages/console/src/components/ItemPreview/index.tsx

@@ -27,7 +27,7 @@ function ItemPreview({ title, subtitle, icon, to, size = 'default', suffix, toTa
         <div className={styles.meta}>
           {to && (
             <Link
-              className={styles.title}
+              className={classNames(styles.title, styles.withLink)}
               to={getTo(to)}
               target={toTarget}
               onClick={(event) => {

packages/console/src/components/Topbar/TenantSelector/index.module.scss

@@ -19,6 +19,7 @@ $dropdown-item-height: 40px;
   position: relative;
   border: none;
   background-color: transparent;
+  gap: _.unit(2);
 
   &:hover {
     cursor: pointer;
@@ -31,12 +32,14 @@ $dropdown-item-height: 40px;
 
   .name {
     font: var(--font-title-2);
-    margin-right: _.unit(1.5);
     @include _.text-ellipsis;
   }
 
-  .tag {
-    margin-right: _.unit(2);
+  .redDot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--color-on-error-container);
   }
 
   .arrowIcon {

packages/console/src/components/Topbar/TenantSelector/index.tsx

@@ -54,7 +54,8 @@ export default function TenantSelector() {
         }}
       >
         <div className={styles.name}>{currentTenantInfo.name}</div>
-        <TenantEnvTag className={styles.tag} tag={currentTenantInfo.tag} />
+        <TenantEnvTag tag={currentTenantInfo.tag} />
+        {Boolean(pendingInvitations?.length) && <div className={styles.redDot} />}
         <KeyboardArrowDown className={styles.arrowIcon} />
       </div>
       <Dropdown

packages/console/src/pages/AcceptInvitation/SwitchAccount/index.module.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   height: 100%;
   min-height: 600px;
-  background: var(--color-surface-1);
+  background: var(--color-base);
   align-items: center;
   justify-content: center;
   overflow-y: auto;
@@ -17,7 +17,7 @@
     width: 540px;
     padding: _.unit(35) _.unit(17.5);
     gap: _.unit(6);
-    background: var(--color-bg-float);
+    background: var(--color-layer-1);
     border-radius: 16px;
     box-shadow: var(--shadow-1);
     text-align: center;

packages/console/src/pages/AcceptInvitation/SwitchAccount/index.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
 import Logo from '@/assets/images/logo.svg';
+import AppLoading from '@/components/AppLoading';
 import Button from '@/ds-components/Button';
 import useCurrentUser from '@/hooks/use-current-user';
 
@@ -12,9 +13,13 @@ type Props = {
 
 function SwitchAccount({ onClickSwitch }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { user } = useCurrentUser();
+  const { user, isLoading } = useCurrentUser();
   const { id, primaryEmail, username } = user ?? {};
 
+  if (isLoading) {
+    return <AppLoading />;
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.wrapper}>

packages/console/src/pages/AcceptInvitation/index.tsx

@@ -47,10 +47,10 @@ function AcceptInvitation() {
       resetTenants(data);
       navigateTenant(getTenantIdFromOrganizationId(organizationId));
     })();
-  }, [cloudApi, error, invitation, navigateTenant, t]);
+  }, [cloudApi, error, invitation, navigateTenant, resetTenants, t]);
 
   // No invitation returned, indicating the current signed-in user is not the invitee.
-  if (error?.status === 404) {
+  if (error?.status === 403) {
     return (
       <SwitchAccount
         onClickSwitch={() => {
@@ -63,6 +63,10 @@ function AcceptInvitation() {
     );
   }
 
+  if (error?.status === 404) {
+    return <AppError errorMessage={t('invitation.invitation_not_found')} />;
+  }
+
   if (invitation && invitation.status !== OrganizationInvitationStatus.Pending) {
     return <AppError errorMessage={t('invitation.invalid_invitation_status')} />;
   }

packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx

@@ -1,5 +1,5 @@
 import { ReservedPlanId, TenantRole } from '@logto/schemas';
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -50,9 +50,16 @@ function InviteMemberModal({ isOpen, onClose }: Props) {
     control,
     handleSubmit,
     setError,
+    reset,
     formState: { errors },
   } = formMethods;
 
+  useEffect(() => {
+    return () => {
+      reset();
+    };
+  }, [isOpen, reset]);
+
   const roleOptions: Array<Option<TenantRole>> = useMemo(
     () => [
       { value: TenantRole.Admin, title: t('admin') },

packages/console/src/pages/TenantSettings/index.tsx

@@ -26,16 +26,16 @@ function TenantSettings() {
         <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Settings}`}>
           <DynamicT forKey="tenants.tabs.settings" />
         </TabNavItem>
-        {isDevFeaturesEnabled && (
-          <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Members}`}>
-            <DynamicT forKey="tenants.tabs.members" />
-          </TabNavItem>
-        )}
         {canManageTenant && (
           <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Domains}`}>
             <DynamicT forKey="tenants.tabs.domains" />
           </TabNavItem>
         )}
+        {isDevFeaturesEnabled && (
+          <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Members}`}>
+            <DynamicT forKey="tenants.tabs.members" />
+          </TabNavItem>
+        )}
         {!isDevTenant && canManageTenant && (
           <>
             <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Subscription}`}>

packages/phrases/src/locales/de/translation/admin-console/invitation.ts

@@ -7,14 +7,16 @@ const invitation = {
   /** UNTRANSLATED */
   create_new_tenant: 'Create a new tenant',
   /** UNTRANSLATED */
-  email_not_match_title: 'You are currently signed in as\n{{email}}.',
+  email_not_match_title: 'You are currently signed in as\n{{email}}',
   /** UNTRANSLATED */
   email_not_match_description:
     'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
   /** UNTRANSLATED */
   switch_account: 'Sign in to another account',
   /** UNTRANSLATED */
   invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
+  /** UNTRANSLATED */
+  invitation_not_found: 'Invitation not found. Please contact the administrator.',
 };
 
 export default Object.freeze(invitation);

packages/phrases/src/locales/de/translation/admin-console/tenant-members.ts

@@ -2,6 +2,8 @@ const tenant_members = {
   /** UNTRANSLATED */
   members: 'Members',
   /** UNTRANSLATED */
+  collaborators: 'Collaborators',
+  /** UNTRANSLATED */
   invitations: 'Invitations',
   /** UNTRANSLATED */
   invite_members: 'Invite members',
@@ -14,6 +16,8 @@ const tenant_members = {
   /** UNTRANSLATED */
   member: 'Member',
   /** UNTRANSLATED */
+  collaborator: 'Collaborator',
+  /** UNTRANSLATED */
   invitation_status: 'Invitation status',
   /** UNTRANSLATED */
   invitation_sent: 'Invitation sent',

packages/phrases/src/locales/en/translation/admin-console/invitation.ts

@@ -3,11 +3,12 @@ const invitation = {
   find_tenants_description:
     'Your email address may already be registered with multiple tenants. You can choose to join the existing ones or continue create a new one.',
   create_new_tenant: 'Create a new tenant',
-  email_not_match_title: 'You are currently signed in as\n{{email}}.',
+  email_not_match_title: 'You are currently signed in as\n{{email}}',
   email_not_match_description:
     'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
   switch_account: 'Sign in to another account',
   invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
+  invitation_not_found: 'Invitation not found. Please contact the administrator.',
 };
 
 export default Object.freeze(invitation);

packages/phrases/src/locales/en/translation/admin-console/tenant-members.ts

@@ -1,11 +1,13 @@
 const tenant_members = {
   members: 'Members',
+  collaborators: 'Collaborators',
   invitations: 'Invitations',
   invite_members: 'Invite members',
   user: 'User',
   roles: 'Roles',
   admin: 'Admin',
   member: 'Member',
+  collaborator: 'Collaborator',
   invitation_status: 'Invitation status',
   invitation_sent: 'Invitation sent',
   expiration_date: 'Expiration date',

packages/phrases/src/locales/es/translation/admin-console/invitation.ts

@@ -7,14 +7,16 @@ const invitation = {
   /** UNTRANSLATED */
   create_new_tenant: 'Create a new tenant',
   /** UNTRANSLATED */
-  email_not_match_title: 'You are currently signed in as\n{{email}}.',
+  email_not_match_title: 'You are currently signed in as\n{{email}}',
   /** UNTRANSLATED */
   email_not_match_description:
     'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
   /** UNTRANSLATED */
   switch_account: 'Sign in to another account',
   /** UNTRANSLATED */
   invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
+  /** UNTRANSLATED */
+  invitation_not_found: 'Invitation not found. Please contact the administrator.',
 };
 
 export default Object.freeze(invitation);

packages/phrases/src/locales/es/translation/admin-console/tenant-members.ts

@@ -2,6 +2,8 @@ const tenant_members = {
   /** UNTRANSLATED */
   members: 'Members',
   /** UNTRANSLATED */
+  collaborators: 'Collaborators',
+  /** UNTRANSLATED */
   invitations: 'Invitations',
   /** UNTRANSLATED */
   invite_members: 'Invite members',
@@ -14,6 +16,8 @@ const tenant_members = {
   /** UNTRANSLATED */
   member: 'Member',
   /** UNTRANSLATED */
+  collaborator: 'Collaborator',
+  /** UNTRANSLATED */
   invitation_status: 'Invitation status',
   /** UNTRANSLATED */
   invitation_sent: 'Invitation sent',

packages/phrases/src/locales/fr/translation/admin-console/invitation.ts

@@ -7,14 +7,16 @@ const invitation = {
   /** UNTRANSLATED */
   create_new_tenant: 'Create a new tenant',
   /** UNTRANSLATED */
-  email_not_match_title: 'You are currently signed in as\n{{email}}.',
+  email_not_match_title: 'You are currently signed in as\n{{email}}',
   /** UNTRANSLATED */
   email_not_match_description:
     'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
   /** UNTRANSLATED */
   switch_account: 'Sign in to another account',
   /** UNTRANSLATED */
   invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
+  /** UNTRANSLATED */
+  invitation_not_found: 'Invitation not found. Please contact the administrator.',
 };
 
 export default Object.freeze(invitation);

packages/phrases/src/locales/fr/translation/admin-console/tenant-members.ts

@@ -2,6 +2,8 @@ const tenant_members = {
   /** UNTRANSLATED */
   members: 'Members',
   /** UNTRANSLATED */
+  collaborators: 'Collaborators',
+  /** UNTRANSLATED */
   invitations: 'Invitations',
   /** UNTRANSLATED */
   invite_members: 'Invite members',
@@ -14,6 +16,8 @@ const tenant_members = {
   /** UNTRANSLATED */
   member: 'Member',
   /** UNTRANSLATED */
+  collaborator: 'Collaborator',
+  /** UNTRANSLATED */
   invitation_status: 'Invitation status',
   /** UNTRANSLATED */
   invitation_sent: 'Invitation sent',

packages/phrases/src/locales/it/translation/admin-console/invitation.ts

@@ -7,14 +7,16 @@ const invitation = {
   /** UNTRANSLATED */
   create_new_tenant: 'Create a new tenant',
   /** UNTRANSLATED */
-  email_not_match_title: 'You are currently signed in as\n{{email}}.',
+  email_not_match_title: 'You are currently signed in as\n{{email}}',
   /** UNTRANSLATED */
   email_not_match_description:
     'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
   /** UNTRANSLATED */
   switch_account: 'Sign in to another account',
   /** UNTRANSLATED */
   invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
+  /** UNTRANSLATED */
+  invitation_not_found: 'Invitation not found. Please contact the administrator.',
 };
 
 export default Object.freeze(invitation);

packages/phrases/src/locales/it/translation/admin-console/tenant-members.ts

@@ -2,6 +2,8 @@ const tenant_members = {
   /** UNTRANSLATED */
   members: 'Members',
   /** UNTRANSLATED */
+  collaborators: 'Collaborators',
+  /** UNTRANSLATED */
   invitations: 'Invitations',
   /** UNTRANSLATED */
   invite_members: 'Invite members',
@@ -14,6 +16,8 @@ const tenant_members = {
   /** UNTRANSLATED */
   member: 'Member',
   /** UNTRANSLATED */
+  collaborator: 'Collaborator',
+  /** UNTRANSLATED */
   invitation_status: 'Invitation status',
   /** UNTRANSLATED */
   invitation_sent: 'Invitation sent',