diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.element.ts new file mode 100644 index 0000000000..7f4bca2221 --- /dev/null +++ b/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``; + } + + return html` + +

+ + If you wish to disable this two-factor provider, then you must enter the code shown on your authentication + device: + +

+
+ `; + } + + #disableProvider = (providerName: string, code: string): Promise => { + return this.#currentUserRepository.disableMfaProvider(providerName, code); + }; +} + +export default UmbCurrentUserMfaDisableProviderModalElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-current-user-mfa-disable-provider-modal': UmbCurrentUserMfaDisableProviderModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.stories.ts new file mode 100644 index 0000000000..e190f5886d --- /dev/null +++ b/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 = { + title: 'Current User/MFA/Disable MFA Provider', + component: 'umb-current-user-mfa-disable-provider-modal', + decorators: [(Story) => html`
${Story()}
`], + args: { + data: { + providerName: 'SMS', + }, + }, + parameters: { + layout: 'centered', + actions: { + disabled: true, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Overview: Story = {}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-disable-provider/current-user-mfa-disable-provider-modal.token.ts new file mode 100644 index 0000000000..e79be62fbc --- /dev/null +++ b/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', + }, +}); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.ts index 9d77a657d1..16efa0833c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.ts +++ b/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 = [