fix(clerk-js): Add delete confirmation input when users try to delete…

… an organization fix(clerk-js): Add delete confirmation input when users try to delete an organization
clerk · Jul 6, 2023 · 972f24f · 972f24f
1 parent 38c1a66
commit 972f24f
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 17 deletions.
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -11,7 +11,7 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useRouter } from '../../router';
-import { handleError } from '../../utils';
+import { handleError, useFormControl } from '../../utils';
 import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
 export const LeaveOrganizationPage = () => {
@@ -57,9 +57,14 @@ export const DeleteOrganizationPage = () => {
 
   return (
     <ActionConfirmationPage
+      organizationName={organization?.name}
       title={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
       messageLine1={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.messageLine1')}
       messageLine2={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.messageLine2')}
+      actionDescription={localizationKeys(
+        'organizationProfile.profilePage.dangerSection.deleteOrganization.actionDescription',
+        { organizationName: organization?.name },
+      )}
       submitLabel={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
       successMessage={localizationKeys(
         'organizationProfile.profilePage.dangerSection.deleteOrganization.successMessage',
@@ -73,6 +78,8 @@ type ActionConfirmationPageProps = {
   title: LocalizationKey;
   messageLine1: LocalizationKey;
   messageLine2: LocalizationKey;
+  actionDescription?: LocalizationKey;
+  organizationName?: string;
   successMessage: LocalizationKey;
   submitLabel: LocalizationKey;
   onConfirmation: () => Promise<any>;
@@ -84,6 +91,8 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
     title,
     messageLine1,
     messageLine2,
+    actionDescription,
+    organizationName,
     successMessage,
     submitLabel,
     onConfirmation,
@@ -93,6 +102,14 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
   const card = useCardState();
   const { navigate } = useRouter();
 
+  const confirmationField = useFormControl('deleteOrganizationConfirmation', '', {
+    type: 'text',
+    label: localizationKeys('formFieldLabel__confirmDeletion'),
+    isRequired: true,
+  });
+
+  const canSubmit = actionDescription ? confirmationField.value === organizationName : true;
+
   const handleSubmit = async () => {
     try {
       await onConfirmation().then(() => wizard.nextStep());
@@ -108,19 +125,31 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
         Breadcrumbs={OrganizationProfileBreadcrumbs}
       >
         <Form.Root onSubmit={handleSubmit}>
-          <Text
-            localizationKey={messageLine1}
-            variant='regularRegular'
-          />
-          <Text
-            localizationKey={messageLine2}
-            variant='regularRegular'
-          />
+          <Text localizationKey={messageLine1} />
+          <Text localizationKey={messageLine2} />
+
+          {actionDescription && (
+            <>
+              <Text
+                localizationKey={actionDescription}
+                variant='regularRegular'
+              />
+
+              <Form.ControlRow elementId={confirmationField.id}>
+                <Form.Control
+                  {...confirmationField.props}
+                  required
+                />
+              </Form.ControlRow>
+            </>
+          )}
+
           <FormButtonContainer>
             <Form.SubmitButton
               block={false}
               colorScheme={colorScheme}
               localizationKey={submitLabel}
+              isDisabled={!canSubmit}
             />
             <Form.ResetButton
               localizationKey={localizationKeys('userProfile.formButtonReset')}

diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx
@@ -39,7 +39,8 @@ export const DeletePage = withCardStateProvider(() => {
       Breadcrumbs={UserProfileBreadcrumbs}
     >
       <Form.Root onSubmit={deleteUser}>
-        <Text localizationKey={localizationKeys('userProfile.deletePage.description')} />
+        <Text localizationKey={localizationKeys('userProfile.deletePage.messageLine1')} />
+        <Text localizationKey={localizationKeys('userProfile.deletePage.messageLine2')} />
         <Text localizationKey={localizationKeys('userProfile.deletePage.actionDescription')} />
 
         <Form.ControlRow elementId={confirmationField.id}>

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -507,7 +507,8 @@ export const enUS: LocalizationResource = {
     },
     deletePage: {
       title: 'Delete account',
-      description: 'Are you sure you want to delete your account? This action is permanent and irreversible.',
+      messageLine1: 'Are you sure you want to delete your account?',
+      messageLine2: 'This action is permanent and irreversible.',
       actionDescription: 'Type Delete account below to continue.',
       confirm: 'Delete account',
     },
@@ -552,6 +553,7 @@ export const enUS: LocalizationResource = {
           title: 'Delete organization',
           messageLine1: 'Are you sure you want to delete this organization?',
           messageLine2: 'This action is permanent and irreversible.',
+          actionDescription: 'Type {{organizationName}} below to continue.',
           successMessage: 'You have deleted the organization.',
         },
       },

diff --git a/packages/localizations/src/nb-NO.ts b/packages/localizations/src/nb-NO.ts
@@ -509,8 +509,8 @@ export const nbNO: LocalizationResource = {
     },
     deletePage: {
       title: 'Slett konto',
-      description:
-        'Er du sikker på at du vil slette kontoen din? Denne handlingen er permanent og kan ikke reverseres.',
+      messageLine1: 'Er du sikker på at du vil slette kontoen din?',
+      messageLine2: 'Denne handlingen er permanent og kan ikke reverseres.',
       confirm: 'Slett konto',
     },
   },

diff --git a/packages/localizations/src/vi-VN.ts b/packages/localizations/src/vi-VN.ts
@@ -507,8 +507,8 @@ export const viVN: LocalizationResource = {
     },
     deletePage: {
       title: 'Xóa tài khoản',
-      description:
-        'Bạn có chắc chắn muốn xóa tài khoản của mình không? Hành động này là vĩnh viễn và không thể hoàn tác.',
+      messageLine1: 'Bạn có chắc chắn muốn xóa tài khoản của mình không?',
+      messageLine2: 'Hành động này là vĩnh viễn và không thể hoàn tác.',
       confirm: 'Xóa tài khoản',
     },
   },

diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
@@ -72,7 +72,8 @@ export type FieldId =
   | 'username'
   | 'code'
   | 'role'
-  | 'deleteConfirmation';
+  | 'deleteConfirmation'
+  | 'deleteOrganizationConfirmation';
 export type ProfileSectionId =
   | 'profile'
   | 'username'

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -528,7 +528,8 @@ type _LocalizationResource = {
     };
     deletePage: {
       title: LocalizationValue;
-      description: LocalizationValue;
+      messageLine1: LocalizationValue;
+      messageLine2: LocalizationValue;
       actionDescription: LocalizationValue;
       confirm: LocalizationValue;
     };
@@ -572,6 +573,7 @@ type _LocalizationResource = {
           title: LocalizationValue;
           messageLine1: LocalizationValue;
           messageLine2: LocalizationValue;
+          actionDescription: LocalizationValue;
           successMessage: LocalizationValue;
         };
       };