refactor(console): show confirm box when inviting a member as admin (#5649)

packages/console/src/ds-components/ConfirmModal/index.module.scss

@@ -1,5 +1,9 @@
 @use '@/scss/underscore' as _;
 
+.overlay {
+  z-index: 1000;
+}
+
 .content {
   font: var(--font-body-2);
 

packages/console/src/ds-components/ConfirmModal/index.tsx

@@ -50,8 +50,8 @@ function ConfirmModal({
     <ReactModal
       shouldCloseOnEsc
       isOpen={isOpen}
-      className={modalStyles.content}
+      className={classNames(modalStyles.content)}
-      overlayClassName={modalStyles.overlay}
+      overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
       onRequestClose={onCancel}
     >
       <ModalLayout

packages/console/src/pages/TenantSettings/TenantMembers/InviteEmailsInput/index.module.scss

@@ -60,6 +60,8 @@
       font: var(--font-body-2);
       background: transparent;
       flex: 1;
+      padding: 0;
+      appearance: none;
 
       &::placeholder {
         color: var(--color-placeholder);

packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.module.scss

@@ -0,0 +1,11 @@
+@use '@/scss/underscore' as _;
+
+ul {
+  padding-inline-start: _.unit(6);
+
+  > li {
+    font: var(--font-body-2);
+    margin-block: _.unit(2);
+    padding-inline-start: _.unit(1);
+  }
+}

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

@@ -2,7 +2,7 @@ import { TenantRole } from '@logto/schemas';
 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';
+import { Trans, useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import { useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
@@ -10,6 +10,7 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
 import FormField from '@/ds-components/FormField';
 import ModalLayout from '@/ds-components/ModalLayout';
 import Select, { type Option } from '@/ds-components/Select';
+import { useConfirmModal } from '@/hooks/use-confirm-modal';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 import InviteEmailsInput from '../InviteEmailsInput';
@@ -17,6 +18,7 @@ import useEmailInputUtils from '../InviteEmailsInput/hooks';
 import { type InviteMemberForm } from '../types';
 
 import Footer from './Footer';
+import './index.module.scss';
 
 type Props = {
   isOpen: boolean;
@@ -30,6 +32,7 @@ function InviteMemberModal({ isOpen, onClose }: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const cloudApi = useAuthedCloudApi();
   const { parseEmailOptions } = useEmailInputUtils();
+  const { show } = useConfirmModal();
 
   const formMethods = useForm<InviteMemberForm>({
     defaultValues: {
@@ -61,6 +64,19 @@ function InviteMemberModal({ isOpen, onClose }: Props) {
   );
 
   const onSubmit = handleSubmit(async ({ emails, role }) => {
+    if (role === TenantRole.Admin) {
+      const [result] = await show({
+        ModalContent: () => (
+          <Trans components={{ ul: <ul />, li: <li /> }}>{t('assign_admin_confirm')}</Trans>
+        ),
+        confirmButtonText: 'general.confirm',
+      });
+
+      if (!result) {
+        return;
+      }
+    }
+
     setIsLoading(true);
     try {
       await Promise.all(