From e30fc43978f7e6cff08bf66e5480031d74642727 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 12 Oct 2023 12:29:37 +0200
Subject: [PATCH] render username in modal headline

---
 .../token/change-password-modal.token.ts      |  3 ++-
 .../change-password-modal.element.ts          | 23 +++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
index 6497493af2..c34f51fe17 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/change-password-modal.token.ts
@@ -1,7 +1,8 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbChangePasswordModalData {
-	requireOldPassword: boolean;
+	userId: string;
+	requireOldPassword?: boolean;
 }
 
 export interface UmbChangePasswordModalValue {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
index 3942abdb8e..d0d99d4bbc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts
@@ -1,10 +1,19 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, CSSResultGroup, html, nothing, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { css, CSSResultGroup, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangePasswordModalData } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
+import { UmbUserRepository } from '@umbraco-cms/backoffice/user';
 
 @customElement('umb-change-password-modal')
 export class UmbChangePasswordModalElement extends UmbModalBaseElement<UmbChangePasswordModalData> {
+	@state()
+	private _userName: string = '';
+
+	@state()
+	private _headline: string = 'Change password';
+
+	#repository = new UmbUserRepository(this);
+
 	#onClose() {
 		this.modalContext?.reject();
 	}
@@ -27,9 +36,19 @@ export class UmbChangePasswordModalElement extends UmbModalBaseElement<UmbChange
 		this.modalContext?.submit({ oldPassword, newPassword, confirmPassword });
 	}
 
+	protected async firstUpdated(): Promise<void> {
+		if (!this.data?.userId) return;
+		const { data } = await this.#repository.requestItems([this.data.userId]);
+
+		if (data) {
+			const userName = data[0].name;
+			this._headline = `Change password for ${userName}`;
+		}
+	}
+
 	render() {
 		return html`
-			<uui-dialog-layout class="uui-text" headline="Change password">
+			<uui-dialog-layout class="uui-text" headline=${this._headline}>
 				<uui-form>
 					<form id="LoginForm" name="login" @submit="${this.#onSubmit}">
 						${this.data?.requireOldPassword ? this.#renderOldPasswordInput() : nothing}