V16: Upgrade Login dependencies to Umbraco 16

src/Umbraco.Web.UI.Login/package.json

@@ -14,12 +14,12 @@
     "npm": ">=10.9"
   },
   "devDependencies": {
-    "@hey-api/client-fetch": "^0.10.0",
-    "@hey-api/openapi-ts": "^0.66.3",
-    "@umbraco-cms/backoffice": "15.3.0",
+    "@hey-api/client-fetch": "^0.10.2",
+    "@hey-api/openapi-ts": "^0.67.6",
+    "@umbraco-cms/backoffice": "16.0.0-rc3",
     "msw": "^2.7.0",
-    "typescript": "^5.7.3",
-    "vite": "^6.2.6",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "msw": {

src/Umbraco.Web.UI.Login/src/components/layouts/new-password-layout.element.ts

@@ -33,10 +33,10 @@
   constructor() {
     super();
 
     this.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
-      this._passwordConfiguration = authContext.passwordConfiguration;
       // Build a pattern
       let pattern = '';
+      this._passwordConfiguration = authContext?.passwordConfiguration;
       if (this._passwordConfiguration?.requireDigit) {
         pattern += '(?=.*\\d)';
       }

src/Umbraco.Web.UI.Login/src/components/pages/login.page.element.ts

@@ -33,7 +33,7 @@ export default class UmbLoginPageElement extends UmbLitElement {
 
     this.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
       this.#authContext = authContext;
-      this.supportPersistLogin = authContext.supportsPersistLogin;
+      this.supportPersistLogin = authContext?.supportsPersistLogin ?? false;
     });
   }
 

src/Umbraco.Web.UI.Login/src/components/pages/reset-password.page.element.ts

@@ -1,168 +1,173 @@
-import type {UUIButtonState} from '@umbraco-cms/backoffice/external/uui';
-import {type CSSResultGroup, css, html, nothing, customElement, state} from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
+import { type CSSResultGroup, css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 import { UMB_AUTH_CONTEXT } from '../../contexts';
 
 @customElement('umb-reset-password-page')
 export default class UmbResetPasswordPageElement extends UmbLitElement {
-  @state()
-  resetCallState: UUIButtonState = undefined;
-
-  @state()
-  error = '';
-
-  #handleResetSubmit = async (e: SubmitEvent) => {
-    e.preventDefault();
-    const form = e.target as HTMLFormElement;
-
-    if (!form) return;
-    if (!form.checkValidity()) return;
-
-    const formData = new FormData(form);
-    const username = formData.get('email') as string;
-
-    this.resetCallState = 'waiting';
-    const authContext = await this.getContext(UMB_AUTH_CONTEXT);
-    const response = await authContext.resetPassword(username);
-    this.resetCallState = response.error ? 'failed' : 'success';
-    this.error = response.error || '';
-  };
-
-  #renderResetPage() {
-    return html`
-      <uui-form>
-        <form id="LoginForm" name="login" @submit="${this.#handleResetSubmit}">
-          <header id="header">
-            <h1>
-              <umb-localize key="auth_forgottenPassword">Forgotten password?</umb-localize>
-            </h1>
-            <span>
+	@state()
+	resetCallState: UUIButtonState = undefined;
+
+	@state()
+	error = '';
+
+	#handleResetSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const form = e.target as HTMLFormElement;
+
+		if (!form) return;
+		if (!form.checkValidity()) return;
+
+		const formData = new FormData(form);
+		const username = formData.get('email') as string;
+
+		this.resetCallState = 'waiting';
+		const authContext = await this.getContext(UMB_AUTH_CONTEXT);
+		if (!authContext) {
+			this.resetCallState = 'failed';
+			this.error = 'Authentication context not available.';
+			return;
+		}
+		const response = await authContext.resetPassword(username);
+		this.resetCallState = response.error ? 'failed' : 'success';
+		this.error = response.error || '';
+	};
+
+	#renderResetPage() {
+		return html`
+			<uui-form>
+				<form id="LoginForm" name="login" @submit="${this.#handleResetSubmit}">
+					<header id="header">
+						<h1>
+							<umb-localize key="auth_forgottenPassword">Forgotten password?</umb-localize>
+						</h1>
+						<span>
 							<umb-localize key="auth_forgottenPasswordInstruction">
-                An email will be sent to the address specified with a link to reset your password
-              </umb-localize>
+								An email will be sent to the address specified with a link to reset your password
+							</umb-localize>
 						</span>
-          </header>
-
-          <uui-form-layout-item>
-            <uui-label for="email" slot="label" required>
-              <umb-localize key="auth_email">Email</umb-localize>
-            </uui-label>
-            <uui-input
-              type="email"
-              id="email"
-              name="email"
-              .label=${this.localize.term('auth_email')}
-              required
-              required-message=${this.localize.term('auth_required')}>
-            </uui-input>
-          </uui-form-layout-item>
-
-          ${this.#renderErrorMessage()}
-
-          <uui-button
-            type="submit"
-            .label=${this.localize.term('auth_submit')}
-            look="primary"
-            color="default"
-            .state=${this.resetCallState}></uui-button>
-        </form>
-      </uui-form>
-
-      <umb-back-to-login-button style="margin-top: var(--uui-size-space-6)"></umb-back-to-login-button>
-    `;
-  }
-
-  #renderErrorMessage() {
-    if (!this.error || this.resetCallState !== 'failed') return nothing;
-
-    return html`<span class="text-danger">${this.error}</span>`;
-  }
-
-  #renderConfirmationPage() {
-    return html`
-      <umb-confirmation-layout
-        header=${this.localize.term('auth_forgottenPassword')}
-        message=${this.localize.term('auth_requestPasswordResetConfirmation')}>
-      </umb-confirmation-layout>
-    `;
-  }
-
-  render() {
-    return this.resetCallState === 'success' ? this.#renderConfirmationPage() : this.#renderResetPage();
-  }
-
-  static styles: CSSResultGroup = [
-    css`
-      #header {
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        gap: var(--uui-size-space-5);
-      }
-
-      #header span {
-        color: var(--uui-color-text-alt); /* TODO Change to uui color when uui gets a muted text variable */
-        font-size: 14px;
-      }
-
-      #header h1 {
-        margin: 0;
-        font-weight: 400;
-        font-size: var(--header-secondary-font-size);
-        color: var(--uui-color-interactive);
-        line-height: 1.2;
-      }
-
-      form {
-        display: flex;
-        flex-direction: column;
-        gap: var(--uui-size-layout-2);
-      }
-
-      uui-form-layout-item {
-        margin: 0;
-      }
-
-      uui-input,
-      uui-input-password {
-        width: 100%;
-        height: var(--input-height);
-        border-radius: var(--uui-border-radius);
-      }
-
-      uui-input {
-        width: 100%;
-      }
-
-      uui-button {
-        width: 100%;
-        --uui-button-padding-top-factor: 1.5;
-        --uui-button-padding-bottom-factor: 1.5;
-      }
-
-      #resend {
-        display: inline-flex;
-        font-size: 14px;
-        align-self: center;
-        gap: var(--uui-size-space-1);
-      }
-
-      #resend a {
-        color: var(--uui-color-selected);
-        font-weight: 600;
-        text-decoration: none;
-      }
-
-      #resend a:hover {
-        color: var(--uui-color-interactive-emphasis);
-      }
-    `,
-  ];
+					</header>
+
+					<uui-form-layout-item>
+						<uui-label for="email" slot="label" required>
+							<umb-localize key="auth_email">Email</umb-localize>
+						</uui-label>
+						<uui-input
+							type="email"
+							id="email"
+							name="email"
+							.label=${this.localize.term('auth_email')}
+							required
+							required-message=${this.localize.term('auth_required')}>
+						</uui-input>
+					</uui-form-layout-item>
+
+					${this.#renderErrorMessage()}
+
+					<uui-button
+						type="submit"
+						.label=${this.localize.term('auth_submit')}
+						look="primary"
+						color="default"
+						.state=${this.resetCallState}></uui-button>
+				</form>
+			</uui-form>
+
+			<umb-back-to-login-button style="margin-top: var(--uui-size-space-6)"></umb-back-to-login-button>
+		`;
+	}
+
+	#renderErrorMessage() {
+		if (!this.error || this.resetCallState !== 'failed') return nothing;
+
+		return html`<span class="text-danger">${this.error}</span>`;
+	}
+
+	#renderConfirmationPage() {
+		return html`
+			<umb-confirmation-layout
+				header=${this.localize.term('auth_forgottenPassword')}
+				message=${this.localize.term('auth_requestPasswordResetConfirmation')}>
+			</umb-confirmation-layout>
+		`;
+	}
+
+	render() {
+		return this.resetCallState === 'success' ? this.#renderConfirmationPage() : this.#renderResetPage();
+	}
+
+	static styles: CSSResultGroup = [
+		css`
+			#header {
+				text-align: center;
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-5);
+			}
+
+			#header span {
+				color: var(--uui-color-text-alt); /* TODO Change to uui color when uui gets a muted text variable */
+				font-size: 14px;
+			}
+
+			#header h1 {
+				margin: 0;
+				font-weight: 400;
+				font-size: var(--header-secondary-font-size);
+				color: var(--uui-color-interactive);
+				line-height: 1.2;
+			}
+
+			form {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-layout-2);
+			}
+
+			uui-form-layout-item {
+				margin: 0;
+			}
+
+			uui-input,
+			uui-input-password {
+				width: 100%;
+				height: var(--input-height);
+				border-radius: var(--uui-border-radius);
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			uui-button {
+				width: 100%;
+				--uui-button-padding-top-factor: 1.5;
+				--uui-button-padding-bottom-factor: 1.5;
+			}
+
+			#resend {
+				display: inline-flex;
+				font-size: 14px;
+				align-self: center;
+				gap: var(--uui-size-space-1);
+			}
+
+			#resend a {
+				color: var(--uui-color-selected);
+				font-weight: 600;
+				text-decoration: none;
+			}
+
+			#resend a:hover {
+				color: var(--uui-color-interactive-emphasis);
+			}
+		`,
+	];
 }
 
 declare global {
-  interface HTMLElementTagNameMap {
-    'umb-reset-password-page': UmbResetPasswordPageElement;
-  }
+	interface HTMLElementTagNameMap {
+		'umb-reset-password-page': UmbResetPasswordPageElement;
+	}
 }