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',