yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix bug: No matching error display between New password and Confirm password (#2384)

Browse Source 
* 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 <lnt@umbraco.dk>
Co-authored-by: leekelleher <leekelleher@gmail.com>
This commit is contained in:
NguyenThuyLan
2024-11-06 18:18:25 +01:00
committed by GitHub
parent 0c99b31285
commit 2576594d92
3 changed files with 54 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
View File

@@ -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')",

94
src/Umbraco.Web.UI.Client/src/packages/user/change-password/modal/change-password-modal.element.ts
View File

@@ -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<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 {

2
src/Umbraco.Web.UI.Client/src/packages/user/change-password/modal/manifests.ts
View File

@@ -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'),
},
];