From c198eebfab1cfa8eec8b9d9e4e8d8f7b325c1f9e Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 17 May 2024 09:41:17 +0200
Subject: [PATCH] add badge to show if provider does not exist on the server

---
 .../modals/external-login-modal.element.ts    | 19 ++++++++++++++++++-
 .../current-user-mfa-modal.element.ts         | 18 +++++++++++++++++-
 .../modals/user-mfa/user-mfa-modal.element.ts | 18 +++++++++++++++++-
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/external-login/modals/external-login-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/external-login/modals/external-login-modal.element.ts
index 80ca2a89f5..7fe4bf2c90 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/external-login/modals/external-login-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/external-login/modals/external-login-modal.element.ts
@@ -1,6 +1,6 @@
 import { UmbCurrentUserRepository } from '../../repository/index.js';
 import type { UmbCurrentUserExternalLoginProviderModel } from '../../types.js';
-import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbConfirmModal, type UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -13,6 +13,7 @@ import type { ProblemDetails } from '@umbraco-cms/backoffice/external/backend-ap
 type UmbExternalLoginProviderOption = UmbCurrentUserExternalLoginProviderModel & {
 	displayName: string;
 	icon?: string;
+	existsOnServer: boolean;
 };
 
 @customElement('umb-current-user-external-login-modal')
@@ -51,6 +52,7 @@ export class UmbCurrentUserExternalLoginModalElement extends UmbLitElement {
 						(serverLoginProvider) => serverLoginProvider.providerSchemeName === manifestLoginProvider.forProviderName,
 					);
 					return {
+						existsOnServer: !!serverLoginProvider,
 						hasManualLinkingEnabled: serverLoginProvider?.hasManualLinkingEnabled ?? false,
 						isLinkedOnUser: serverLoginProvider?.isLinkedOnUser ?? false,
 						providerKey: serverLoginProvider?.providerKey ?? '',
@@ -105,6 +107,20 @@ export class UmbCurrentUserExternalLoginModalElement extends UmbLitElement {
 					<uui-icon class="header-icon" name=${item.icon ?? 'icon-cloud'}></uui-icon>
 					${this.localize.string(item.displayName)}
 				</div>
+				${when(
+					item.existsOnServer,
+					() => nothing,
+					() =>
+						html`<div style="position:relative" slot="header-actions">
+							<uui-badge
+								style="cursor:default"
+								title="Warning: This provider is not configured on the server"
+								color="danger"
+								look="primary">
+								!
+							</uui-badge>
+						</div>`,
+				)}
 				${when(
 					item.isLinkedOnUser,
 					() => html`
@@ -127,6 +143,7 @@ export class UmbCurrentUserExternalLoginModalElement extends UmbLitElement {
 						<uui-button
 							type="button"
 							look="secondary"
+							color="success"
 							.label=${this.localize.term('defaultdialogs_linkYour', item.displayName)}
 							@click=${() => this.#onProviderEnable(item)}>
 							<umb-localize key="defaultdialogs_linkYour" .args=${[this.localize.string(item.displayName)]}>
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 ffa32541ae..cf59db4ed0 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
@@ -2,7 +2,7 @@ import { UMB_CURRENT_USER_MFA_ENABLE_PROVIDER_MODAL } from '../current-user-mfa-
 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 { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_MODAL_MANAGER_CONTEXT, type UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -11,6 +11,7 @@ import { mergeObservables } from '@umbraco-cms/backoffice/observable-api';
 
 type UmbMfaLoginProviderOption = UmbCurrentUserMfaProviderModel & {
 	displayName: string;
+	existsOnServer: boolean;
 };
 
 @customElement('umb-current-user-mfa-modal')
@@ -41,6 +42,7 @@ export class UmbCurrentUserMfaModalElement extends UmbLitElement {
 						(serverLoginProvider) => serverLoginProvider.providerName === manifestLoginProvider.forProviderName,
 					);
 					return {
+						existsOnServer: !!serverLoginProvider,
 						isEnabledOnUser: serverLoginProvider?.isEnabledOnUser ?? false,
 						providerName: serverLoginProvider?.providerName ?? manifestLoginProvider.forProviderName,
 						displayName:
@@ -91,6 +93,20 @@ export class UmbCurrentUserMfaModalElement extends UmbLitElement {
 	#renderProvider(item: UmbMfaLoginProviderOption) {
 		return html`
 			<uui-box headline=${item.displayName}>
+				${when(
+					item.existsOnServer,
+					() => nothing,
+					() =>
+						html`<div style="position:relative" slot="header-actions">
+							<uui-badge
+								style="cursor:default"
+								title="Warning: This provider is not configured on the server"
+								color="danger"
+								look="primary">
+								!
+							</uui-badge>
+						</div>`,
+				)}
 				${when(
 					item.isEnabledOnUser,
 					() => html`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-mfa/user-mfa-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-mfa/user-mfa-modal.element.ts
index c10e921421..74805b9d30 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-mfa/user-mfa-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-mfa/user-mfa-modal.element.ts
@@ -1,7 +1,7 @@
 import { UmbUserRepository } from '../../repository/index.js';
 import type { UmbUserMfaProviderModel } from '../../types.js';
 import type { UmbUserMfaModalConfiguration } from './user-mfa-modal.token.js';
-import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbConfirmModal, type UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -10,6 +10,7 @@ import { mergeObservables } from '@umbraco-cms/backoffice/observable-api';
 
 type UmbMfaLoginProviderOption = UmbUserMfaProviderModel & {
 	displayName: string;
+	existsOnServer: boolean;
 };
 
 @customElement('umb-user-mfa-modal')
@@ -41,6 +42,7 @@ export class UmbUserMfaModalElement extends UmbLitElement {
 						(serverLoginProvider) => serverLoginProvider.providerName === manifestLoginProvider.forProviderName,
 					);
 					return {
+						existsOnServer: !!serverLoginProvider,
 						isEnabledOnUser: serverLoginProvider?.isEnabledOnUser ?? false,
 						providerName: serverLoginProvider?.providerName ?? manifestLoginProvider.forProviderName,
 						displayName:
@@ -91,6 +93,20 @@ export class UmbUserMfaModalElement extends UmbLitElement {
 	#renderProvider(item: UmbMfaLoginProviderOption) {
 		return html`
 			<uui-box headline=${item.displayName}>
+				${when(
+					item.existsOnServer,
+					() => nothing,
+					() =>
+						html`<div style="position:relative" slot="header-actions">
+							<uui-badge
+								style="cursor:default"
+								title="Warning: This provider is not configured on the server"
+								color="danger"
+								look="primary">
+								!
+							</uui-badge>
+						</div>`,
+				)}
 				${when(
 					item.isEnabledOnUser,
 					() => html`