diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx index aa77b30d6b..77efd51f86 100644 --- 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 ( Promise; @@ -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} > - - + + + + {actionDescription && ( + <> + + + + + + + )} + { Breadcrumbs={UserProfileBreadcrumbs} > - + + diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index 505c74fdad..5e487156e7 100644 --- 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 index ac1725b9b6..19ee96c786 100644 --- 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 index ede501674e..9cc7552271 100644 --- 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 index 9d3b76fb61..310c724c8d 100644 --- 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 index 7109b8918b..19429f1c6f 100644 --- 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; }; };