diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/user/current.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/user/current.handlers.ts index 4f2bd2a9c4..fe26630554 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/user/current.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/user/current.handlers.ts @@ -42,11 +42,11 @@ export const handlers = [ } if (body.code === 'fail') { - return res(ctx.status(400)); + return res(ctx.delay(), ctx.status(400)); } const result = umbUserMockDb.enableMfaProvider(req.params.providerName.toString()); - return res(ctx.status(result ? 200 : 404)); + return res(ctx.delay(), ctx.status(result ? 200 : 404)); }, ), rest.delete<{ code: string }>(umbracoPath(`${UMB_SLUG}/current/2fa/:providerName`), async (req, res, ctx) => { @@ -56,10 +56,10 @@ export const handlers = [ } if (body.code === 'fail') { - return res(ctx.status(400)); + return res(ctx.delay(), ctx.status(400)); } const result = umbUserMockDb.disableMfaProvider(req.params.providerName.toString()); - return res(ctx.status(result ? 200 : 404)); + return res(ctx.delay(), ctx.status(result ? 200 : 404)); }), ]; 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 1f73b5d773..e96c7052f8 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 @@ -5,6 +5,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; import { UMB_NOTIFICATION_CONTEXT, type UmbNotificationColor } from '@umbraco-cms/backoffice/notification'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-mfa-provider-default') export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMfaProviderConfigurationElementProps { @@ -26,6 +27,9 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf @state() protected _qrCodeSetupImageUrl = ''; + @state() + protected _buttonState?: UUIButtonState; + protected notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE; @query('#code') @@ -117,7 +121,11 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf @click=${this.close}> ${this.localize.term('general_close')} - + ${this.localize.term('general_submit')} @@ -146,6 +154,7 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf */ protected async submit(e: SubmitEvent) { e.preventDefault(); + this._buttonState = 'waiting'; this.codeField?.setCustomValidity(''); const formData = new FormData(e.target as HTMLFormElement); const code = formData.get('code') as string; @@ -153,9 +162,11 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf if (successful) { this.peek('Two-factor authentication has successfully been enabled.'); + this._buttonState = 'success'; } else { this.codeField?.setCustomValidity(this.localize.term('user_2faInvalidCode')); this.codeField?.focus(); + this._buttonState = 'failed'; } }