From fe40efdf1da993467b25f4eb6c6ef95ebb049587 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:09:12 +0200
Subject: [PATCH] show a modal when more than 1 provider and add a default
 element if nothing is provided

---
 .../auth-provider-default.element.ts          | 50 +++++++++++++++++++
 .../packages/core/auth/components/index.ts    |  1 +
 .../src/packages/core/auth/index.ts           |  3 ++
 .../auth/modals/umb-app-auth-modal.element.ts | 40 +++++++++++++--
 .../auth/modals/umb-app-auth-modal.token.ts   |  7 ++-
 5 files changed, 94 insertions(+), 7 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/auth/components/auth-provider-default.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/auth/components/index.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/auth/components/auth-provider-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/auth/components/auth-provider-default.element.ts
new file mode 100644
index 0000000000..58e04c5797
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/auth/components/auth-provider-default.element.ts
@@ -0,0 +1,50 @@
+import type { ManifestAuthProvider } from '../../index.js';
+import { UmbLitElement } from '../../lit-element/lit-element.element.js';
+import { UmbTextStyles } from '../../style/index.js';
+import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('umb-auth-provider-default')
+export class UmbAuthProviderDefaultElement extends UmbLitElement {
+	@property({ attribute: false })
+	manifest!: ManifestAuthProvider;
+
+	@property({ attribute: false })
+	onSubmit!: (providerName: string) => void;
+
+	render() {
+		return html`
+			<uui-button
+				type="button"
+				@click=${() => this.onSubmit(this.manifest.forProviderName)}
+				id="auth-provider-button"
+				.label=${this.manifest.meta?.label ?? this.manifest.forProviderName}
+				.look=${this.manifest.meta?.defaultView?.look ?? 'outline'}
+				.color=${this.manifest.meta?.defaultView?.color ?? 'default'}>
+				${this.manifest.meta?.defaultView?.icon
+					? html`<umb-icon .icon=${this.manifest.meta?.defaultView?.icon}></umb-icon>`
+					: nothing}
+				${this.manifest.meta?.label ?? this.manifest.forProviderName}
+			</uui-button>
+		`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				padding: 20px;
+			}
+
+			#auth-provider-button {
+				width: 100%;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-auth-provider-default': UmbAuthProviderDefaultElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/auth/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/auth/components/index.ts
new file mode 100644
index 0000000000..e5fdd6f189
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/auth/components/index.ts
@@ -0,0 +1 @@
+export * from './auth-provider-default.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/auth/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/auth/index.ts
index e99e9b0dcf..e05fbbb7ed 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/auth/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/auth/index.ts
@@ -1,4 +1,7 @@
+import './components/index.js';
+
 export * from './auth.context.js';
 export * from './auth.context.token.js';
 export * from './modals/index.js';
 export * from './models/openApiConfiguration.js';
+export * from './components/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts
index 1f8418e3ca..69b3b8b8ef 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts
@@ -1,11 +1,41 @@
-import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbModalBaseElement } from '../../modal/index.js';
+import type { UmbModalAppAuthValue } from './umb-app-auth-modal.token.js';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 @customElement('umb-app-auth-modal')
-export class UmbAppAuthModalElement extends UmbLitElement {
-	render() {
-		return html`<h1>Umb App Auth Modal</h1>`;
+export class UmbAppAuthModalElement extends UmbModalBaseElement<never, UmbModalAppAuthValue> {
+	get props() {
+		return {
+			onSubmit: this.onSubmit,
+		};
 	}
+
+	render() {
+		return html`
+			<umb-body-layout .headline=${this.localize.term('general_login')}>
+				<umb-extension-slot
+					type="authProvider"
+					default-element="umb-auth-provider-default"
+					.props=${this.props}></umb-extension-slot>
+			</umb-body-layout>
+		`;
+	}
+
+	private onSubmit = (providerName: string) => {
+		this.value = { providerName };
+		this._submitModal();
+	};
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				padding: 20px;
+			}
+		`,
+	];
 }
 
 export default UmbAppAuthModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.token.ts
index 4b4e39656b..20ce925dd9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.token.ts
@@ -1,8 +1,11 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export const UMB_MODAL_APP_AUTH = new UmbModalToken('Umb.Modal.AppAuth', {
+export type UmbModalAppAuthValue = {
+	providerName?: string;
+};
+
+export const UMB_MODAL_APP_AUTH = new UmbModalToken<never, UmbModalAppAuthValue>('Umb.Modal.AppAuth', {
 	modal: {
-		size: 'small',
 		type: 'dialog',
 	},
 });