From d8d85fbb54f5f43dc4f8d7229eb62ad68a36dd34 Mon Sep 17 00:00:00 2001 From: Carl Date: Fri, 14 Jun 2024 12:51:51 +0200 Subject: [PATCH 1/6] Hacky first version of the fix, need to refactor it to do it the right way --- .../installer/user/installer-user.element.ts | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts index 504b616071..50cef7c431 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts @@ -1,15 +1,19 @@ +import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth'; import type { UmbInstallerContext } from '../installer.context.js'; import { UMB_INSTALLER_CONTEXT } from '../installer.context.js'; import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import {UserSettingsPresentationModel} from "@umbraco-cms/backoffice/external/backend-api"; @customElement('umb-installer-user') export class UmbInstallerUserElement extends UmbLitElement { @state() private _userFormData?: { name: string; password: string; email: string; subscribeToNewsletter: boolean }; - + @state() + private _passwordError?: string; private _installerContext?: UmbInstallerContext; + private _userSettings?:UserSettingsPresentationModel; constructor() { super(); @@ -31,6 +35,9 @@ export class UmbInstallerUserElement extends UmbLitElement { subscribeToNewsletter: user.subscribeToNewsletter ?? false, }; }); + this.observe(this._installerContext.settings, (settings)=>{ + this._userSettings= settings?.user; + }) } private _handleSubmit = (e: SubmitEvent) => { @@ -39,7 +46,7 @@ export class UmbInstallerUserElement extends UmbLitElement { const form = e.target as HTMLFormElement; if (!form) return; - const isValid = form.checkValidity(); + let isValid = form.checkValidity(); if (!isValid) return; const formData = new FormData(form); @@ -48,6 +55,13 @@ export class UmbInstallerUserElement extends UmbLitElement { const email = formData.get('email') as string; const subscribeToNewsletter = formData.has('subscribeToNewsletter'); + const minCarLenth = this._userSettings?.minCharLength ?? 10; + if (password.length < minCarLenth) { + console.log('Len fail'); + isValid = false; + return; + } + this._installerContext?.appendData({ user: { name, password, email, subscribeToNewsletter } }); this._installerContext?.nextStep(); }; @@ -87,6 +101,7 @@ export class UmbInstallerUserElement extends UmbLitElement { id="password" name="password" label="password" + .minLength=${this._userSettings?.minCharLength} .value=${this._userFormData?.password} required required-message="Password is required"> From 5010452d7fa07c17c3a280bfebb3774aa619bcf1 Mon Sep 17 00:00:00 2001 From: Carl Date: Sat, 15 Jun 2024 08:32:36 +0200 Subject: [PATCH 2/6] import type --- .../src/apps/installer/user/installer-user.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts index 50cef7c431..c17f172a10 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts @@ -4,7 +4,7 @@ import { UMB_INSTALLER_CONTEXT } from '../installer.context.js'; import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import {UserSettingsPresentationModel} from "@umbraco-cms/backoffice/external/backend-api"; +import type {UserSettingsPresentationModel} from "@umbraco-cms/backoffice/external/backend-api"; @customElement('umb-installer-user') export class UmbInstallerUserElement extends UmbLitElement { From 430b4d9a8f62dc0d30a6031f485bf12e70cba028 Mon Sep 17 00:00:00 2001 From: Carl Date: Mon, 17 Jun 2024 01:20:32 +0100 Subject: [PATCH 3/6] Fix using uui-input-password, with fallback --- .../apps/installer/user/installer-user.element.ts | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts index c17f172a10..05e1d5fdcd 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts @@ -11,7 +11,6 @@ export class UmbInstallerUserElement extends UmbLitElement { @state() private _userFormData?: { name: string; password: string; email: string; subscribeToNewsletter: boolean }; @state() - private _passwordError?: string; private _installerContext?: UmbInstallerContext; private _userSettings?:UserSettingsPresentationModel; @@ -35,6 +34,7 @@ export class UmbInstallerUserElement extends UmbLitElement { subscribeToNewsletter: user.subscribeToNewsletter ?? false, }; }); + this.observe(this._installerContext.settings, (settings)=>{ this._userSettings= settings?.user; }) @@ -55,13 +55,6 @@ export class UmbInstallerUserElement extends UmbLitElement { const email = formData.get('email') as string; const subscribeToNewsletter = formData.has('subscribeToNewsletter'); - const minCarLenth = this._userSettings?.minCharLength ?? 10; - if (password.length < minCarLenth) { - console.log('Len fail'); - isValid = false; - return; - } - this._installerContext?.appendData({ user: { name, password, email, subscribeToNewsletter } }); this._installerContext?.nextStep(); }; @@ -101,7 +94,7 @@ export class UmbInstallerUserElement extends UmbLitElement { id="password" name="password" label="password" - .minLength=${this._userSettings?.minCharLength} + minlength=${this._userSettings?.minCharLength ?? 10} .value=${this._userFormData?.password} required required-message="Password is required"> @@ -165,7 +158,7 @@ export class UmbInstallerUserElement extends UmbLitElement { #buttons { display: flex; margin-top: auto; - } + A #button-install { margin-left: auto; From e1937b051c9fd89c5efda0a9ca2ca12e80c7a58c Mon Sep 17 00:00:00 2001 From: Carl Date: Mon, 17 Jun 2024 01:21:57 +0100 Subject: [PATCH 4/6] fix css mistake --- .../src/apps/installer/user/installer-user.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts index 05e1d5fdcd..4247b13051 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts @@ -158,7 +158,7 @@ export class UmbInstallerUserElement extends UmbLitElement { #buttons { display: flex; margin-top: auto; - A + } #button-install { margin-left: auto; From 51153aa6b57c96f2fc61989a1069a352c0ebe54c Mon Sep 17 00:00:00 2001 From: Carl Sargunar Date: Mon, 17 Jun 2024 14:19:23 +0100 Subject: [PATCH 5/6] reverted variable - no longer need it to be assignable --- .../src/apps/installer/user/installer-user.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts index 4247b13051..02e652561e 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts @@ -46,7 +46,7 @@ export class UmbInstallerUserElement extends UmbLitElement { const form = e.target as HTMLFormElement; if (!form) return; - let isValid = form.checkValidity(); + const isValid = form.checkValidity(); if (!isValid) return; const formData = new FormData(form); From 265109cb27be5b14479bf6ba6481636dd5091d46 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 25 Jun 2024 11:33:59 +0200 Subject: [PATCH 6/6] chore: extract the password length into its own state variable this optimizes Lit's update checker so that the template is only re-rendered if the actual number changes, whereas otherwise it would re-render when the object is set again --- .../installer/user/installer-user.element.ts | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts index 02e652561e..5d3076adeb 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts @@ -1,32 +1,32 @@ -import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth'; import type { UmbInstallerContext } from '../installer.context.js'; import { UMB_INSTALLER_CONTEXT } from '../installer.context.js'; import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type {UserSettingsPresentationModel} from "@umbraco-cms/backoffice/external/backend-api"; @customElement('umb-installer-user') export class UmbInstallerUserElement extends UmbLitElement { @state() private _userFormData?: { name: string; password: string; email: string; subscribeToNewsletter: boolean }; + @state() - private _installerContext?: UmbInstallerContext; - private _userSettings?:UserSettingsPresentationModel; + private _minimumPasswordLength = 10; + + #installerContext?: UmbInstallerContext; constructor() { super(); this.consumeContext(UMB_INSTALLER_CONTEXT, (installerContext) => { - this._installerContext = installerContext; + this.#installerContext = installerContext; this._observeInstallerData(); }); } private _observeInstallerData() { - if (!this._installerContext) return; + if (!this.#installerContext) return; - this.observe(this._installerContext.data, ({ user }) => { + this.observe(this.#installerContext.data, ({ user }) => { this._userFormData = { name: user.name, password: user.password, @@ -35,9 +35,9 @@ export class UmbInstallerUserElement extends UmbLitElement { }; }); - this.observe(this._installerContext.settings, (settings)=>{ - this._userSettings= settings?.user; - }) + this.observe(this.#installerContext.settings, (settings) => { + this._minimumPasswordLength = settings?.user.minCharLength ?? this._minimumPasswordLength; + }); } private _handleSubmit = (e: SubmitEvent) => { @@ -55,8 +55,8 @@ export class UmbInstallerUserElement extends UmbLitElement { const email = formData.get('email') as string; const subscribeToNewsletter = formData.has('subscribeToNewsletter'); - this._installerContext?.appendData({ user: { name, password, email, subscribeToNewsletter } }); - this._installerContext?.nextStep(); + this.#installerContext?.appendData({ user: { name, password, email, subscribeToNewsletter } }); + this.#installerContext?.nextStep(); }; render() { @@ -94,7 +94,7 @@ export class UmbInstallerUserElement extends UmbLitElement { id="password" name="password" label="password" - minlength=${this._userSettings?.minCharLength ?? 10} + minlength=${this._minimumPasswordLength} .value=${this._userFormData?.password} required required-message="Password is required">