From 35e5eb303e798d7553ffc9d4172dc8e92752294f Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 26 Mar 2024 15:11:59 +0100
Subject: [PATCH] rename the function to a callback

---
 .../mfa-provider-default.element.ts           | 36 ++++++++++---------
 ...-user-mfa-enable-provider-modal.element.ts |  2 +-
 .../src/packages/user/current-user/types.ts   |  6 ++--
 3 files changed, 23 insertions(+), 21 deletions(-)

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 e96c7052f8..eb36618ba0 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
@@ -13,7 +13,7 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 	providerName = '';
 
 	@property({ attribute: false })
-	enableProvider: (providerName: string, code: string, secret: string) => Promise<boolean> = async () => false;
+	callback: (providerName: string, code: string, secret: string) => Promise<boolean> = async () => false;
 
 	@property({ attribute: false })
 	close = () => {};
@@ -84,19 +84,12 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 					<umb-body-layout headline=${this.providerName}>
 						<div id="main">
 							<uui-box .headline=${this.localize.term('member_2fa')}>
-								${this._qrCodeSetupImageUrl
-									? html` <div class="text-center">
-											<p>
-												<umb-localize key="user_2faQrCodeDescription">
-													Scan this QR code with your authenticator app to enable two-factor authentication
-												</umb-localize>
-											</p>
-											<img
-												.src=${this._qrCodeSetupImageUrl}
-												alt=${this.localize.term('user_2faQrCodeAlt')}
-												title=${this.localize.term('user_2faQrCodeTitle')} />
-										</div>`
-									: ''}
+								<div class="text-center">
+									<img
+										.src=${this._qrCodeSetupImageUrl}
+										alt=${this.localize.term('user_2faQrCodeAlt')}
+										title=${this.localize.term('user_2faQrCodeTitle')} />
+								</div>
 								<uui-form-layout-item class="text-center">
 									<uui-label for="code" slot="label" required>
 										<umb-localize key="user_2faCodeInput"></umb-localize>
@@ -109,6 +102,7 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 										autocomplete="one-time-code"
 										required
 										required-message=${this.localize.term('general_required')}
+										label=${this.localize.term('user_2faCodeInputHelp')}
 										placeholder=${this.localize.term('user_2faCodeInputHelp')}></uui-input>
 								</uui-form-layout-item>
 							</uui-box>
@@ -154,11 +148,19 @@ 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 form = e.target as HTMLFormElement;
+
+		if (!form.checkValidity()) return;
+
+		const formData = new FormData(form);
 		const code = formData.get('code') as string;
-		const successful = await this.enableProvider(this.providerName, code, this._secret);
+
+		if (!code) return;
+
+		this._buttonState = 'waiting';
+		const successful = await this.callback(this.providerName, code, this._secret);
 
 		if (successful) {
 			this.peek('Two-factor authentication has successfully been enabled.');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-enable-provider/current-user-mfa-enable-provider-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-enable-provider/current-user-mfa-enable-provider-modal.element.ts
index 14285bfad3..27d22d9867 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-enable-provider/current-user-mfa-enable-provider-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa-enable-provider/current-user-mfa-enable-provider-modal.element.ts
@@ -21,7 +21,7 @@ export class UmbCurrentUserMfaEnableProviderModalElement extends UmbModalBaseEle
 	get #extensionSlotProps(): UmbMfaProviderConfigurationElementProps {
 		return {
 			providerName: this.data!.providerName,
-			enableProvider: (providerName, code, secret) =>
+			callback: (providerName, code, secret) =>
 				this.#currentUserRepository.enableMfaProvider(providerName, code, secret),
 			close: this.#close,
 		};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts
index 827967c02a..2f3f2526c8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts
@@ -29,13 +29,13 @@ export interface UmbMfaProviderConfigurationElementProps {
 	providerName: string;
 
 	/**
-	 * Enable the provider with the given code and secret.
+	 * Call this function to execute the action for the given provider, e.g. to enable or disable it.
 	 * @param providerName The name of the provider to enable.
 	 * @param code The authentication code from the authentication method.
 	 * @param secret The secret from the authentication backend.
-	 * @returns True if the provider was enabled successfully.
+	 * @returns True if the provider action was executed successfully.
 	 */
-	enableProvider: (providerName: string, code: string, secret: string) => Promise<boolean>;
+	callback: (providerName: string, code: string, secret: string) => Promise<boolean>;
 
 	/**
 	 * Call this function to close the modal.