Fix bug: No matching error display between New password and Confirm p…

…assword (#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 <[email protected]> Co-authored-by: leekelleher <[email protected]>
umbraco · Nov 6, 2024 · 746f970 · 746f970
1 parent 2799523
commit 746f970
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 44 deletions.
diff --git 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
@@ -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,20 +58,21 @@ 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;
 		}
 
 		this._isCurrentUser = await this.#currentUserContext.isUserCurrentUser(this.data.user.unique);
 	}
 
-	protected override async firstUpdated(): Promise<void> {
+	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`
 			<uui-dialog-layout class="uui-text" headline=${this._headline}>
 				<uui-form>
-					<form id="ChangePasswordForm" @submit="${this.#onSubmit}">
-						${this._isCurrentUser ? this.#renderOldPasswordInput() : nothing}
+					<form id="ChangePasswordForm" @submit=${this.#onSubmit}>
+						${when(
+							this._isCurrentUser,
+							() => html`
+								<uui-form-layout-item style="margin-bottom: var(--uui-size-layout-2)">
+									<uui-label slot="label" id="oldPasswordLabel" for="oldPassword" required>
+										<umb-localize key="user_passwordCurrent">Current password</umb-localize>
+									</uui-label>
+									<uui-input-password
+										id="oldPassword"
+										name="oldPassword"
+										required
+										required-message="Current password is required">
+									</uui-input-password>
+								</uui-form-layout-item>
+							`,
+						)}
 						<uui-form-layout-item>
-							<uui-label id="newPasswordLabel" for="newPassword" slot="label" required>New password</uui-label>
+							<uui-label slot="label" id="newPasswordLabel" for="newPassword" required>
+								<umb-localize key="user_newPassword">New password</umb-localize>
+							</uui-label>
 							<uui-input-password
 								id="newPassword"
 								name="newPassword"
 								required
-								required-message="New password is required"></uui-input-password>
+								required-message="New password is required">
+							</uui-input-password>
 						</uui-form-layout-item>
 						<uui-form-layout-item>
-							<uui-label id="confirmPasswordLabel" for="confirmPassword" slot="label" required
-								>Confirm password</uui-label
-							>
+							<uui-label slot="label" id="confirmPasswordLabel" for="confirmPassword" required>
+								<umb-localize key="user_confirmNewPassword">Confirm new password</umb-localize>
+							</uui-label>
 							<uui-input-password
 								id="confirmPassword"
 								name="confirmPassword"
 								required
-								required-message="Confirm password is required"></uui-input-password>
+								required-message="Confirm password is required">
+							</uui-input-password>
 						</uui-form-layout-item>
 					</form>
 				</uui-form>
-
-				<uui-button slot="actions" @click=${this.#onClose} label="Cancel"></uui-button>
+				<uui-button slot="actions" label=${this.localize.term('general_cancel')} @click=${this.#onClose}></uui-button>
 				<uui-button
 					slot="actions"
 					type="submit"
-					label="Confirm"
-					look="primary"
+					form="ChangePasswordForm"
 					color="positive"
-					form="ChangePasswordForm"></uui-button>
+					look="primary"
+					label=${this.localize.term('general_confirm')}></uui-button>
 			</uui-dialog-layout>
 		`;
 	}
 
-	#renderOldPasswordInput() {
-		return html`
-			<uui-form-layout-item style="margin-bottom: var(--uui-size-layout-2)">
-				<uui-label id="oldPasswordLabel" for="oldPassword" slot="label" required>Old password</uui-label>
-				<uui-input-password
-					id="oldPassword"
-					name="oldPassword"
-					required
-					required-message="Old password is required"></uui-input-password>
-			</uui-form-layout-item>
-		`;
-	}
-
-	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
@@ -3,6 +3,6 @@ export const manifests: Array<UmbExtensionManifest> = [
 		type: 'modal',
 		alias: 'Umb.Modal.ChangePassword',
 		name: 'Change Password Modal',
-		js: () => import('./change-password-modal.element.js'),
+		element: () => import('./change-password-modal.element.js'),
 	},
 ];