From 1a151e701da80f2d5b1ba1447d6fd5f8612a4bb8 Mon Sep 17 00:00:00 2001
From: John Raptis <johnsitpar@gmail.com>
Date: Wed, 5 Jul 2023 18:21:50 +0300
Subject: [PATCH] fix(clerk-js): Add confirmation input when users try to leave
 an organization

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
---
 .changeset/few-dingos-happen.md               | 12 ++++++++
 .../ActionConfirmationPage.tsx                | 29 +++++++++----------
 .../ui/components/UserProfile/DeletePage.tsx  |  1 +
 packages/localizations/src/en-US.ts           |  1 +
 packages/types/src/localization.ts            |  1 +
 5 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/few-dingos-happen.md

diff --git a/.changeset/few-dingos-happen.md b/.changeset/few-dingos-happen.md
new file mode 100644
index 0000000000..6adacced8a
--- /dev/null
+++ 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
index 77efd51f86..5f6f03d3cb 100644
--- 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
index ea848053e1..19bcc9e4ca 100644
--- 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
index 5e487156e7..047f78aa13 100644
--- 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
index 19429f1c6f..18939952bc 100644
--- 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: {