From 746f9705fef10bd7517572b9b54c9e94744127ee Mon Sep 17 00:00:00 2001 From: NguyenThuyLan <116753400+NguyenThuyLan@users.noreply.github.com> Date: Wed, 6 Nov 2024 18:18:25 +0100 Subject: [PATCH] Fix bug: No matching error display between New password and Confirm password (#2384) * Fix bug: No matching error display between New password and Confirm password * Refactored to use built-in validation Wires up most localization keys. --------- Co-authored-by: Lan Nguyen Thuy Co-authored-by: leekelleher --- src/assets/lang/en.ts | 2 +- .../modal/change-password-modal.element.ts | 94 ++++++++++--------- .../user/change-password/modal/manifests.ts | 2 +- 3 files changed, 54 insertions(+), 44 deletions(-) diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts index 27fb01708b..e5a5eeadc2 100644 --- a/src/assets/lang/en.ts +++ b/src/assets/lang/en.ts @@ -1978,7 +1978,7 @@ export default { passwordCurrent: 'Current password', passwordInvalid: 'Invalid current password', passwordIsDifferent: - 'There was a difference between the new password and the confirmed password. Please\n try again!\n ', + 'There was a difference between the new password and the confirmed password. Please try again!', passwordMismatch: "The confirmed password doesn't match the new password!", passwordRequiresDigit: "The password must have at least one digit ('0'-'9')", passwordRequiresLower: "The password must have at least one lowercase ('a'-'z')", diff --git a/src/packages/user/change-password/modal/change-password-modal.element.ts b/src/packages/user/change-password/modal/change-password-modal.element.ts index bdff723460..d0fcbf4afd 100644 --- a/src/packages/user/change-password/modal/change-password-modal.element.ts +++ b/src/packages/user/change-password/modal/change-password-modal.element.ts @@ -1,18 +1,24 @@ import type { UmbChangePasswordModalData, UmbChangePasswordModalValue } from './change-password-modal.token.js'; -import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user'; -import { UmbUserItemRepository } from '@umbraco-cms/backoffice/user'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; -import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, query, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbUserItemRepository } from '@umbraco-cms/backoffice/user'; +import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user'; +import type { UUIInputPasswordElement } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-change-password-modal') export class UmbChangePasswordModalElement extends UmbModalBaseElement< UmbChangePasswordModalData, UmbChangePasswordModalValue > { + @query('#newPassword') + private _newPasswordInput?: UUIInputPasswordElement; + + @query('#confirmPassword') + private _confirmPasswordInput?: UUIInputPasswordElement; + @state() - private _headline: string = 'Change password'; + private _headline: string = this.localize.term('general_changePassword'); @state() private _isCurrentUser: boolean = false; @@ -35,10 +41,8 @@ export class UmbChangePasswordModalElement extends UmbModalBaseElement< const formData = new FormData(form); - // TODO: validate that the new password and confirm password match const oldPassword = formData.get('oldPassword') as string; const newPassword = formData.get('newPassword') as string; - //const confirmPassword = formData.get('confirmPassword') as string; this.value = { oldPassword, newPassword }; this.modalContext?.submit(); @@ -54,12 +58,7 @@ export class UmbChangePasswordModalElement extends UmbModalBaseElement< } async #setIsCurrentUser() { - if (!this.data?.user.unique) { - this._isCurrentUser = false; - return; - } - - if (!this.#currentUserContext) { + if (!this.#currentUserContext || !this.data?.user.unique) { this._isCurrentUser = false; return; } @@ -67,7 +66,13 @@ export class UmbChangePasswordModalElement extends UmbModalBaseElement< this._isCurrentUser = await this.#currentUserContext.isUserCurrentUser(this.data.user.unique); } - protected override async firstUpdated(): Promise { + protected override async firstUpdated() { + this._confirmPasswordInput?.addValidator( + 'customError', + () => this.localize.term('user_passwordMismatch'), + () => this._confirmPasswordInput?.value !== this._newPasswordInput?.value, + ); + if (!this.data?.user.unique) return; const { data } = await this.#userItemRepository.requestItems([this.data.user.unique]); @@ -81,55 +86,60 @@ export class UmbChangePasswordModalElement extends UmbModalBaseElement< return html` -
- ${this._isCurrentUser ? this.#renderOldPasswordInput() : nothing} + + ${when( + this._isCurrentUser, + () => html` + + + Current password + + + + + `, + )} - New password + + New password + + required-message="New password is required"> + - Confirm password + + Confirm new password + + required-message="Confirm password is required"> +
- - + + look="primary" + label=${this.localize.term('general_confirm')}> `; } - #renderOldPasswordInput() { - return html` - - Old password - - - `; - } - - static override styles: CSSResultGroup = [ + static override readonly styles = [ UmbTextStyles, css` uui-input-password { diff --git a/src/packages/user/change-password/modal/manifests.ts b/src/packages/user/change-password/modal/manifests.ts index f08d08322a..b3e3f0c901 100644 --- a/src/packages/user/change-password/modal/manifests.ts +++ b/src/packages/user/change-password/modal/manifests.ts @@ -3,6 +3,6 @@ export const manifests: Array = [ type: 'modal', alias: 'Umb.Modal.ChangePassword', name: 'Change Password Modal', - js: () => import('./change-password-modal.element.js'), + element: () => import('./change-password-modal.element.js'), }, ];