diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts index d74cfd36bd..5daedbbda1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts @@ -10,7 +10,6 @@ import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui'; /** * A default MFA provider configuration element. * @element umb-mfa-provider-default - * @slot description - The description of the action that is about to be taken. */ @customElement('umb-mfa-provider-default') export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMfaProviderConfigurationElementProps { @@ -23,12 +22,6 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf @property({ attribute: false }) close = () => {}; - @property({ attribute: 'success-message' }) - successMessage = 'This two-factor provider is enabled'; - - @property({ attribute: 'success-message' }) - successMessageKey = 'user_2faProviderIsEnabled'; - @state() protected _loading = true; @@ -96,7 +89,11 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
- +

+ + Scan this QR code with your authenticator app to enable two-factor authentication + +

${this.localize.term('user_2faQrCodeAlt')} { #currentUserRepository = new UmbCurrentUserRepository(this); + #notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE; + + @state() + _buttonState?: UUIButtonState; + + @query('#code') + _codeInput!: HTMLInputElement; + + constructor() { + super(); + this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => { + this.#notificationContext = context; + }); + } render() { if (!this.data) { @@ -18,25 +33,115 @@ export class UmbCurrentUserMfaDisableProviderModalElement extends UmbModalBaseEl } return html` - this.modalContext?.submit()} - success-message="This two-factor provider is now disabled" - success-message-key="user_2faProviderIsDisabledMsg"> -

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

- + +
+ +
+

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

+ + + + + + + +
+
+ + ${this.localize.term('general_close')} + + + ${this.localize.term('general_submit')} + +
+ +
+ `; } - #disableProvider = (providerName: string, code: string): Promise => { - return this.#currentUserRepository.disableMfaProvider(providerName, code); - }; + async #onSubmit(e: SubmitEvent) { + e.preventDefault(); + + this._codeInput.setCustomValidity(''); + + if (!this.data) throw new Error('No data provided'); + + const form = e.target as HTMLFormElement; + + if (!form.checkValidity()) return; + + const formData = new FormData(form); + const code = formData.get('code') as string; + + if (!code) return; + + this._buttonState = 'waiting'; + const success = await this.#currentUserRepository.disableMfaProvider(this.data.providerName, code); + + if (success) { + this.#peek(this.localize.term('user_2faProviderIsDisabledMsg')); + this.modalContext?.submit(); + this._buttonState = 'success'; + } else { + this._codeInput.setCustomValidity(this.localize.term('user_2faInvalidCode')); + this._codeInput.focus(); + this._buttonState = 'failed'; + } + } + + async #close() { + this.modalContext?.submit(); + } + + async #peek(message: string, color?: UmbNotificationColor) { + this.#notificationContext?.peek(color ?? 'positive', { + data: { + headline: this.localize.term('member_2fa'), + message, + }, + }); + } + + static styles = [ + UmbTextStyles, + css` + #authForm { + height: 100%; + } + + #code { + width: 100%; + max-width: 300px; + } + + .text-center { + text-align: center; + } + `, + ]; } export default UmbCurrentUserMfaDisableProviderModalElement;