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

Author: iOvergaard

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"></uui-input-password>