Skip to content

Commit

Permalink
fix(core): fixing the problem with submitting the password change form (
Browse files Browse the repository at this point in the history
  • Loading branch information
bc-yevhenii-buliuk authored Oct 2, 2024
1 parent c7bb7be commit 6e75ef5
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 60 deletions.
5 changes: 5 additions & 0 deletions .changeset/swift-jeans-jam.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bigcommerce/catalyst-core": patch
---

fixing the problem with submitting the password change form
Original file line number Diff line number Diff line change
Expand Up @@ -132,32 +132,27 @@ export const ChangePasswordForm = () => {
const handleCurrentPasswordChange = (e: ChangeEvent<HTMLInputElement>) =>
setIsCurrentPasswordValid(!e.target.validity.valueMissing);

const handleNewPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
let formData;

if (e.target.form) {
formData = new FormData(e.target.form);
}

const confirmPassword = formData?.get('confirm-password');
const isValid = confirmPassword
? validatePasswords('new-password', formData) &&
validatePasswords('confirm-password', formData)
: validatePasswords('new-password', formData);

setIsNewPasswordValid(isValid);
const validateNewAndConfirmPasswords = (formData: FormData) => {
const newPasswordValid = validatePasswords('new-password', formData);
const confirmPassword = formData.get('confirm-password');
const confirmPasswordValid = confirmPassword
? validatePasswords('confirm-password', formData)
: true;

setIsNewPasswordValid(newPasswordValid);
setIsConfirmPasswordValid(confirmPasswordValid);
};

const handleConfirmPasswordValidation = (e: ChangeEvent<HTMLInputElement>) => {
const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
let formData;

if (e.target.form) {
formData = new FormData(e.target.form);
}

const isValid = validatePasswords('confirm-password', formData);

setIsConfirmPasswordValid(isValid);
if (formData) {
validateNewAndConfirmPasswords(formData);
}
};

return (
Expand Down Expand Up @@ -200,8 +195,8 @@ export const ChangePasswordForm = () => {
autoComplete="none"
error={!isNewPasswordValid}
id="new-password"
onChange={handleNewPasswordChange}
onInvalid={handleNewPasswordChange}
onChange={handlePasswordChange}
onInvalid={handlePasswordChange}
required
type="password"
/>
Expand All @@ -212,31 +207,11 @@ export const ChangePasswordForm = () => {
>
{t('notEmptyMessage')}
</FieldMessage>
<FieldMessage
className="absolute inset-x-0 inline-flex w-full text-sm text-error md:bottom-0"
match={(newPasswordValue: string, formData: FormData) => {
const currentPasswordValue = formData.get('current-password');
const confirmPassword = formData.get('confirm-password');
let isMatched;

if (confirmPassword) {
isMatched =
newPasswordValue !== currentPasswordValue && newPasswordValue === confirmPassword;

setIsNewPasswordValid(isMatched);

return !isMatched;
}

isMatched = currentPasswordValue === newPasswordValue;

setIsNewPasswordValid(!isMatched);

return isMatched;
}}
>
{t('newPasswordValidationMessage')}
</FieldMessage>
{!isNewPasswordValid && (
<FieldMessage className="absolute inset-x-0 inline-flex w-full text-sm text-error md:bottom-0">
{t('newPasswordValidationMessage')}
</FieldMessage>
)}
</Field>
<Field className="relative space-y-2 pb-7" name="confirm-password">
<FieldLabel htmlFor="confirm-password" isRequired={true}>
Expand All @@ -247,8 +222,8 @@ export const ChangePasswordForm = () => {
autoComplete="none"
error={!isConfirmPasswordValid}
id="confirm-password"
onChange={handleConfirmPasswordValidation}
onInvalid={handleConfirmPasswordValidation}
onChange={handlePasswordChange}
onInvalid={handlePasswordChange}
required
type="password"
/>
Expand All @@ -259,19 +234,11 @@ export const ChangePasswordForm = () => {
>
{t('notEmptyMessage')}
</FieldMessage>
<FieldMessage
className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
match={(confirmPassword: string, formData: FormData) => {
const newPassword = formData.get('new-password');
const isMatched = confirmPassword === newPassword;

setIsConfirmPasswordValid(isMatched);

return !isMatched;
}}
>
{t('confirmPasswordValidationMessage')}
</FieldMessage>
{!isConfirmPasswordValid && (
<FieldMessage className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error">
{t('confirmPasswordValidationMessage')}
</FieldMessage>
)}
</Field>
<div className="flex flex-col justify-start gap-4 md:flex-row">
<FormSubmit asChild>
Expand Down

0 comments on commit 6e75ef5

Please sign in to comment.