diff --git a/.changeset/sweet-weeks-repeat.md b/.changeset/sweet-weeks-repeat.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/sweet-weeks-repeat.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui/components/UserProfile/UpdatePasswordForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/UpdatePasswordForm.tsx deleted file mode 100644 index 128edc9b05..0000000000 --- a/packages/clerk-js/src/ui/components/UserProfile/UpdatePasswordForm.tsx +++ /dev/null @@ -1,200 +0,0 @@ -import { useSession, useUser } from '@clerk/shared/react'; -import React, { useRef } from 'react'; - -import { useWizard, Wizard } from '../../common'; -import { useEnvironment } from '../../contexts'; -import type { LocalizationKey } from '../../customizables'; -import { localizationKeys, useLocalizations } from '../../customizables'; -import { - Form, - FormButtonContainer, - FormButtons, - FormContainer, - InformationBox, - SuccessPage, - useCardState, - withCardStateProvider, -} from '../../elements'; -import { useConfirmPassword, useNavigateToFlowStart } from '../../hooks'; -import { createPasswordError, handleError, useFormControl } from '../../utils'; - -const generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boolean) => { - const localizedTexts: LocalizationKey[] = []; - - if (userHasPassword) { - localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__update')); - } else { - localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__set')); - } - - if (sessionSignOut) { - localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__signOutOfOtherSessions')); - } - - return localizedTexts; -}; - -export const UpdatePasswordForm = withCardStateProvider(() => { - const { user } = useUser(); - - if (!user) { - return null; - } - - const { session } = useSession(); - const card = useCardState(); - const wizard = useWizard(); - const { navigateToFlowStart } = useNavigateToFlowStart(); - - const passwordEditDisabled = user.samlAccounts.some(sa => sa.active); - - // Ensure that messages will not use the updated state of User after a password has been set or changed - const successPagePropsRef = useRef[0]>({ - title: localizationKeys('userProfile.passwordPage.title__set'), - }); - - const currentPasswordField = useFormControl('currentPassword', '', { - type: 'password', - label: localizationKeys('formFieldLabel__currentPassword'), - isRequired: true, - }); - - const { - userSettings: { passwordSettings }, - } = useEnvironment(); - - const passwordField = useFormControl('newPassword', '', { - type: 'password', - label: localizationKeys('formFieldLabel__newPassword'), - isRequired: true, - validatePassword: true, - buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }), - }); - - const confirmField = useFormControl('confirmPassword', '', { - type: 'password', - label: localizationKeys('formFieldLabel__confirmPassword'), - isRequired: true, - }); - - const sessionsField = useFormControl('signOutOfOtherSessions', '', { - type: 'checkbox', - label: localizationKeys('formFieldLabel__signOutOfOtherSessions'), - defaultChecked: true, - }); - - const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({ - passwordField, - confirmPasswordField: confirmField, - }); - - const { t, locale } = useLocalizations(); - - const canSubmit = - (user.passwordEnabled ? currentPasswordField.value && isPasswordMatch : isPasswordMatch) && - passwordField.value && - confirmField.value; - - const validateForm = () => { - if (passwordField.value) { - setConfirmPasswordFeedback(confirmField.value); - } - }; - - const updatePassword = async () => { - const opts = { - newPassword: passwordField.value, - signOutOfOtherSessions: sessionsField.checked, - currentPassword: user.passwordEnabled ? currentPasswordField.value : undefined, - } satisfies Parameters[0]; - - try { - successPagePropsRef.current = { - title: user.passwordEnabled - ? localizationKeys('userProfile.passwordPage.title__update') - : localizationKeys('userProfile.passwordPage.title__set'), - text: generateSuccessPageText(user.passwordEnabled, !!sessionsField.checked), - }; - - await user.updatePassword(opts); - wizard.nextStep(); - } catch (e) { - handleError(e, [currentPasswordField, passwordField, confirmField], card.setError); - } - }; - - return ( - - - {passwordEditDisabled && } - - - {/* For password managers */} - - {user.passwordEnabled && ( - - - - )} - - - - - { - if (e.target.value) { - setConfirmPasswordFeedback(e.target.value); - } - return confirmField.props.onChange(e); - }} - isRequired - isDisabled={passwordEditDisabled} - /> - - - - - {passwordEditDisabled ? ( - - - - ) : ( - - )} - - - - - - ); -});