show a modal when more than 1 provider and add a default element if nothing is provided

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;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/auth/components/index.ts

@@ -0,0 +1 @@
+export * from './auth-provider-default.element.js';

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';

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;

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',
 	},
 });