@umbraco-cms/backoffice 14.0.0-rc1 → 14.0.0-rc3

package/dist-cms/apps/app/app-auth.controller.js

@@ -1,35 +1,16 @@
-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 _UmbAppAuthController_instances, _UmbAppAuthController_authContext, _UmbAppAuthController_firstTimeLoggingIn, _UmbAppAuthController_showLoginModal, _UmbAppAuthController_updateState;
-import { UMB_AUTH_CONTEXT, UMB_MODAL_APP_AUTH, UMB_STORAGE_REDIRECT_URL, } from '../../packages/core/auth/index.js';
+import { UMB_AUTH_CONTEXT, UMB_MODAL_APP_AUTH } from '../../packages/core/auth/index.js';
 import { UmbControllerBase } from '../../libs/class-api/index.js';
-import { filter, firstValueFrom, skip } from '../../external/rxjs/index.js';
+import { firstValueFrom } from '../../external/rxjs/index.js';
 import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT } from '../../packages/core/modal/index.js';
 export class UmbAppAuthController extends UmbControllerBase {
+    #authContext;
     constructor(host) {
         super(host);
-        _UmbAppAuthController_instances.add(this);
-        _UmbAppAuthController_authContext.set(this, void 0);
-        _UmbAppAuthController_firstTimeLoggingIn.set(this, true);
         this.consumeContext(UMB_AUTH_CONTEXT, (context) => {
-            __classPrivateFieldSet(this, _UmbAppAuthController_authContext, context, "f");
+            this.#authContext = context;
             // Observe the user's authorization state and start the authorization flow if the user is not authorized
-            this.observe(context.isAuthorized.pipe(
-            // Skip the first since it is always false
-            skip(1), 
-            // Only continue if the value is false
-            filter((x) => !x)), () => {
-                __classPrivateFieldSet(this, _UmbAppAuthController_firstTimeLoggingIn, false, "f");
+            this.observe(context.timeoutSignal, () => {
                 this.makeAuthorizationRequest('timedOut');
             }, '_authState');
         });
@@ -39,10 +20,10 @@ export class UmbAppAuthController extends UmbControllerBase {
      * If not, the authorization flow is started.
      */
     async isAuthorized() {
-        if (!__classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f")) {
+        if (!this.#authContext) {
             throw new Error('[Fatal] Auth context is not available');
         }
-        const isAuthorized = __classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f").getIsAuthorized();
+        const isAuthorized = this.#authContext.getIsAuthorized();
         if (isAuthorized) {
             return true;
         }
@@ -54,86 +35,65 @@ export class UmbAppAuthController extends UmbControllerBase {
      * It will check which providers are available and either redirect directly to the provider or show a provider selection screen.
      */
     async makeAuthorizationRequest(userLoginState = 'loggingIn') {
-        if (!__classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f")) {
+        if (!this.#authContext) {
             throw new Error('[Fatal] Auth context is not available');
         }
-        // Save location.href so we can redirect to it after login
-        if (location.href !== __classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f").getPostLogoutRedirectUrl()) {
-            window.sessionStorage.setItem(UMB_STORAGE_REDIRECT_URL, location.href);
-        }
         // Figure out which providers are available
-        const availableProviders = await firstValueFrom(__classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f").getAuthProviders(umbExtensionsRegistry));
+        const availableProviders = await firstValueFrom(this.#authContext.getAuthProviders(umbExtensionsRegistry));
         if (availableProviders.length === 0) {
             throw new Error('[Fatal] No auth providers available');
         }
-        // If the user is timed out, we can show the login modal directly
-        if (userLoginState === 'timedOut') {
-            const selected = await __classPrivateFieldGet(this, _UmbAppAuthController_instances, "m", _UmbAppAuthController_showLoginModal).call(this, userLoginState, availableProviders);
-            if (!selected) {
-                return false;
-            }
-            return __classPrivateFieldGet(this, _UmbAppAuthController_instances, "m", _UmbAppAuthController_updateState).call(this);
-        }
-        if (availableProviders.length === 1) {
+        // If we are logging in, we need to check if we can redirect directly to the provider
+        if (userLoginState === 'loggingIn') {
             // One provider available (most likely the Umbraco provider), so initiate the authorization request to the default provider
-            __classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f").makeAuthorizationRequest(availableProviders[0].forProviderName);
-            return __classPrivateFieldGet(this, _UmbAppAuthController_instances, "m", _UmbAppAuthController_updateState).call(this);
-        }
-        // Check if any provider is redirecting directly to the provider
-        const redirectProvider = userLoginState === 'loggingIn'
-            ? availableProviders.find((provider) => provider.meta?.behavior?.autoRedirect)
-            : undefined;
-        if (redirectProvider) {
+            if (availableProviders.length === 1) {
+                await this.#authContext.makeAuthorizationRequest(availableProviders[0].forProviderName, true);
+                return this.#updateState();
+            }
+            // Check if any provider is redirecting directly to the provider
+            const redirectProvider = availableProviders.find((provider) => provider.meta?.behavior?.autoRedirect);
             // Redirect directly to the provider
-            __classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f").makeAuthorizationRequest(redirectProvider.forProviderName);
-            return __classPrivateFieldGet(this, _UmbAppAuthController_instances, "m", _UmbAppAuthController_updateState).call(this);
+            if (redirectProvider) {
+                await this.#authContext.makeAuthorizationRequest(redirectProvider.forProviderName, true);
+                return this.#updateState();
+            }
         }
-        // Show the provider selection screen
-        const selected = await __classPrivateFieldGet(this, _UmbAppAuthController_instances, "m", _UmbAppAuthController_showLoginModal).call(this, userLoginState, availableProviders);
+        // Otherwise we can show the provider selection screen directly, because the user is either logged out, timed out, or has more than one provider available
+        const selected = await this.#showLoginModal(userLoginState);
         if (!selected) {
             return false;
         }
-        return __classPrivateFieldGet(this, _UmbAppAuthController_instances, "m", _UmbAppAuthController_updateState).call(this);
-    }
-}
-_UmbAppAuthController_authContext = new WeakMap(), _UmbAppAuthController_firstTimeLoggingIn = new WeakMap(), _UmbAppAuthController_instances = new WeakSet(), _UmbAppAuthController_showLoginModal = async function _UmbAppAuthController_showLoginModal(userLoginState, availableProviders) {
-    if (!__classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f")) {
-        throw new Error('[Fatal] Auth context is not available');
+        return this.#updateState();
     }
-    // Check if any provider denies local login
-    const denyLocalLogin = availableProviders.some((provider) => provider.meta?.behavior?.denyLocalLogin);
-    if (denyLocalLogin) {
-        // Unregister the Umbraco provider
-        umbExtensionsRegistry.unregister('Umb.AuthProviders.Umbraco');
-    }
-    // Show the provider selection screen
-    const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-    modalManager.remove('umbAuthModal');
-    const selected = await modalManager
-        .open(this._host, UMB_MODAL_APP_AUTH, {
-        data: {
-            userLoginState,
-        },
-        modal: {
-            key: 'umbAuthModal',
-            backdropBackground: __classPrivateFieldGet(this, _UmbAppAuthController_firstTimeLoggingIn, "f")
-                ? 'var(--umb-auth-backdrop, url("/umbraco/backoffice/assets/umbraco_logo_white.svg") 20px 20px / 200px no-repeat, radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(40,58,151,.9) 50%, rgba(0,212,255,1) 100%))'
-                : 'var(--umb-auth-backdrop-timedout, rgba(0,0,0,0.75))',
-        },
-    })
-        .onSubmit()
-        .catch(() => undefined);
-    if (!selected?.providerName) {
-        return false;
+    async #showLoginModal(userLoginState) {
+        if (!this.#authContext) {
+            throw new Error('[Fatal] Auth context is not available');
+        }
+        // Show the provider selection screen
+        const authModalKey = 'umbAuthModal';
+        const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+        const selected = await modalManager
+            .open(this._host, UMB_MODAL_APP_AUTH, {
+            data: {
+                userLoginState,
+            },
+            modal: {
+                key: authModalKey,
+                backdropBackground: 'var(--umb-auth-backdrop, rgb(244, 244, 244))',
+            },
+        })
+            .onSubmit()
+            .catch(() => undefined);
+        if (!selected?.success) {
+            return false;
+        }
+        return true;
     }
-    __classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f").makeAuthorizationRequest(selected.providerName, selected.loginHint);
-    return true;
-}, _UmbAppAuthController_updateState = function _UmbAppAuthController_updateState() {
-    if (!__classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f")) {
-        throw new Error('[Fatal] Auth context is not available');
+    #updateState() {
+        if (!this.#authContext) {
+            throw new Error('[Fatal] Auth context is not available');
+        }
+        // The authorization flow is finished, so let the caller know if the user is authorized
+        return this.#authContext.getIsAuthorized();
     }
-    // Reinitialize the auth flow (load the state from local storage)
-    __classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f").setInitialState();
-    // The authorization flow is finished, so let the caller know if the user is authorized
-    return __classPrivateFieldGet(this, _UmbAppAuthController_authContext, "f").getIsAuthorized();
-};
+}

package/dist-cms/apps/app/app-error.element.d.ts

@@ -3,25 +3,34 @@ import { UmbLitElement } from '../../packages/core/lit-element/index.js';
  * A full page error element that can be used either solo or for instance as the error 500 page and BootFailed
  */
 export declare class UmbAppErrorElement extends UmbLitElement {
+    #private;
+    /**
+     * The headline to display
+     *
+     * @attr
+     */
+    errorHeadline?: string | null;
     /**
      * The error message to display
      *
      * @attr
      */
-    errorMessage?: string;
+    errorMessage?: string | null;
     /**
      * The error to display
      *
      * @attr
      */
     error?: unknown;
-    private renderProblemDetails;
-    private renderErrorObj;
-    private isProblemDetails;
-    private isError;
-    private renderError;
+    /**
+     * Hide the back button
+     *
+     * @attr
+     */
+    hideBackButton: boolean;
+    constructor();
     render: () => import("lit-html").TemplateResult<1>;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbAppErrorElement;
 declare global {

package/dist-cms/apps/app/app-error.element.js

@@ -6,114 +6,235 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, nothing, customElement, property } from '../../external/lit/index.js';
 import { UmbLitElement } from '../../packages/core/lit-element/index.js';
+import { UmbTextStyles } from '../../packages/core/style/index.js';
 /**
  * A full page error element that can be used either solo or for instance as the error 500 page and BootFailed
  */
 let UmbAppErrorElement = class UmbAppErrorElement extends UmbLitElement {
     constructor() {
-        super(...arguments);
-        this.renderProblemDetails = (problemDetails) => html `
-		<h2>${problemDetails.title}</h2>
+        super();
+        /**
+         * Hide the back button
+         *
+         * @attr
+         */
+        this.hideBackButton = false;
+        this.#renderProblemDetails = (problemDetails) => html `
+		<p><strong>${problemDetails.title}</strong></p>
 		<p>${problemDetails.detail}</p>
 		<pre>${problemDetails.stack}</pre>
 	`;
-        this.renderErrorObj = (error) => html `
-		<h2>${error.name}</h2>
+        this.#renderErrorObj = (error) => html `
+		<p><strong>${error.name}</strong></p>
 		<p>${error.message}</p>
 		<pre>${error.stack}</pre>
 	`;
         this.render = () => html `
 		<div id="background"></div>
 
-		<div id="logo">
-			<img src="/umbraco/backoffice/assets/umbraco_logomark_white.svg'" alt="Umbraco" />
+		<div id="logo" aria-hidden="true">
+			<img src="/umbraco/backoffice/assets/umbraco_logomark_white.svg" alt="Umbraco" />
 		</div>
 
-		<div id="container">
-			<uui-box id="box">
-				<h1>Something went wrong</h1>
-				<p>${this.errorMessage}</p>
+		<div id="container" class="uui-text">
+			<uui-box id="box" headline-variant="h1">
+				${this.hideBackButton
+            ? nothing
+            : html `
+							<uui-button
+								slot="header-actions"
+								label=${this.localize.term('general_back')}
+								look="secondary"
+								@click=${() => (location.href = '')}></uui-button>
+						`}
+				<div slot="headline">
+					${this.errorHeadline
+            ? this.errorHeadline
+            : html ` <umb-localize key="errors_defaultError">An unknown failure has occured</umb-localize> `}
+				</div>
+				<div id="message">${this.errorMessage}</div>
 				${this.error
             ? html `
 							<details>
-								<summary>Details</summary>
-								${this.renderError(this.error)}
+								<summary><umb-localize key="general_details">Details</umb-localize></summary>
+								${this.#renderError(this.error)}
 							</details>
-					  `
+						`
             : nothing}
 			</uui-box>
 		</div>
 	`;
+        this.#generateErrorFromSearchParams();
     }
-    isProblemDetails(error) {
+    /**
+     * Generates an error from the search params before the properties are set
+     */
+    #generateErrorFromSearchParams() {
+        const searchParams = new URLSearchParams(window.location.search);
+        const flow = searchParams.get('flow');
+        if (flow === 'external-login-callback') {
+            this.errorHeadline = this.localize.term('errors_externalLoginError');
+            console.log('External login error', searchParams.get('error'));
+            const status = searchParams.get('status');
+            // "Status" is controlled by Umbraco and is a string
+            if (status) {
+                switch (status) {
+                    case 'unauthorized':
+                        this.errorMessage = this.localize.term('errors_unauthorized');
+                        break;
+                    case 'user-not-found':
+                        this.errorMessage = this.localize.term('errors_userNotFound');
+                        break;
+                    case 'external-info-not-found':
+                        this.errorMessage = this.localize.term('errors_externalInfoNotFound');
+                        break;
+                    case 'failed':
+                        this.errorMessage = this.localize.term('errors_externalLoginFailed');
+                        break;
+                    default:
+                        this.errorMessage = this.localize.term('errors_defaultError');
+                        break;
+                }
+            }
+            return;
+        }
+        if (flow === 'external-login') {
+            /**
+             * "Error" is controlled by OpenID and is a string
+             * @see https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.2.1
+             */
+            const error = searchParams.get('error');
+            this.errorHeadline = this.localize.term('errors_externalLoginError');
+            switch (error) {
+                case 'access_denied':
+                    this.errorMessage = this.localize.term('openidErrors_accessDenied');
+                    break;
+                case 'invalid_request':
+                    this.errorMessage = this.localize.term('openidErrors_invalidRequest');
+                    break;
+                case 'invalid_client':
+                    this.errorMessage = this.localize.term('openidErrors_invalidClient');
+                    break;
+                case 'invalid_grant':
+                    this.errorMessage = this.localize.term('openidErrors_invalidGrant');
+                    break;
+                case 'unauthorized_client':
+                    this.errorMessage = this.localize.term('openidErrors_unauthorizedClient');
+                    break;
+                case 'unsupported_grant_type':
+                    this.errorMessage = this.localize.term('openidErrors_unsupportedGrantType');
+                    break;
+                case 'invalid_scope':
+                    this.errorMessage = this.localize.term('openidErrors_invalidScope');
+                    break;
+                case 'server_error':
+                    this.errorMessage = this.localize.term('openidErrors_serverError');
+                    break;
+                case 'temporarily_unavailable':
+                    this.errorMessage = this.localize.term('openidErrors_temporarilyUnavailable');
+                    break;
+                default:
+                    this.errorMessage = this.localize.term('errors_defaultError');
+                    break;
+            }
+            // Set the error object with the original error parameters from the search params
+            let detail = searchParams.get('error_description');
+            const errorUri = searchParams.get('error_uri');
+            if (errorUri) {
+                detail = `${detail} (${errorUri})`;
+            }
+            this.error = { title: `External error code: ${error}`, detail };
+            return;
+        }
+    }
+    #renderProblemDetails;
+    #renderErrorObj;
+    #isProblemDetails(error) {
         return typeof error === 'object' && error !== null && 'detail' in error && 'title' in error;
     }
-    isError(error) {
+    #isError(error) {
         return typeof error === 'object' && error !== null && error instanceof Error;
     }
-    renderError(error) {
-        if (this.isProblemDetails(error)) {
-            return this.renderProblemDetails(error);
+    #renderError(error) {
+        if (this.#isProblemDetails(error)) {
+            return this.#renderProblemDetails(error);
         }
-        else if (this.isError(error)) {
-            return this.renderErrorObj(error);
+        else if (this.#isError(error)) {
+            return this.#renderErrorObj(error);
         }
         return nothing;
     }
-};
-UmbAppErrorElement.styles = css `
-		#background {
-			position: fixed;
-			overflow: hidden;
-			background-position: 50%;
-			background-repeat: no-repeat;
-			background-size: cover;
-			background-image: url('/umbraco/backoffice/assets/umbraco_background.jpg');
-			width: 100vw;
-			height: 100vh;
-		}
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			#background {
+				position: fixed;
+				overflow: hidden;
+				background-position: 50%;
+				background-repeat: no-repeat;
+				background-size: cover;
+				background-image: url('/umbraco/backoffice/assets/installer-illustration.svg');
+				width: 100vw;
+				height: 100vh;
+			}
 
-		#logo {
-			position: fixed;
-			top: var(--uui-size-space-5);
-			left: var(--uui-size-space-5);
-			height: 30px;
-		}
+			#logo {
+				position: fixed;
+				top: var(--uui-size-space-5);
+				left: var(--uui-size-space-5);
+				height: 30px;
+			}
 
-		#logo img {
-			height: 100%;
-		}
+			#logo img {
+				height: 100%;
+			}
 
-		#container {
-			position: relative;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100vw;
-			height: 100vh;
-		}
+			#container {
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100vw;
+				height: 100vh;
+			}
 
-		#box {
-			width: 50vw;
-			padding: var(--uui-size-space-6) var(--uui-size-space-5) var(--uui-size-space-5) var(--uui-size-space-5);
-		}
+			#box {
+				width: 400px;
+				max-width: 80vw;
+			}
 
-		details {
-			padding: var(--uui-size-space-2) var(--uui-size-space-3);
-			background: var(--uui-color-surface-alt);
-		}
+			#message {
+				margin-bottom: var(--uui-size-space-3);
+			}
 
-		pre {
-			width: 100%;
-			overflow: auto;
-		}
-	`;
+			details {
+				padding: var(--uui-size-space-2) var(--uui-size-space-3);
+				background: var(--uui-color-surface-alt);
+			}
+
+			details summary {
+				cursor: pointer;
+			}
+
+			pre {
+				width: 100%;
+				overflow: auto;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property()
+], UmbAppErrorElement.prototype, "errorHeadline", void 0);
 __decorate([
     property()
 ], UmbAppErrorElement.prototype, "errorMessage", void 0);
 __decorate([
     property()
 ], UmbAppErrorElement.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-back-button' })
+], UmbAppErrorElement.prototype, "hideBackButton", void 0);
 UmbAppErrorElement = __decorate([
     customElement('umb-app-error')
 ], UmbAppErrorElement);

package/dist-cms/apps/app/app.context.js

@@ -1,31 +1,18 @@
-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 _UmbAppContext_serverUrl, _UmbAppContext_backofficePath;
 import { UmbContextBase } from '../../libs/class-api/index.js';
 import { UmbContextToken } from '../../libs/context-api/index.js';
 export class UmbAppContext extends UmbContextBase {
+    #serverUrl;
+    #backofficePath;
     constructor(host, config) {
         super(host, UMB_APP_CONTEXT);
-        _UmbAppContext_serverUrl.set(this, void 0);
-        _UmbAppContext_backofficePath.set(this, void 0);
-        __classPrivateFieldSet(this, _UmbAppContext_serverUrl, config.serverUrl, "f");
-        __classPrivateFieldSet(this, _UmbAppContext_backofficePath, config.backofficePath, "f");
+        this.#serverUrl = config.serverUrl;
+        this.#backofficePath = config.backofficePath;
     }
     getBackofficePath() {
-        return __classPrivateFieldGet(this, _UmbAppContext_backofficePath, "f");
+        return this.#backofficePath;
     }
     getServerUrl() {
-        return __classPrivateFieldGet(this, _UmbAppContext_serverUrl, "f");
+        return this.#serverUrl;
     }
 }
-_UmbAppContext_serverUrl = new WeakMap(), _UmbAppContext_backofficePath = new WeakMap();
 export const UMB_APP_CONTEXT = new UmbContextToken('UmbAppContext');