set up logout button to call logout

src/Umbraco.Web.UI.Client/src/packages/users/current-user/modals/current-user/current-user-modal.element.ts

@@ -1,7 +1,9 @@
+import { UMB_AUTH } from '@umbraco-cms/backoffice/auth';
+import { UMB_APP } from '@umbraco-cms/backoffice/context';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user.store.js';
 import type { UmbLoggedInUser } from '../../types.js';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, CSSResultGroup, html , customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, CSSResultGroup, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -15,6 +17,10 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
 
 	private _currentUserStore?: UmbCurrentUserStore;
 
+	#auth?: typeof UMB_AUTH.TYPE;
+
+	#appContext?: typeof UMB_APP.TYPE;
+
 	constructor() {
 		super();
 
@@ -23,6 +29,14 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
 			this._observeCurrentUser();
 		});
 
+		this.consumeContext(UMB_AUTH, (instance) => {
+			this.#auth = instance;
+		});
+
+		this.consumeContext(UMB_APP, (instance) => {
+			this.#appContext = instance;
+		});
+
 		this._observeCurrentUser();
 	}
 
@@ -38,8 +52,13 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
 		this.modalHandler?.submit();
 	}
 
-	private _logout() {
-		alert('implement log out');
+	private async _logout() {
+		if (!this.#auth) return;
+		this.#auth.performWithFreshTokens;
+		await this.#auth.signOut();
+		let newUrl = this.#appContext ? `${this.#appContext.getBackofficePath()}/login` : '/';
+		newUrl = newUrl.replace(/\/\//g, '/');
+		location.href = newUrl;
 	}
 
 	render() {