add a disable provider modal

src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.element.ts

@@ -0,0 +1,46 @@
+import { UmbCurrentUserRepository } from '../../repository/index.js';
+import type { UmbCurrentUserMfaDisableProviderModalConfig } from './current-user-mfa-disable-provider-modal.token.js';
+import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+
+import '../../components/mfa-provider-default.element.js';
+
+@customElement('umb-current-user-mfa-disable-provider-modal')
+export class UmbCurrentUserMfaDisableProviderModalElement extends UmbModalBaseElement<
+	UmbCurrentUserMfaDisableProviderModalConfig,
+	never
+> {
+	#currentUserRepository = new UmbCurrentUserRepository(this);
+
+	render() {
+		if (!this.data) {
+			return html`<uui-loader-bar></uui-loader-bar>`;
+		}
+
+		return html`
+			<umb-mfa-provider-default
+				.providerName=${this.data.providerName}
+				.callback=${this.#disableProvider}
+				.close=${this.modalContext?.submit()}>
+				<p slot="description">
+					<umb-localize key="user_2faDisableText">
+						If you wish to disable this two-factor provider, then you must enter the code shown on your authentication
+						device:
+					</umb-localize>
+				</p>
+			</umb-mfa-provider-default>
+		`;
+	}
+
+	#disableProvider = (providerName: string, code: string): Promise<boolean> => {
+		return this.#currentUserRepository.disableMfaProvider(providerName, code);
+	};
+}
+
+export default UmbCurrentUserMfaDisableProviderModalElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-current-user-mfa-disable-provider-modal': UmbCurrentUserMfaDisableProviderModalElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { UmbCurrentUserMfaDisableProviderModalElement } from './current-user-mfa-disable-provider-modal.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+
+import './current-user-mfa-disable-provider-modal.element.js';
+
+const meta: Meta<UmbCurrentUserMfaDisableProviderModalElement> = {
+	title: 'Current User/MFA/Disable MFA Provider',
+	component: 'umb-current-user-mfa-disable-provider-modal',
+	decorators: [(Story) => html`<div style="width: 500px; height: 500px;">${Story()}</div>`],
+	args: {
+		data: {
+			providerName: 'SMS',
+		},
+	},
+	parameters: {
+		layout: 'centered',
+		actions: {
+			disabled: true,
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<UmbCurrentUserMfaDisableProviderModalElement>;
+
+export const Overview: Story = {};

src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.token.ts

@@ -0,0 +1,15 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbCurrentUserMfaDisableProviderModalConfig {
+	providerName: string;
+}
+
+export const UMB_CURRENT_USER_MFA_DISABLE_PROVIDER_MODAL = new UmbModalToken<
+	UmbCurrentUserMfaDisableProviderModalConfig,
+	never
+>('Umb.Modal.CurrentUserMfaDisableProvider', {
+	modal: {
+		type: 'sidebar',
+		size: 'small',
+	},
+});

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

@@ -1,5 +1,6 @@
 import { UMB_CURRENT_USER_MFA_ENABLE_PROVIDER_MODAL } from '../current-user-mfa-enable-provider/current-user-mfa-enable-provider-modal.token.js';
 import { UmbCurrentUserRepository } from '../../repository/index.js';
+import { UMB_CURRENT_USER_MFA_DISABLE_PROVIDER_MODAL } from '../current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.token.js';
 import type { UmbCurrentUserMfaProviderModel } from '../../types.js';
 import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -94,7 +95,7 @@ export class UmbCurrentUserMfaModalElement extends UmbLitElement {
 	/**
 	 * Open the provider modal.
 	 * This will show the QR code and/or other means of validation for the given provider and return the activation code.
-	 * The activation code is then used to either enable or disable the provider.
+	 * The activation code is then used to either enable the provider.
 	 */
 	async #onProviderEnable(item: UmbCurrentUserMfaProviderModel) {
 		// Open the provider modal
@@ -107,8 +108,20 @@ export class UmbCurrentUserMfaModalElement extends UmbLitElement {
 			.catch(() => ({}));
 	}
 
+	/**
+	 * Open the provider modal.
+	 * This will show the QR code and/or other means of validation for the given provider and return the activation code.
+	 * The activation code is then used to disable the provider.
+	 */
 	async #onProviderDisable(item: UmbCurrentUserMfaProviderModel) {
-		alert('TODO: Disable provider: ' + item.providerName);
+		// Open the provider modal
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		return await modalManager
+			.open(this, UMB_CURRENT_USER_MFA_DISABLE_PROVIDER_MODAL, {
+				data: { providerName: item.providerName },
+			})
+			.onSubmit()
+			.catch(() => ({}));
 	}
 
 	static styles = [