@umbraco-cms/backoffice 17.2.2 → 17.3.0-rc2

package/dist-cms/packages/core/auth/components/index.d.ts

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

package/dist-cms/packages/core/auth/components/index.js

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

package/dist-cms/packages/core/auth/components/umb-auth-view.element.d.ts

@@ -0,0 +1,26 @@
+import type { UmbAuthProviderDefaultProps, UmbUserLoginState } from '../types.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+/**
+ * A reusable auth login view that renders the full login screen (background, logo, greeting, providers).
+ * Can be used standalone as a page or composed inside a modal wrapper.
+ */
+export declare class UmbAuthViewElement extends UmbLitElement {
+    #private;
+    userLoginState: UmbUserLoginState;
+    onSuccess?: () => void;
+    private _error?;
+    private _serverUrl;
+    private _loading;
+    private _allowLocalLogin;
+    get props(): UmbAuthProviderDefaultProps;
+    get headline(): string;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbAuthViewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-auth-view': UmbAuthViewElement;
+    }
+}

package/dist-cms/packages/core/auth/components/umb-auth-view.element.js

@@ -0,0 +1,287 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UMB_AUTH_CONTEXT } from '../auth.context.token.js';
+import { UmbTextStyles } from '../../style/index.js';
+import { css, customElement, html, property, state, when } from '../../../../external/lit/index.js';
+import { UMB_SERVER_CONTEXT } from '../../server/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+/**
+ * A reusable auth login view that renders the full login screen (background, logo, greeting, providers).
+ * Can be used standalone as a page or composed inside a modal wrapper.
+ */
+let UmbAuthViewElement = class UmbAuthViewElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.userLoginState = 'loggedOut';
+        this._serverUrl = '';
+        this._loading = true;
+        this._allowLocalLogin = false;
+        this.#filterProvider = (provider) => {
+            if (this._allowLocalLogin) {
+                return true;
+            }
+            // Do not show any Umbraco auth provider if local login is disabled
+            return provider.forProviderName.toLowerCase() !== 'umbraco';
+        };
+        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.userLoginState === 'timedOut';
+                await authContext.makeAuthorizationRequest(providerName, isTimedOut ? false : true, loginHint, manifest);
+                const isAuthed = authContext.getIsAuthorized();
+                if (isAuthed) {
+                    this.onSuccess?.();
+                }
+            }
+            catch (error) {
+                console.error('[AuthView] Error submitting auth request', error);
+                this._error = error instanceof Error ? error.message : 'Unknown error (see console)';
+            }
+        };
+    }
+    get props() {
+        return {
+            userLoginState: this.userLoginState,
+            onSubmit: this.#onSubmit.bind(this),
+        };
+    }
+    get headline() {
+        return this.userLoginState === 'timedOut'
+            ? this.localize.term('login_instruction')
+            : this.localize.term([
+                'login_greeting0',
+                'login_greeting1',
+                'login_greeting2',
+                'login_greeting3',
+                'login_greeting4',
+                'login_greeting5',
+                'login_greeting6',
+            ][new Date().getDay()]);
+    }
+    firstUpdated() {
+        this.consumeContext(UMB_SERVER_CONTEXT, (context) => {
+            this._serverUrl = context?.getServerUrl() ?? '';
+            this.style.setProperty('--image', `url('${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-background') no-repeat center center/cover`);
+            const serverConnection = context?.getServerConnection();
+            this.observe(serverConnection?.allowLocalLogin, (allowLocalLogin) => {
+                this._allowLocalLogin = allowLocalLogin ?? false;
+            });
+            this.observe(serverConnection?.isConnected, (isConnected) => {
+                this._loading = !isConnected;
+            });
+        });
+    }
+    render() {
+        return html `
+			<div id="layout">
+				<img
+					id="logo-on-background"
+					src="${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-logo-alternative"
+					alt="Logo"
+					aria-hidden="true"
+					part="auth-logo-background" />
+				<div id="graphic" aria-hidden="true">
+					<img
+						part="auth-logo"
+						id="logo-on-image"
+						src="${this._serverUrl}/umbraco/management/api/v1/security/back-office/graphics/login-logo"
+						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.userLoginState === 'timedOut'
+            ? html `<p style="margin-top:0">${this.localize.term('login_timeout')}</p>`
+            : ''}
+						${when(this._loading, () => html `
+								<div id="loader">
+									<uui-loader></uui-loader>
+								</div>
+							`, () => html ` <umb-extension-slot
+									id="providers"
+									type="authProvider"
+									default-element="umb-auth-provider-default"
+									.props=${this.props}
+									.filter=${this.#filterProvider}></umb-extension-slot>`)}
+					</div>
+				</div>
+			</div>
+		`;
+    }
+    #filterProvider;
+    #onSubmit;
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: flex;
+				justify-content: center;
+				width: 100vw;
+
+				background: var(--uui-color-background, #f4f4f4);
+
+				--curves-color: var(--umb-login-curves-color, #f5c1bc);
+				--curves-display: var(--umb-login-curves-display, inline);
+			}
+
+			#layout {
+				display: flex;
+				justify-content: center;
+				padding: 32px 0 32px 32px;
+				width: 100vw;
+				max-width: 1920px;
+				height: 100vh;
+				box-sizing: border-box;
+			}
+
+			#graphic {
+				position: relative;
+				width: 100%;
+				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: -9%;
+				right: -9%;
+			}
+
+			#curve-bottom {
+				bottom: -0.5%;
+				left: -0.1%;
+			}
+
+			#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-large, 4rem);
+				margin: 0 0 var(--uui-size-layout-1);
+				line-height: 1.2;
+			}
+
+			#providers {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-5);
+			}
+
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			@media (max-width: 900px) {
+				#graphic {
+					display: none;
+				}
+				#logo-on-background {
+					display: block;
+				}
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ attribute: false })
+], UmbAuthViewElement.prototype, "userLoginState", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbAuthViewElement.prototype, "onSuccess", void 0);
+__decorate([
+    state()
+], UmbAuthViewElement.prototype, "_error", void 0);
+__decorate([
+    state()
+], UmbAuthViewElement.prototype, "_serverUrl", void 0);
+__decorate([
+    state()
+], UmbAuthViewElement.prototype, "_loading", void 0);
+__decorate([
+    state()
+], UmbAuthViewElement.prototype, "_allowLocalLogin", void 0);
+UmbAuthViewElement = __decorate([
+    customElement('umb-auth-view')
+], UmbAuthViewElement);
+export { UmbAuthViewElement };
+export default UmbAuthViewElement;

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

@@ -1 +1,4 @@
+/**
+ * @deprecated No longer used internally by Umbraco auth. Scheduled for removal in Umbraco 19.
+ */
 export declare const UMB_STORAGE_TOKEN_RESPONSE_NAME = "umb:userAuthTokenResponse";

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

@@ -1 +1,4 @@
+/**
+ * @deprecated No longer used internally by Umbraco auth. Scheduled for removal in Umbraco 19.
+ */
 export const UMB_STORAGE_TOKEN_RESPONSE_NAME = 'umb:userAuthTokenResponse';

package/dist-cms/packages/core/auth/controllers/auth-session-timeout.controller.d.ts

@@ -1,8 +1,7 @@
-import type { UmbAuthFlow } from '../auth-flow.js';
 import type { UmbAuthContext } from '../auth.context.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 export declare class UmbAuthSessionTimeoutController extends UmbControllerBase {
     #private;
-    constructor(host: UmbAuthContext, authFlow: UmbAuthFlow);
+    constructor(host: UmbAuthContext);
     destroy(): void;
 }

package/dist-cms/packages/core/auth/controllers/auth-session-timeout.controller.js

@@ -1,80 +1,91 @@
 import { UMB_MODAL_AUTH_TIMEOUT } from '../modals/umb-auth-timeout-modal.token.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
-import { UserService } from '../../backend-api/index.js';
 export class UmbAuthSessionTimeoutController extends UmbControllerBase {
-    #tokenCheckWorker;
     #host;
-    #keepUserLoggedIn = false;
-    #hasCheckedKeepUserLoggedIn = false;
-    constructor(host, authFlow) {
+    #timeoutId;
+    #scheduledExpiresAt;
+    constructor(host) {
         super(host, 'UmbAuthSessionTimeoutController');
         this.#host = host;
-        this.#tokenCheckWorker = new SharedWorker(new URL('../workers/token-check.worker.js', import.meta.url), {
-            name: 'TokenCheckWorker',
-            type: 'module',
-        });
-        // Ensure the worker is ready to receive messages
-        this.#tokenCheckWorker.port.start();
-        // Listen for messages from the token check worker
-        this.#tokenCheckWorker.port.onmessage = async (event) => {
-            // If the user has chosen to stay logged in, we ignore the logout command and instead request a new token
-            if (this.#keepUserLoggedIn) {
-                console.log('[Auth Context] User chose to stay logged in, attempting to validate token instead of logging out.');
-                await this.#tryValidateToken();
-                return;
+        // When the session changes, reschedule the expiry check.
+        // This fires when: initial login, token refresh (this or another tab), BroadcastChannel update.
+        this.observe(host.session$, (session) => {
+            this.#clearScheduledCheck();
+            if (session) {
+                // Session refreshed — close any open timeout modal and schedule next check.
+                // When keepUserLoggedIn is true, schedule based on the access token expiry
+                // so we proactively refresh before API calls get 401s.
+                // When false, schedule based on the full session expiry for the timeout modal.
+                this.#closeTimeoutModal();
+                const expiresAt = host.keepUserLoggedIn ? session.accessTokenExpiresAt : session.expiresAt;
+                this.#scheduleCheck(expiresAt);
             }
-            if (event.data?.command === 'logout') {
-                // If the worker signals a logout, we clear the token storage and set the user as unauthorized
-                host.timeOut();
-            }
-            else if (event.data?.command === 'refreshToken') {
-                // If the worker signals a token refresh, we let the user decide whether to continue or logout
-                this.#openTimeoutModal(event.data.secondsUntilLogout);
-            }
-        };
-        // Initialize the token check worker with the current token response
-        this.observe(authFlow.token$, (tokenResponse) => {
-            // Inform the token check worker about the new token response
-            console.log('[Auth Context] Informing token check worker about new token response.');
-            // Post the new
-            this.#tokenCheckWorker?.port.postMessage({
-                command: 'init',
-                tokenResponse,
-            });
-        }, '_authFlowAuthorizationSignal');
-        // Listen for the timeout signal to stop the token check worker
+        }, '_sessionState');
+        // When the user times out, clean up
         this.observe(host.timeoutSignal, async () => {
-            // Stop the token check worker when the user has timed out
-            this.#tokenCheckWorker?.port.postMessage({
-                command: 'init',
-            });
-            // Close the modal if it is open
+            this.#clearScheduledCheck();
             await this.#closeTimeoutModal();
-        }, '_authFlowTimeoutSignal');
-        this.observe(host.isAuthorized, (isAuthorized) => {
-            if (isAuthorized) {
-                this.#observeKeepUserLoggedIn();
-            }
-        }, '_authFlowIsAuthorizedSignal');
+        }, '_timeoutSignal');
     }
     destroy() {
         super.destroy();
-        this.#tokenCheckWorker?.port.close();
-        this.#tokenCheckWorker = undefined;
+        this.#clearScheduledCheck();
+    }
+    #clearScheduledCheck() {
+        if (this.#timeoutId !== undefined) {
+            clearTimeout(this.#timeoutId);
+            this.#timeoutId = undefined;
+        }
+    }
+    /**
+     * Schedules a check for when the session enters the warning zone (buffer before expiry).
+     * Uses adaptive buffer: 25% of session lifetime, clamped between 5s and 60s.
+     */
+    #scheduleCheck(expiresAt) {
+        this.#scheduledExpiresAt = expiresAt;
+        const now = Math.floor(Date.now() / 1000);
+        const secondsUntilExpiry = expiresAt - now;
+        if (secondsUntilExpiry <= 0) {
+            // Already expired
+            this.#onSessionExpiring(0, expiresAt);
+            return;
+        }
+        // Adaptive buffer: If less than one minutes, set it to 15s, otherwise 25% of session, clamped to [5s, 60s]
+        const buffer = secondsUntilExpiry <= 60 ? 15 : Math.max(5, Math.min(60, Math.floor(secondsUntilExpiry * 0.25)));
+        const secondsUntilWarning = secondsUntilExpiry - buffer;
+        if (secondsUntilWarning <= 0) {
+            // Already in the buffer zone
+            this.#onSessionExpiring(secondsUntilExpiry, expiresAt);
+        }
+        else {
+            this.#timeoutId = setTimeout(() => this.#onSessionExpiring(buffer, expiresAt), secondsUntilWarning * 1000);
+        }
     }
     /**
-     * Observe the user's preference for staying logged in
-     * and update the internal state accordingly.
-     * This method fetches the current user configuration from the server to find the value.
-     * // TODO: We cannot observe the config store directly here yet, as it would create a circular dependency, so maybe we need to move the config option somewhere else?
+     * Called when the session is expiring or has expired.
+     * Decides whether to auto-refresh, show the timeout modal, or time out.
      */
-    async #observeKeepUserLoggedIn() {
-        if (this.#hasCheckedKeepUserLoggedIn)
+    async #onSessionExpiring(secondsRemaining, originalExpiresAt) {
+        // Guard: if the session was refreshed since we scheduled this check, skip.
+        // We compare expiresAt rather than using isSessionValid() because this fires
+        // during the buffer zone (before full expiry), when the session is still "valid".
+        if (this.#scheduledExpiresAt !== originalExpiresAt)
+            return;
+        if (this.#host.keepUserLoggedIn) {
+            console.log('[Auth] Session expiring, auto-refreshing (keepUserLoggedIn=true)');
+            const success = await this.#tryValidateToken();
+            if (!success) {
+                this.#host.timeOut();
+            }
+            return;
+        }
+        if (secondsRemaining <= 0) {
+            console.log('[Auth] Session fully expired');
+            this.#host.timeOut();
             return;
-        this.#hasCheckedKeepUserLoggedIn = true;
-        // eslint-disable-next-line local-rules/no-direct-api-import
-        const { data } = await UserService.getUserCurrentConfiguration();
-        this.#keepUserLoggedIn = data?.keepUserLoggedIn ?? false;
+        }
+        // Show timeout modal
+        await this.#openTimeoutModal(secondsRemaining);
     }
     async #closeTimeoutModal() {
         const contextToken = (await import('../../modal/index.js')).UMB_MODAL_MANAGER_CONTEXT;
@@ -84,36 +95,39 @@ export class UmbAuthSessionTimeoutController extends UmbControllerBase {
     async #openTimeoutModal(remainingTimeInSeconds) {
         const contextToken = (await import('../../modal/index.js')).UMB_MODAL_MANAGER_CONTEXT;
         const modalManager = await this.getContext(contextToken);
-        modalManager
-            ?.open(this, UMB_MODAL_AUTH_TIMEOUT, {
-            modal: {
-                key: 'auth-timeout',
-            },
-            data: {
-                remainingTimeInSeconds,
-                onLogout: () => {
-                    this.#host.signOut();
+        try {
+            const modal = modalManager?.open(this, UMB_MODAL_AUTH_TIMEOUT, {
+                modal: {
+                    key: 'auth-timeout',
                 },
-                onContinue: () => {
-                    // If the user chooses to stay logged in, we validate the token
-                    this.#tryValidateToken();
+                data: {
+                    remainingTimeInSeconds,
+                    onLogout: () => {
+                        this.#host.signOut();
+                    },
+                    onContinue: () => {
+                        this.#tryValidateToken();
+                    },
+                    onExpired: () => {
+                        this.#host.timeOut();
+                    },
                 },
-            },
-        })
-            .onSubmit()
-            .catch(() => {
-            // If the modal is forced closed or an error occurs, we handle it gracefully
+            });
+            await modal?.onSubmit();
+        }
+        catch {
+            // Modal was force-closed or an error occurred — try to refresh gracefully
             this.#tryValidateToken();
-        });
+        }
     }
     async #tryValidateToken() {
         try {
-            await this.#host.validateToken();
+            return await this.#host.validateToken();
         }
         catch (error) {
-            console.error('[Auth Context] Error validating token:', error);
-            // If the token validation fails, we clear the token storage and set the user as unauthorized
+            console.error('[Auth] Error validating token:', error);
             this.#host.timeOut();
+            return false;
         }
     }
 }

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

@@ -1,17 +1,10 @@
 import { UmbModalBaseElement } from '../../modal/index.js';
-import type { UmbAuthProviderDefaultProps } from '../types.js';
 import type { UmbModalAppAuthConfig, UmbModalAppAuthValue } from './umb-app-auth-modal.token.js';
+import '../components/umb-auth-view.element.js';
 export declare class UmbAppAuthModalElement extends UmbModalBaseElement<UmbModalAppAuthConfig, UmbModalAppAuthValue> {
     #private;
-    private _error?;
-    private _serverUrl;
-    private _loading;
-    private _allowLocalLogin;
-    get props(): UmbAuthProviderDefaultProps;
-    get headline(): string;
-    firstUpdated(): void;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult[];
 }
 export default UmbAppAuthModalElement;
 declare global {