show notification when password is changed

src/Umbraco.Web.UI.Client/src/mocks/handlers/user/change-password.handlers.ts

@@ -0,0 +1,16 @@
+const { rest } = window.MockServiceWorker;
+import { slug } from './slug.js';
+import { ChangePasswordUserRequestModel } from '@umbraco-cms/backoffice/backend-api';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const handlers = [
+	rest.post<ChangePasswordUserRequestModel>(umbracoPath(`${slug}/change-password/:id`), async (req, res, ctx) => {
+		const data = await req.json();
+		if (!data) return;
+		if (!data.newPassword) return;
+
+		/* we don't have to update any mock data when a password is changed
+		so we just return a 200 */
+		return res(ctx.status(200));
+	}),
+];

src/Umbraco.Web.UI.Client/src/mocks/handlers/user/index.ts

@@ -4,6 +4,7 @@ import { handlers as currentHandlers } from './current.handlers.js';
 import { handlers as setUserGroupsHandlers } from './set-user-groups.handlers.js';
 import { handlers as enableHandlers } from './enable.handlers.js';
 import { handlers as disableHandlers } from './disable.handlers.js';
+import { handlers as changePasswordHandler } from './change-password.handlers.js';
 
 export const handlers = [
 	...itemHandlers,
@@ -11,5 +12,6 @@ export const handlers = [
 	...enableHandlers,
 	...disableHandlers,
 	...setUserGroupsHandlers,
+	...changePasswordHandler,
 	...detailHandlers,
 ];

src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts

@@ -26,8 +26,7 @@ export class UmbChangeUserPasswordEntityAction extends UmbEntityActionBase<UmbCh
 			userId: this.unique,
 		});
 
-		modalContext.onSubmit().then((data) => {
-			this.repository?.changePassword(this.unique, data.newPassword);
-		});
+		const data = await modalContext.onSubmit();
+		await this.repository?.changePassword(this.unique, data.newPassword);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/user/user/repository/change-password/change-user-password.repository.ts

@@ -1,20 +1,38 @@
 import { UmbChangeUserPasswordServerDataSource } from './change-user-password.server.data.js';
+import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_NOTIFICATION_CONTEXT_TOKEN, UmbNotificationContext } from '@umbraco-cms/backoffice/notification';
 
 export class UmbChangeUserPasswordRepository {
 	#host: UmbControllerHostElement;
+	#init!: Promise<unknown>;
 
 	#changePasswordSource: UmbChangeUserPasswordServerDataSource;
+	#notificationContext?: UmbNotificationContext;
 
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		this.#changePasswordSource = new UmbChangeUserPasswordServerDataSource(this.#host);
+
+		this.#init = Promise.all([
+			new UmbContextConsumerController(this.#host, UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
+				this.#notificationContext = instance;
+			}).asPromise(),
+		]);
 	}
 
-	async changePassword(id: string, newPassword: string) {
-		if (!id) throw new Error('User id is missing');
+	async changePassword(userId: string, newPassword: string) {
+		if (!userId) throw new Error('User id is missing');
 		if (!newPassword) throw new Error('New password is missing');
+		await this.#init;
 
-		return this.#changePasswordSource.changePassword(id, newPassword);
+		const { data, error } = await this.#changePasswordSource.changePassword(userId, newPassword);
+
+		if (!error) {
+			const notification = { data: { message: `Password changed` } };
+			this.#notificationContext?.peek('positive', notification);
+		}
+
+		return { data, error };
 	}
 }