add displayName all the way through the options

src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts

@@ -16,6 +16,9 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 	@property({ attribute: false })
 	providerName = '';
 
+	@property({ attribute: false })
+	displayName = '';
+
 	@property({ attribute: false })
 	callback: (providerName: string, code: string, secret: string) => Promise<boolean> = async () => false;
 
@@ -85,7 +88,7 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 		return html`
 			<uui-form>
 				<form id="authForm" name="authForm" @submit=${this.submit} novalidate>
-					<umb-body-layout headline=${this.providerName}>
+					<umb-body-layout headline=${this.displayName}>
 						<div id="main">
 							<uui-box .headline=${this.localize.term('member_2fa')}>
 								<div class="text-center">

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

@@ -2,6 +2,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbCurrentUserMfaDisableProviderModalConfig {
 	providerName: string;
+	displayName: string;
 }
 
 export const UMB_CURRENT_USER_MFA_DISABLE_PROVIDER_MODAL = new UmbModalToken<

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,6 +21,7 @@ export class UmbCurrentUserMfaEnableProviderModalElement extends UmbModalBaseEle
 	get #extensionSlotProps(): UmbMfaProviderConfigurationElementProps {
 		return {
 			providerName: this.data!.providerName,
+			displayName: this.data!.displayName,
 			callback: (providerName, code, secret) =>
 				this.#currentUserRepository.enableMfaProvider(providerName, code, secret),
 			close: this.#close,

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

@@ -2,6 +2,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbCurrentUserMfaEnableProviderModalConfig {
 	providerName: string;
+	displayName: string;
 }
 
 export const UMB_CURRENT_USER_MFA_ENABLE_PROVIDER_MODAL = new UmbModalToken<

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

@@ -128,7 +128,7 @@ export class UmbCurrentUserMfaModalElement extends UmbLitElement {
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
 		await modalManager
 			.open(this, UMB_CURRENT_USER_MFA_ENABLE_PROVIDER_MODAL, {
-				data: { providerName: item.providerName },
+				data: { providerName: item.providerName, displayName: item.displayName },
 			})
 			.onSubmit()
 			.catch(() => undefined);
@@ -143,7 +143,7 @@ export class UmbCurrentUserMfaModalElement extends UmbLitElement {
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
 		await modalManager
 			.open(this, UMB_CURRENT_USER_MFA_DISABLE_PROVIDER_MODAL, {
-				data: { providerName: item.providerName },
+				data: { providerName: item.providerName, displayName: item.displayName },
 			})
 			.onSubmit()
 			.catch(() => undefined);

src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts

@@ -28,6 +28,11 @@ export interface UmbMfaProviderConfigurationElementProps {
 	 */
 	providerName: string;
 
+	/**
+	 * The display name of the provider. If this is not set, the provider name will be used.
+	 */
+	displayName: string;
+
 	/**
 	 * 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.