fix(clerk-js): Add confirmation input when users try to leave an orga…

…nization fix(clerk-js): Add confirmation input when users try to leave an organization fix(clerk-js): Allow admin to leave organization if there are more than one fix(clerk-js): Add placeholders in inputs fix(clerk-js): Add placeholders in inputs fix(clerk-js): Revert organization admins count fix(clerk-js): Revert organization admins count
clerk · Jul 7, 2023 · 1a151e7 · 1a151e7
1 parent 972f24f
commit 1a151e7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 15 deletions.
diff --git a/.changeset/few-dingos-happen.md b/.changeset/few-dingos-happen.md
@@ -0,0 +1,12 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Add a confirmation input as an additional check when doing destructive actions such as:
+- delete an organization
+- delete a user account
+- leave an organization
+
+Νew localization keys were introduced to support the above
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -30,9 +30,14 @@ export const LeaveOrganizationPage = () => {
 
   return (
     <ActionConfirmationPage
+      organizationName={organization?.name}
       title={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
       messageLine1={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.messageLine1')}
       messageLine2={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.messageLine2')}
+      actionDescription={localizationKeys(
+        'organizationProfile.profilePage.dangerSection.leaveOrganization.actionDescription',
+        { organizationName: organization?.name },
+      )}
       submitLabel={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
       successMessage={localizationKeys(
         'organizationProfile.profilePage.dangerSection.leaveOrganization.successMessage',
@@ -106,6 +111,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
     type: 'text',
     label: localizationKeys('formFieldLabel__confirmDeletion'),
     isRequired: true,
+    placeholder: organizationName,
   });
 
   const canSubmit = actionDescription ? confirmationField.value === organizationName : true;
@@ -128,21 +134,14 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
           <Text localizationKey={messageLine1} />
           <Text localizationKey={messageLine2} />
 
-          {actionDescription && (
-            <>
-              <Text
-                localizationKey={actionDescription}
-                variant='regularRegular'
-              />
-
-              <Form.ControlRow elementId={confirmationField.id}>
-                <Form.Control
-                  {...confirmationField.props}
-                  required
-                />
-              </Form.ControlRow>
-            </>
-          )}
+          <Text localizationKey={actionDescription} />
+
+          <Form.ControlRow elementId={confirmationField.id}>
+            <Form.Control
+              {...confirmationField.props}
+              required
+            />
+          </Form.ControlRow>
 
           <FormButtonContainer>
             <Form.SubmitButton

diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx
@@ -29,6 +29,7 @@ export const DeletePage = withCardStateProvider(() => {
     type: 'text',
     label: localizationKeys('formFieldLabel__confirmDeletion'),
     isRequired: true,
+    placeholder: 'Delete account',
   });
 
   const canSubmit = confirmationField.value === 'Delete account';

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -548,6 +548,7 @@ export const enUS: LocalizationResource = {
             'Are you sure you want to leave this organization? You will lose access to this organization and its applications.',
           messageLine2: 'This action is permanent and irreversible.',
           successMessage: 'You have left the organization.',
+          actionDescription: 'Type {{organizationName}} below to continue.',
         },
         deleteOrganization: {
           title: 'Delete organization',

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -567,6 +567,7 @@ type _LocalizationResource = {
           title: LocalizationValue;
           messageLine1: LocalizationValue;
           messageLine2: LocalizationValue;
+          actionDescription: LocalizationValue;
           successMessage: LocalizationValue;
         };
         deleteOrganization: {