@umbraco-cms/backoffice 14.0.0-rc2 → 14.0.0-rc4

package/dist-cms/packages/core/auth/auth.context.js

@@ -1,63 +1,119 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _UmbAuthContext_isAuthorized, _UmbAuthContext_isInitialized, _UmbAuthContext_isBypassed, _UmbAuthContext_serverUrl, _UmbAuthContext_backofficePath, _UmbAuthContext_authFlow;
 import { UmbAuthFlow } from './auth-flow.js';
-import { UMB_AUTH_CONTEXT } from './auth.context.token.js';
+import { UMB_AUTH_CONTEXT, UMB_STORAGE_TOKEN_RESPONSE_NAME } from './auth.context.token.js';
 import { OpenAPI } from '../../../external/backend-api/index.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
 import { UmbBooleanState } from '../../../libs/observable-api/index.js';
-import { ReplaySubject, filter, switchMap } from '../../../external/rxjs/index.js';
+import { ReplaySubject, Subject, firstValueFrom, switchMap } from '../../../external/rxjs/index.js';
 export class UmbAuthContext extends UmbContextBase {
+    #isAuthorized;
+    // Timeout is different from `isAuthorized` because it can occur repeatedly
+    #isTimeout;
+    #isInitialized;
+    #isBypassed;
+    #serverUrl;
+    #backofficePath;
+    #authFlow;
+    #authWindowProxy;
+    #previousAuthUrl;
+    /**
+     * Observable that acts as a signal for when the authorization state changes.
+     */
+    get authorizationSignal() {
+        return this.#authFlow.authorizationSignal;
+    }
     constructor(host, serverUrl, backofficePath, isBypassed) {
         super(host, UMB_AUTH_CONTEXT);
-        _UmbAuthContext_isAuthorized.set(this, new UmbBooleanState(false));
-        this.isAuthorized = __classPrivateFieldGet(this, _UmbAuthContext_isAuthorized, "f").asObservable();
-        _UmbAuthContext_isInitialized.set(this, new ReplaySubject(1));
-        this.isInitialized = __classPrivateFieldGet(this, _UmbAuthContext_isInitialized, "f").asObservable().pipe(filter((isInitialized) => isInitialized));
-        _UmbAuthContext_isBypassed.set(this, false);
-        _UmbAuthContext_serverUrl.set(this, void 0);
-        _UmbAuthContext_backofficePath.set(this, void 0);
-        _UmbAuthContext_authFlow.set(this, void 0);
-        __classPrivateFieldSet(this, _UmbAuthContext_isBypassed, isBypassed, "f");
-        __classPrivateFieldSet(this, _UmbAuthContext_serverUrl, serverUrl, "f");
-        __classPrivateFieldSet(this, _UmbAuthContext_backofficePath, backofficePath, "f");
-        __classPrivateFieldSet(this, _UmbAuthContext_authFlow, new UmbAuthFlow(serverUrl, this.getRedirectUrl(), this.getPostLogoutRedirectUrl()), "f");
+        this.#isAuthorized = new UmbBooleanState(false);
+        // Timeout is different from `isAuthorized` because it can occur repeatedly
+        this.#isTimeout = new Subject();
+        this.#isInitialized = new ReplaySubject(1);
+        /**
+         * Observable that emits true when the auth context is initialized.
+         * @remark It will only emit once and then complete itself.
+         */
+        this.isInitialized = this.#isInitialized.asObservable();
+        /**
+         * Observable that emits true if the user is authorized, otherwise false.
+         * @remark It will only emit when the authorization state changes.
+         */
+        this.isAuthorized = this.#isAuthorized.asObservable();
+        /**
+         * Observable that acts as a signal and emits when the user has timed out, i.e. the token has expired.
+         * This can be used to show a timeout message to the user.
+         * @remark It can emit multiple times if more than one request is made after the token has expired.
+         */
+        this.timeoutSignal = this.#isTimeout.asObservable();
+        this.#isBypassed = isBypassed;
+        this.#serverUrl = serverUrl;
+        this.#backofficePath = backofficePath;
+        this.#authFlow = new UmbAuthFlow(serverUrl, this.getRedirectUrl(), this.getPostLogoutRedirectUrl(), this.#isTimeout);
+        // Observe the authorization signal and close the auth window
+        this.observe(this.authorizationSignal, () => {
+            // Update the authorization state
+            this.getIsAuthorized();
+        }, '_authFlowAuthorizationSignal');
+        // Observe changes to local storage and update the authorization state
+        // This establishes the tab-to-tab communication
+        window.addEventListener('storage', this.#onStorageEvent.bind(this));
+    }
+    destroy() {
+        super.destroy();
+        window.removeEventListener('storage', this.#onStorageEvent.bind(this));
+    }
+    async #onStorageEvent(evt) {
+        if (evt.key === UMB_STORAGE_TOKEN_RESPONSE_NAME) {
+            // Close any open auth windows
+            this.#authWindowProxy?.close();
+            // Refresh the local storage state into memory
+            await this.setInitialState();
+            // Let any auth listeners (such as the auth modal) know that the auth state has changed
+            this.authorizationSignal.next();
+        }
     }
     /**
      * Initiates the login flow.
      * @param identityProvider The provider to use for login. Default is 'Umbraco'.
+     * @param redirect If true, the user will be redirected to the login page.
      * @param usernameHint The username hint to use for login.
+     * @param manifest The manifest for the registered provider.
      */
-    makeAuthorizationRequest(identityProvider = 'Umbraco', usernameHint) {
-        return __classPrivateFieldGet(this, _UmbAuthContext_authFlow, "f").makeAuthorizationRequest(identityProvider, usernameHint);
+    async makeAuthorizationRequest(identityProvider = 'Umbraco', redirect, usernameHint, manifest) {
+        const redirectUrl = await this.#authFlow.makeAuthorizationRequest(identityProvider, usernameHint);
+        if (redirect) {
+            location.href = redirectUrl;
+            return;
+        }
+        const popupTarget = manifest?.meta?.behavior?.popupTarget ?? 'umbracoAuthPopup';
+        const popupFeatures = manifest?.meta?.behavior?.popupFeatures ??
+            'width=600,height=600,menubar=no,location=no,resizable=yes,scrollbars=yes,status=no,toolbar=no';
+        if (!this.#authWindowProxy || this.#authWindowProxy.closed) {
+            this.#authWindowProxy = window.open(redirectUrl, popupTarget, popupFeatures);
+        }
+        else if (this.#previousAuthUrl !== redirectUrl) {
+            this.#authWindowProxy = window.open(redirectUrl, popupTarget);
+            this.#authWindowProxy?.focus();
+        }
+        this.#previousAuthUrl = redirectUrl;
+        return firstValueFrom(this.authorizationSignal);
     }
     /**
      * Completes the login flow.
      */
     completeAuthorizationRequest() {
-        return __classPrivateFieldGet(this, _UmbAuthContext_authFlow, "f").completeAuthorizationIfPossible();
+        return this.#authFlow.completeAuthorizationIfPossible();
     }
     /**
      * Checks if the user is authorized. If Authorization is bypassed, the user is always authorized.
      * @returns True if the user is authorized, otherwise false.
      */
     getIsAuthorized() {
-        if (__classPrivateFieldGet(this, _UmbAuthContext_isBypassed, "f")) {
-            __classPrivateFieldGet(this, _UmbAuthContext_isAuthorized, "f").setValue(true);
+        if (this.#isBypassed) {
+            this.#isAuthorized.setValue(true);
             return true;
         }
         else {
-            const isAuthorized = __classPrivateFieldGet(this, _UmbAuthContext_authFlow, "f").isAuthorized();
-            __classPrivateFieldGet(this, _UmbAuthContext_isAuthorized, "f").setValue(isAuthorized);
+            const isAuthorized = this.#authFlow.isAuthorized();
+            this.#isAuthorized.setValue(isAuthorized);
             return isAuthorized;
         }
     }
@@ -66,7 +122,7 @@ export class UmbAuthContext extends UmbContextBase {
      * @returns {Promise<void>}
      */
     setInitialState() {
-        return __classPrivateFieldGet(this, _UmbAuthContext_authFlow, "f").setInitialState();
+        return this.#authFlow.setInitialState();
     }
     /**
      * Gets the latest token from the Management API.
@@ -84,14 +140,22 @@ export class UmbAuthContext extends UmbContextBase {
      * @returns The latest token from the Management API
      */
     getLatestToken() {
-        return __classPrivateFieldGet(this, _UmbAuthContext_authFlow, "f").performWithFreshTokens();
+        return this.#authFlow.performWithFreshTokens();
+    }
+    /**
+     * Validates the token against the server and returns true if the token is valid.
+     * @memberof UmbAuthContext
+     * @returns True if the token is valid, otherwise false
+     */
+    async validateToken() {
+        return this.#isBypassed || this.#authFlow.makeRefreshTokenRequest();
     }
     /**
      * Clears the token storage.
      * @memberof UmbAuthContext
      */
     clearTokenStorage() {
-        return __classPrivateFieldGet(this, _UmbAuthContext_authFlow, "f").clearTokenStorage();
+        return this.#authFlow.clearTokenStorage();
     }
     /**
      * Handles the case where the user has timed out, i.e. the token has expired.
@@ -99,15 +163,15 @@ export class UmbAuthContext extends UmbContextBase {
      * @memberof UmbAuthContext
      */
     timeOut() {
-        this.clearTokenStorage();
-        __classPrivateFieldGet(this, _UmbAuthContext_isAuthorized, "f").setValue(false);
+        this.#isAuthorized.setValue(false);
+        this.#isTimeout.next();
     }
     /**
      * Signs the user out by removing any tokens from the browser.
      * @memberof UmbAuthContext
      */
     signOut() {
-        return __classPrivateFieldGet(this, _UmbAuthContext_authFlow, "f").signOut();
+        return this.#authFlow.signOut();
     }
     /**
      * Get the server url to the Management API.
@@ -126,7 +190,7 @@ export class UmbAuthContext extends UmbContextBase {
      * @returns The server url to the Management API
      */
     getServerUrl() {
-        return __classPrivateFieldGet(this, _UmbAuthContext_serverUrl, "f");
+        return this.#serverUrl;
     }
     /**
      * Get the default OpenAPI configuration, which is set up to communicate with the Management API.
@@ -152,17 +216,44 @@ export class UmbAuthContext extends UmbContextBase {
             token: () => this.getLatestToken(),
         };
     }
+    /**
+     * Sets the auth context as initialized, which means that the auth context is ready to be used.
+     * @remark This is used to let the app context know that the core module is ready, which means that the core auth providers are available.
+     */
     setInitialized() {
-        __classPrivateFieldGet(this, _UmbAuthContext_isInitialized, "f").next(true);
+        this.#isInitialized.next();
+        this.#isInitialized.complete();
     }
+    /**
+     * Gets all registered auth providers.
+     */
     getAuthProviders(extensionsRegistry) {
-        return this.isInitialized.pipe(switchMap(() => extensionsRegistry.byType('authProvider')));
+        return this.#isInitialized.pipe(switchMap(() => extensionsRegistry.byType('authProvider')));
     }
+    /**
+     * Gets the authorized redirect url.
+     * @returns The redirect url, which is the backoffice path.
+     */
     getRedirectUrl() {
-        return `${window.location.origin}${__classPrivateFieldGet(this, _UmbAuthContext_backofficePath, "f")}`;
+        return `${window.location.origin}${this.#backofficePath}${this.#backofficePath.endsWith('/') ? '' : '/'}oauth_complete`;
     }
+    /**
+     * Gets the post logout redirect url.
+     * @returns The post logout redirect url, which is the backoffice path with the logout path appended.
+     */
     getPostLogoutRedirectUrl() {
-        return `${window.location.origin}${__classPrivateFieldGet(this, _UmbAuthContext_backofficePath, "f").endsWith('/') ? __classPrivateFieldGet(this, _UmbAuthContext_backofficePath, "f") : __classPrivateFieldGet(this, _UmbAuthContext_backofficePath, "f") + '/'}logout`;
+        return `${window.location.origin}${this.#backofficePath}${this.#backofficePath.endsWith('/') ? '' : '/'}logout`;
+    }
+    /**
+     * @see UmbAuthFlow#linkLogin
+     */
+    linkLogin(provider) {
+        return this.#authFlow.linkLogin(provider);
+    }
+    /**
+     * @see UmbAuthFlow#unlinkLogin
+     */
+    unlinkLogin(providerName, providerKey) {
+        return this.#authFlow.unlinkLogin(providerName, providerKey);
     }
 }
-_UmbAuthContext_isAuthorized = new WeakMap(), _UmbAuthContext_isInitialized = new WeakMap(), _UmbAuthContext_isBypassed = new WeakMap(), _UmbAuthContext_serverUrl = new WeakMap(), _UmbAuthContext_backofficePath = new WeakMap(), _UmbAuthContext_authFlow = new WeakMap();

package/dist-cms/packages/core/auth/components/auth-provider-default.element.d.ts

@@ -1,9 +1,11 @@
 import type { ManifestAuthProvider } from '../../extension-registry/models/index.js';
-import type { UmbAuthProviderDefaultProps } from '../types.js';
+import type { UmbAuthProviderDefaultProps, UmbUserLoginState } from '../types.js';
 import { UmbLitElement } from '../../lit-element/lit-element.element.js';
 export declare class UmbAuthProviderDefaultElement extends UmbLitElement implements UmbAuthProviderDefaultProps {
+    #private;
+    userLoginState?: UmbUserLoginState | undefined;
     manifest: ManifestAuthProvider;
-    onSubmit: (providerName: string, loginHint?: string) => void;
+    onSubmit: (manifestOrProviderName: string | ManifestAuthProvider, loginHint?: string) => void;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

package/dist-cms/packages/core/auth/components/auth-provider-default.element.js

@@ -12,26 +12,30 @@ let UmbAuthProviderDefaultElement = class UmbAuthProviderDefaultElement extends
         super.connectedCallback();
         this.setAttribute('part', 'auth-provider-default');
     }
+    get #label() {
+        const label = this.manifest.meta?.label ?? this.manifest.forProviderName;
+        const labelLocalized = this.localize.string(label);
+        return this.localize.term('login_signInWith', labelLocalized);
+    }
     render() {
         return html `
 			<uui-button
 				type="button"
-				@click=${() => this.onSubmit(this.manifest.forProviderName)}
+				@click=${() => this.onSubmit(this.manifest)}
 				id="auth-provider-button"
-				.label=${this.manifest.meta?.label ?? this.manifest.forProviderName}
+				.label=${this.#label}
 				.look=${this.manifest.meta?.defaultView?.look ?? 'outline'}
 				.color=${this.manifest.meta?.defaultView?.color ?? 'default'}>
 				${this.manifest.meta?.defaultView?.icon
-            ? html `<uui-icon .name=${this.manifest.meta?.defaultView?.icon}></uui-icon>`
+            ? html `<uui-icon id="icon" .name=${this.manifest.meta?.defaultView?.icon}></uui-icon>`
             : nothing}
-				${this.manifest.meta?.label ?? this.manifest.forProviderName}
+				${this.#label}
 			</uui-button>
 		`;
     }
-};
-UmbAuthProviderDefaultElement.styles = [
-    UmbTextStyles,
-    css `
+    static { this.styles = [
+        UmbTextStyles,
+        css `
 			:host {
 				display: block;
 			}
@@ -39,8 +43,16 @@ UmbAuthProviderDefaultElement.styles = [
 			#auth-provider-button {
 				width: 100%;
 			}
+
+			#icon {
+				margin-right: var(--uui-size-space-1);
+			}
 		`,
-];
+    ]; }
+};
+__decorate([
+    property({ attribute: false })
+], UmbAuthProviderDefaultElement.prototype, "userLoginState", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbAuthProviderDefaultElement.prototype, "manifest", void 0);

package/dist-cms/packages/core/auth/modals/umb-app-auth-modal.element.d.ts

@@ -1,10 +1,9 @@
 import { UmbModalBaseElement } from '../../modal/index.js';
+import type { UmbAuthProviderDefaultProps } from '../types.js';
 import type { UmbModalAppAuthConfig, UmbModalAppAuthValue } from './umb-app-auth-modal.token.js';
 export declare class UmbAppAuthModalElement extends UmbModalBaseElement<UmbModalAppAuthConfig, UmbModalAppAuthValue> {
-    get props(): {
-        userLoginState: import("../types.js").UmbUserLoginState;
-        onSubmit: (providerName: string) => void;
-    };
+    private _error?;
+    get props(): UmbAuthProviderDefaultProps;
     get headline(): string;
     render(): import("lit-html").TemplateResult<1>;
     private onSubmit;

package/dist-cms/packages/core/auth/modals/umb-app-auth-modal.element.js

@@ -6,19 +6,39 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbModalBaseElement } from '../../modal/index.js';
 import { UmbTextStyles } from '../../style/text-style.style.js';
-import { css, customElement, html } from '../../../../external/lit/index.js';
+import { UMB_AUTH_CONTEXT } from '../auth.context.token.js';
+import { css, customElement, html, state } from '../../../../external/lit/index.js';
 let UmbAppAuthModalElement = class UmbAppAuthModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
-        this.onSubmit = (providerName) => {
-            this.value = { providerName };
-            this._submitModal();
+        this.onSubmit = async (providerOrManifest, loginHint) => {
+            try {
+                const authContext = await this.getContext(UMB_AUTH_CONTEXT);
+                if (!authContext) {
+                    throw new Error('Auth context not available');
+                }
+                const manifest = typeof providerOrManifest === 'string' ? undefined : providerOrManifest;
+                const providerName = typeof providerOrManifest === 'string' ? providerOrManifest : providerOrManifest.forProviderName;
+                // If the user is timed out, we do not want to lose the state, so avoid redirecting to the provider
+                // and instead just make the authorization request. In all other cases, we want to redirect to the provider.
+                const isTimedOut = this.data?.userLoginState === 'timedOut';
+                await authContext.makeAuthorizationRequest(providerName, isTimedOut ? false : true, loginHint, manifest);
+                const isAuthed = authContext.getIsAuthorized();
+                this.value = { success: isAuthed };
+                if (isAuthed) {
+                    this._submitModal();
+                }
+            }
+            catch (error) {
+                console.error('[AuthModal] Error submitting auth request', error);
+                this._error = error instanceof Error ? error.message : 'Unknown error (see console)';
+            }
         };
     }
     get props() {
         return {
             userLoginState: this.data?.userLoginState ?? 'loggingIn',
-            onSubmit: this.onSubmit,
+            onSubmit: this.onSubmit.bind(this),
         };
     }
     get headline() {
@@ -36,43 +56,145 @@ let UmbAppAuthModalElement = class UmbAppAuthModalElement extends UmbModalBaseEl
     }
     render() {
         return html `
-			<umb-body-layout id="login-layout">
-				<h1 id="greeting" slot="header">${this.headline}</h1>
-				${this.data?.userLoginState === 'timedOut'
+			<div id="layout">
+				<img
+					id="logo-on-background"
+					src="/umbraco/backoffice/assets/umbraco_logo_blue.svg"
+					alt="Logo"
+					aria-hidden="true"
+					part="auth-logo-background" />
+				<div id="graphic" aria-hidden="true">
+					<img part="auth-logo" id="logo-on-image" src="/umbraco/backoffice/assets/umbraco_logo_blue.svg" alt="Logo" />
+					<svg
+						id="curve-top"
+						width="1746"
+						height="1374"
+						viewBox="0 0 1746 1374"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg">
+						<path d="M8 1C61.5 722.5 206.5 1366.5 1745.5 1366.5" stroke="currentColor" stroke-width="15"></path>
+					</svg>
+					<svg
+						id="curve-bottom"
+						width="1364"
+						height="552"
+						viewBox="0 0 1364 552"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg">
+						<path d="M1 8C387 24 1109 11 1357 548" stroke="currentColor" stroke-width="15"></path>
+					</svg>
+				</div>
+				<div id="content-container">
+					<div id="content">
+						<header id="header">
+							<h1 id="greeting">${this.headline}</h1>
+						</header>
+						${this._error ? html `<p style="margin-top:0;color:red">${this._error}</p>` : ''}
+						${this.data?.userLoginState === 'timedOut'
             ? html `<p style="margin-top:0">${this.localize.term('login_timeout')}</p>`
             : ''}
-				<umb-extension-slot
-					id="providers"
-					type="authProvider"
-					default-element="umb-auth-provider-default"
-					.props=${this.props}></umb-extension-slot>
-			</umb-body-layout>
+						<umb-extension-slot
+							id="providers"
+							type="authProvider"
+							default-element="umb-auth-provider-default"
+							.props=${this.props}></umb-extension-slot>
+					</div>
+				</div>
+			</div>
 		`;
     }
-};
-UmbAppAuthModalElement.styles = [
-    UmbTextStyles,
-    css `
+    static { this.styles = [
+        UmbTextStyles,
+        css `
 			:host {
 				display: block;
+				background: rgb(244, 244, 244);
 
-				--umb-body-layout-color-background: #fff;
+				--image: url('/umbraco/backoffice/assets/login.jpg') no-repeat center center/cover;
+				--curves-color: var(--umb-login-curves-color, #f5c1bc);
+				--curves-display: var(--umb-login-curves-display, inline);
 			}
 
-			#login-layout {
-				width: 380px;
-				max-width: 80vw;
-				min-height: 327px;
+			#layout {
+				display: flex;
+				justify-content: center;
+				padding: 32px 0 32px 32px;
+				width: 100vw;
+				max-width: 1920px;
+				height: calc(100vh - 64px);
 			}
 
-			#greeting {
+			#graphic {
+				position: relative;
 				width: 100%;
-				color: var(--umb-login-header-color, var(--uui-color-interactive));
+				height: 100%;
+				background: var(--umb-login-image, var(--image));
+				border-radius: var(--umb-login-image-border-radius, 38px);
+				position: relative;
+				overflow: hidden;
+				color: var(--curves-color);
+			}
+
+			#graphic svg {
+				position: absolute;
+				width: 45%;
+				height: fit-content;
+				display: var(--curves-display);
+			}
+
+			#curve-top {
+				top: 0px;
+				right: 0px;
+			}
+
+			#curve-bottom {
+				bottom: 0px;
+				left: 0px;
+			}
+
+			#content-container {
+				background: var(--umb-login-content-background, none);
+				display: var(--umb-login-content-display, flex);
+				width: var(--umb-login-content-width, 100%);
+				height: var(--umb-login-content-height, 100%);
+				overflow: auto;
+				border-radius: var(--umb-login-content-border-radius, 0);
+				padding: 16px;
+				margin: auto;
+			}
+
+			#content {
+				max-width: 360px;
+				margin: auto;
+				width: 100%;
+			}
+
+			#logo-on-background {
+				display: none;
+			}
+
+			#logo-on-image,
+			#logo-on-background {
+				position: absolute;
+				top: 24px;
+				left: 24px;
+				height: 55px;
+			}
+
+			#header {
+				text-align: center;
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-5);
+			}
+
+			#greeting {
+				color: var(--umb-login-greeting-color, var(--uui-color-interactive-emphasis));
 				text-align: center;
 				font-weight: 400;
-				font-size: var(--umb-login-header-font-size, 2rem);
+				font-size: var(--umb-login-header-font-size-large, 4rem);
+				margin: 0 0 var(--uui-size-layout-1);
 				line-height: 1.2;
-				margin: 0;
 			}
 
 			#providers {
@@ -80,8 +202,21 @@ UmbAppAuthModalElement.styles = [
 				flex-direction: column;
 				gap: var(--uui-size-space-5);
 			}
+
+			@media (max-width: 900px) {
+				#graphic {
+					display: none;
+				}
+				#logo-on-background {
+					display: block;
+				}
+			}
 		`,
-];
+    ]; }
+};
+__decorate([
+    state()
+], UmbAppAuthModalElement.prototype, "_error", void 0);
 UmbAppAuthModalElement = __decorate([
     customElement('umb-app-auth-modal')
 ], UmbAppAuthModalElement);

package/dist-cms/packages/core/auth/modals/umb-app-auth-modal.token.d.ts

@@ -5,14 +5,9 @@ export type UmbModalAppAuthConfig = {
 };
 export type UmbModalAppAuthValue = {
     /**
-     * The name of the provider that the user has selected to authenticate with.
+     * An indicator of whether the authentication was successful.
      * @required
      */
-    providerName?: string;
-    /**
-     * The login hint that the user has provided to the provider.
-     * @optional
-     */
-    loginHint?: string;
+    success?: boolean;
 };
 export declare const UMB_MODAL_APP_AUTH: UmbModalToken<UmbModalAppAuthConfig, UmbModalAppAuthValue>;

package/dist-cms/packages/core/auth/providers/manifests.js

@@ -6,7 +6,7 @@ export const manifests = [
         forProviderName: 'Umbraco',
         weight: 1000,
         meta: {
-            label: 'Sign in with Umbraco',
+            label: 'Umbraco',
             defaultView: {
                 icon: 'icon-umbraco',
                 look: 'primary',

package/dist-cms/packages/core/auth/types.d.ts

@@ -17,6 +17,12 @@ export interface UmbAuthProviderDefaultProps {
      * Callback that is called when the user selects a provider.
      * @param providerName The name of the provider that the user selected.
      * @param loginHint The login hint to use for login if available.
+     * @deprecated Use the manifest parameter instead.
      */
-    onSubmit: (providerName: string, loginHint?: string) => void;
+    onSubmit(providerName: string, loginHint?: string): void;
+    /**
+     * Callback that is called when the user selects a provider.
+     * @param manifest The manifest of the provider that the user selected.
+     */
+    onSubmit(manifest: ManifestAuthProvider, loginHint?: string): void;
 }