feat(console): implement account deletion (#5969)

* feat(console): implement account deletion

* refactor: remove unused phrases

* chore: add i18n phrases

* refactor: add comments and error handling

packages/console/src/App.tsx

@@ -31,6 +31,7 @@ import AppConfirmModalProvider from './contexts/AppConfirmModalProvider';
 import AppDataProvider, { AppDataContext } from './contexts/AppDataProvider';
 import { AppThemeProvider } from './contexts/AppThemeProvider';
 import TenantsProvider, { TenantsContext } from './contexts/TenantsProvider';
+import Toast from './ds-components/Toast';
 import useCurrentUser from './hooks/use-current-user';
 import initI18n from './i18n/init';
 
@@ -86,6 +87,7 @@ function Providers() {
  UserScope.Identities,
  UserScope.CustomData,
  UserScope.Organizations,
+ UserScope.OrganizationRoles,
  PredefinedScope.All,
  ...conditionalArray(
  isCloud && [
@@ -111,6 +113,7 @@ function Providers() {
  >
  <AppThemeProvider>
  <Helmet titleTemplate={`%s - ${mainTitle}`} defaultTitle={mainTitle} />
+ <Toast />
  <ErrorBoundary>
  <LogtoErrorBoundary>
  {/**

packages/console/src/containers/ConsoleRoutes/index.tsx

@@ -9,7 +9,6 @@ import ConsoleContent from '@/containers/ConsoleContent';
 import ProtectedRoutes from '@/containers/ProtectedRoutes';
 import TenantAccess from '@/containers/TenantAccess';
 import { GlobalRoute } from '@/contexts/TenantsProvider';
-import Toast from '@/ds-components/Toast';
 import useSwrOptions from '@/hooks/use-swr-options';
 import Callback from '@/pages/Callback';
 import CheckoutSuccessCallback from '@/pages/CheckoutSuccessCallback';
@@ -23,7 +22,6 @@ function Layout() {
  return (
  <SWRConfig value={swrOptions}>
  <AppBoundary>
- <Toast />
  <Outlet />
  </AppBoundary>
  </SWRConfig>

packages/console/src/onboarding/index.tsx

@@ -5,7 +5,6 @@ import { Navigate, type RouteObject, useMatch, useRoutes } from 'react-router-do
 import AppLoading from '@/components/AppLoading';
 import AppBoundary from '@/containers/AppBoundary';
 import { AppThemeContext } from '@/contexts/AppThemeProvider';
-import Toast from '@/ds-components/Toast';
 import { usePlausiblePageview } from '@/hooks/use-plausible-pageview';
 
 import Topbar from './components/Topbar';
@@ -74,7 +73,6 @@ export function OnboardingApp() {
  return (
  <div className={styles.app}>
  <AppBoundary>
- <Toast />
  <Topbar />
  <div className={styles.content}>{routes}</div>
  </AppBoundary>

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

@@ -0,0 +1,127 @@
+import { type IdTokenClaims, useLogto } from '@logto/react';
+import { TenantRole, getTenantIdFromOrganizationId } from '@logto/schemas';
+import { useContext, useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+
+import AppLoading from '@/components/AppLoading';
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import Button from '@/ds-components/Button';
+import ModalLayout from '@/ds-components/ModalLayout';
+
+import * as styles from '../../index.module.scss';
+import FinalConfirmationModal from '../FinalConfirmationModal';
+import TenantsList from '../TenantsList';
+
+type RoleMap = { [key in string]?: string[] };
+
+/**
+ * Given a list of organization roles from the user's claims, returns a tenant ID - role names map.
+ * A user may have multiple roles in the same tenant.
+ */
+const getRoleMap = (organizationRoles: string[]) =>
+ organizationRoles.reduce<RoleMap>((accumulator, value) => {
+ const [organizationId, roleName] = value.split(':');
+
+ if (!organizationId || !roleName) {
+ return accumulator;
+ }
+
+ const tenantId = getTenantIdFromOrganizationId(organizationId);
+
+ if (!tenantId) {
+ return accumulator;
+ }
+
+ return {
+ ...accumulator,
+ [tenantId]: [...(accumulator[tenantId] ?? []), roleName],
+ };
+ }, {});
+
+type Props = {
+ readonly onClose: () => void;
+};
+
+/** A display component for the account deletion confirmation. */
+export default function DeletionConfirmationModal({ onClose }: Props) {
+ const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.profile.delete_account' });
+ const [isFinalConfirmationOpen, setIsFinalConfirmationOpen] = useState(false);
+ const [claims, setClaims] = useState<IdTokenClaims>();
+ const { getIdTokenClaims } = useLogto();
+ const { tenants } = useContext(TenantsContext);
+
+ useEffect(() => {
+ const fetchRoleMap = async () => {
+ setClaims(undefined);
+ const claims = await getIdTokenClaims();
+
+ if (!claims) {
+ toast.error(t('error_occurred'));
+ onClose();
+ return;
+ }
+
+ setClaims(claims);
+ };
+
+ void fetchRoleMap();
+ }, [getIdTokenClaims, onClose, t]);
+
+ const roleMap = claims && getRoleMap(claims.organization_roles ?? []);
+ const tenantsToDelete = tenants.filter(({ id }) => roleMap?.[id]?.includes(TenantRole.Admin));
+ const tenantsToQuit = tenants.filter(({ id }) =>
+ tenantsToDelete.every(({ id: tenantId }) => tenantId !== id)
+ );
+
+ if (!claims) {
+ return <AppLoading />;
+ }
+
+ return (
+ <ModalLayout
+ title="profile.delete_account.label"
+ footer={
+ <>
+ <Button size="large" title="general.cancel" onClick={onClose} />
+ <Button
+ size="large"
+ type="danger"
+ title="general.delete"
+ onClick={() => {
+ setIsFinalConfirmationOpen(true);
+ }}
+ />
+ </>
+ }
+ >
+ {isFinalConfirmationOpen && (
+ <FinalConfirmationModal
+ userId={claims.sub}
+ tenantsToDelete={tenantsToDelete}
+ tenantsToQuit={tenantsToQuit}
+ onClose={() => {
+ setIsFinalConfirmationOpen(false);
+ }}
+ />
+ )}
+ <div className={styles.container}>
+ <p>{t('p.check_information')}</p>
+ {tenantsToDelete.length > 0 && (
+ <TenantsList
+ description={t('p.has_admin_role', { count: tenantsToDelete.length })}
+ tenants={tenantsToDelete}
+ />
+ )}
+ {tenantsToQuit.length > 0 && (
+ <TenantsList
+ description={t('p.quit_tenant', { count: tenantsToQuit.length })}
+ tenants={tenantsToQuit}
+ />
+ )}
+ <p>{t('p.remove_all_data')}</p>
+ <p>{t('p.confirm_information')}</p>
+ </div>
+ </ModalLayout>
+ );
+}

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

@@ -0,0 +1,125 @@
+import { useLogto } from '@logto/react';
+import { ResponseError } from '@withtyped/client';
+import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactModal from 'react-modal';
+
+import { useCloudApi, useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
+import { type TenantResponse } from '@/cloud/types/router';
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import Button from '@/ds-components/Button';
+import ModalLayout from '@/ds-components/ModalLayout';
+import useRedirectUri from '@/hooks/use-redirect-uri';
+import * as modalStyles from '@/scss/modal.module.scss';
+
+import * as styles from '../../index.module.scss';
+
+type Props = {
+ readonly userId: string;
+ readonly tenantsToDelete: readonly TenantResponse[];
+ readonly tenantsToQuit: readonly TenantResponse[];
+ readonly onClose: () => void;
+};
+
+/** The final confirmation modal for deletion, and where the deletion process happens. */
+export default function FinalConfirmationModal({
+ userId,
+ tenantsToDelete,
+ tenantsToQuit,
+ onClose,
+}: Props) {
+ const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.profile.delete_account' });
+ const { signOut } = useLogto();
+ const { removeTenant } = useContext(TenantsContext);
+ const postSignOutRedirectUri = useRedirectUri('signOut');
+ const [isDeleting, setIsDeleting] = useState(false);
+ const [deletionError, setDeletionError] = useState<Error>();
+ const errorRequestId =
+ deletionError instanceof ResponseError
+ ? deletionError.response.headers.get('logto-cloud-request-id')
+ : null;
+ const cloudApi = useCloudApi();
+ const authedCloudApi = useAuthedCloudApi();
+ const deleteAccount = async () => {
+ if (isDeleting) {
+ return;
+ }
+
+ setIsDeleting(true);
+
+ try {
+ for (const tenant of tenantsToDelete) {
+ // eslint-disable-next-line no-await-in-loop
+ await cloudApi.delete(`/api/tenants/:tenantId`, {
+ params: { tenantId: tenant.id },
+ });
+ removeTenant(tenant.id);
+ }
+
+ for (const tenant of tenantsToQuit) {
+ // eslint-disable-next-line no-await-in-loop
+ await authedCloudApi.delete('/api/tenants/:tenantId/members/:userId', {
+ params: { tenantId: tenant.id, userId },
+ });
+ removeTenant(tenant.id);
+ }
+
+ await cloudApi.delete('/api/me');
+ await signOut(postSignOutRedirectUri.href);
+ } catch (error) {
+ setDeletionError(error instanceof Error ? error : new Error(String(error)));
+ console.error(error);
+ } finally {
+ setIsDeleting(false);
+ }
+ };
+
+ return (
+ <ReactModal
+ shouldCloseOnEsc
+ isOpen
+ className={modalStyles.content}
+ overlayClassName={modalStyles.overlay}
+ >
+ {deletionError ? (
+ <ModalLayout
+ title="profile.delete_account.error_occurred"
+ footer={<Button size="large" title="general.got_it" onClick={onClose} />}
+ >
+ <div className={styles.container}>
+ <p>{t('error_occurred_description')}</p>
+ <p>
+ <code>{deletionError.message}</code>
+ {errorRequestId && (
+ <>
+ <br />
+ <code>{t('request_id', { requestId: errorRequestId })}</code>
+ </>
+ )}
+ </p>
+ <p>{t('try_again_later')}</p>
+ </div>
+ </ModalLayout>
+ ) : (
+ <ModalLayout
+ title="profile.delete_account.final_confirmation"
+ footer={
+ <>
+ <Button size="large" disabled={isDeleting} title="general.cancel" onClick={onClose} />
+ <Button
+ size="large"
+ disabled={isDeleting}
+ isLoading={isDeleting}
+ type="danger"
+ title="general.delete"
+ onClick={deleteAccount}
+ />
+ </>
+ }
+ >
+ <div className={styles.container}>{t('about_to_start_deletion')}</div>
+ </ModalLayout>
+ )}
+ </ReactModal>
+ );
+}

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

@@ -0,0 +1,44 @@
+import { type LocalePhrase } from '@logto/phrases';
+import { useTranslation } from 'react-i18next';
+
+import { type TenantResponse } from '@/cloud/types/router';
+import Button from '@/ds-components/Button';
+import ModalLayout from '@/ds-components/ModalLayout';
+
+import * as styles from '../../index.module.scss';
+import TenantsList from '../TenantsList';
+
+type Props = {
+ readonly issues: ReadonlyArray<{
+ readonly description: keyof LocalePhrase['translation']['admin_console']['profile']['delete_account']['issues'];
+ readonly tenants: readonly TenantResponse[];
+ }>;
+ readonly onClose: () => void;
+};
+
+/** A display component for tenant issues that prevent account deletion. */
+export default function TenantsIssuesModal({ issues, onClose }: Props) {
+ const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.profile.delete_account' });
+
+ return (
+ <ModalLayout
+ title="profile.delete_account.label"
+ footer={<Button size="large" title="general.got_it" onClick={onClose} />}
+ >
+ <div className={styles.container}>
+ <p>{t('p.has_issue')}</p>
+ {issues.map(
+ ({ description, tenants }) =>
+ tenants.length > 0 && (
+ <TenantsList
+ key={description}
+ description={t(`issues.${description}`, { count: tenants.length })}
+ tenants={tenants}
+ />
+ )
+ )}
+ <p>{t('p.after_resolved')}</p>
+ </div>
+ </ModalLayout>
+ );
+}

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

@@ -0,0 +1,6 @@
+.tenantList {
+ h3 {
+ font: var(--font-title-3);
+ color: var(--color-text-secondary);
+ }
+}

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

@@ -0,0 +1,24 @@
+import { type TenantResponse } from '@/cloud/types/router';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+ readonly description: string;
+ readonly tenants: readonly TenantResponse[];
+};
+
+/** A component that displays a list of tenants with their summary information. */
+export default function TenantsList({ description, tenants }: Props) {
+ return (
+ <section className={styles.tenantList}>
+ <h3>{description}</h3>
+ <ul>
+ {tenants.map(({ id, name }) => (
+ <li key={id}>
+ {name} ({id})
+ </li>
+ ))}
+ </ul>
+ </section>
+ );
+}