feat(console): add delete account dialog in profile page (#3276)

packages/console/src/pages/Profile/containers/DeleteAccountModal/index.module.scss

@@ -0,0 +1,17 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  font: var(--font-body-2);
+}
+
+p {
+  margin: 0;
+}
+
+p + p {
+  margin-top: _.unit(6);
+}
+
+.mail {
+  font-weight: bold;
+}

packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx

@@ -0,0 +1,59 @@
+import { Trans, useTranslation } from 'react-i18next';
+import ReactModal from 'react-modal';
+
+import Button from '@/components/Button';
+import ModalLayout from '@/components/ModalLayout';
+import * as modalStyles from '@/scss/modal.module.scss';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const contactUsEmail = 'logto@silverhand.io';
+const mailToLink = `mailto:${contactUsEmail}?subject=Account%20Deletion%20Request`;
+
+const DeleteAccountModal = ({ isOpen, onClose }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <ReactModal
+      shouldCloseOnEsc
+      isOpen={isOpen}
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={() => {
+        onClose();
+      }}
+    >
+      <ModalLayout
+        title="profile.delete_account.label"
+        footer={<Button size="large" title="general.got_it" onClick={onClose} />}
+        onClose={() => {
+          onClose();
+        }}
+      >
+        <div className={styles.container}>
+          <p>{t('profile.delete_account.dialog_paragraph_1')}</p>
+          <p>
+            <Trans
+              components={{
+                a: (
+                  // eslint-disable-next-line jsx-a11y/anchor-has-content
+                  <a href={mailToLink} className={styles.mail} />
+                ),
+              }}
+            >
+              {t('profile.delete_account.dialog_paragraph_2', { mail: contactUsEmail })}
+            </Trans>
+          </p>
+          <p>{t('profile.delete_account.dialog_paragraph_3')}</p>
+        </div>
+      </ModalLayout>
+    </ReactModal>
+  );
+};
+
+export default DeleteAccountModal;

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -10,12 +11,14 @@ import * as resourcesStyles from '@/scss/resources.module.scss';
 import BasicUserInfoSection from './components/BasicUserInfoSection';
 import CardContent from './components/CardContent';
 import Section from './components/Section';
+import DeleteAccountModal from './containers/DeleteAccountModal';
 import * as styles from './index.module.scss';
 
 const Profile = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const [user, fetchUser] = useLogtoUserInfo();
+  const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);
 
   if (!user) {
     return null;
@@ -68,10 +71,16 @@ const Profile = () => {
             <Button
               title="profile.delete_account.button"
               onClick={() => {
-                console.log('Not implemented.');
+                setShowDeleteAccountModal(true);
               }}
             />
           </div>
+          <DeleteAccountModal
+            isOpen={showDeleteAccountModal}
+            onClose={() => {
+              setShowDeleteAccountModal(false);
+            }}
+          />
         </Section>
       )}
     </div>

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

@@ -52,7 +52,7 @@ const profile = {
     dialog_paragraph_1:
       "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.",
     dialog_paragraph_2:
-      'To proceed with the account deletion process, please email our support team at <a>mail</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.',
+      'To proceed with the account deletion process, please email our support team at <a>{{mail}}</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.',
     dialog_paragraph_3:
       'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.',
   },