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

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

@@ -3,25 +3,28 @@ 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;
+    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

@@ -4,110 +4,223 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
+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 _UmbAppErrorElement_instances, _UmbAppErrorElement_generateErrorFromSearchParams, _UmbAppErrorElement_renderProblemDetails, _UmbAppErrorElement_renderErrorObj, _UmbAppErrorElement_isProblemDetails, _UmbAppErrorElement_isError, _UmbAppErrorElement_renderError;
 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();
+        _UmbAppErrorElement_instances.add(this);
+        _UmbAppErrorElement_renderProblemDetails.set(this, (problemDetails) => html `
+		<p><strong>${problemDetails.title}</strong></p>
 		<p>${problemDetails.detail}</p>
 		<pre>${problemDetails.stack}</pre>
-	`;
-        this.renderErrorObj = (error) => html `
-		<h2>${error.name}</h2>
+	`);
+        _UmbAppErrorElement_renderErrorObj.set(this, (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">
+				<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>
+								${__classPrivateFieldGet(this, _UmbAppErrorElement_instances, "m", _UmbAppErrorElement_renderError).call(this, this.error)}
 							</details>
-					  `
+						`
             : nothing}
 			</uui-box>
 		</div>
 	`;
+        __classPrivateFieldGet(this, _UmbAppErrorElement_instances, "m", _UmbAppErrorElement_generateErrorFromSearchParams).call(this);
     }
-    isProblemDetails(error) {
-        return typeof error === 'object' && error !== null && 'detail' in error && 'title' in error;
-    }
-    isError(error) {
-        return typeof error === 'object' && error !== null && error instanceof Error;
+};
+_UmbAppErrorElement_renderProblemDetails = new WeakMap();
+_UmbAppErrorElement_renderErrorObj = new WeakMap();
+_UmbAppErrorElement_instances = new WeakSet();
+_UmbAppErrorElement_generateErrorFromSearchParams = function _UmbAppErrorElement_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;
     }
-    renderError(error) {
-        if (this.isProblemDetails(error)) {
-            return this.renderProblemDetails(error);
+    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;
         }
-        else if (this.isError(error)) {
-            return this.renderErrorObj(error);
+        // 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})`;
         }
-        return nothing;
+        this.error = { title: `External error code: ${error}`, detail };
+        return;
+    }
+};
+_UmbAppErrorElement_isProblemDetails = function _UmbAppErrorElement_isProblemDetails(error) {
+    return typeof error === 'object' && error !== null && 'detail' in error && 'title' in error;
+};
+_UmbAppErrorElement_isError = function _UmbAppErrorElement_isError(error) {
+    return typeof error === 'object' && error !== null && error instanceof Error;
+};
+_UmbAppErrorElement_renderError = function _UmbAppErrorElement_renderError(error) {
+    if (__classPrivateFieldGet(this, _UmbAppErrorElement_instances, "m", _UmbAppErrorElement_isProblemDetails).call(this, error)) {
+        return __classPrivateFieldGet(this, _UmbAppErrorElement_renderProblemDetails, "f").call(this, error);
     }
+    else if (__classPrivateFieldGet(this, _UmbAppErrorElement_instances, "m", _UmbAppErrorElement_isError).call(this, error)) {
+        return __classPrivateFieldGet(this, _UmbAppErrorElement_renderErrorObj, "f").call(this, 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;
-		}
+UmbAppErrorElement.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);

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

@@ -23,13 +23,12 @@ import { UmbAppAuthController } from './app-auth.controller.js';
 import { UmbAuthContext } from '../../packages/core/auth/index.js';
 import { css, html, customElement, property } from '../../external/lit/index.js';
 import { UUIIconRegistryEssential } from '../../external/uui/index.js';
-import { UmbIconRegistry } from '../../packages/core/icon-registry/index.js';
 import { UmbLitElement } from '../../packages/core/lit-element/index.js';
 import { pathWithoutBasePath } from '../../packages/core/router/index.js';
 import { OpenAPI, RuntimeLevelModel } from '../../external/backend-api/index.js';
 import { UmbContextDebugController } from '../../packages/core/debug/index.js';
-import { UmbServerExtensionRegistrator } from '../../libs/extension-api/index.js';
-import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
+import { UmbBundleExtensionInitializer, UmbServerExtensionRegistrator } from '../../libs/extension-api/index.js';
+import { UmbAppEntryPointExtensionInitializer, umbExtensionsRegistry, } from '../../packages/core/extension-registry/index.js';
 let UmbAppElement = class UmbAppElement extends UmbLitElement {
     /**
      * The base URL of the configured Umbraco server.
@@ -57,6 +56,10 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
          */
         this.bypassAuth = false;
         this._routes = [
+            {
+                path: 'error',
+                component: () => import('./app-error.element.js'),
+            },
             {
                 path: 'install',
                 component: () => import('../installer/installer.element.js'),
@@ -83,7 +86,8 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
         _UmbAppElement_serverConnection.set(this, void 0);
         _UmbAppElement_authController.set(this, new UmbAppAuthController(this));
         OpenAPI.BASE = window.location.origin;
-        new UmbIconRegistry().attach(this);
+        new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
+        new UmbAppEntryPointExtensionInitializer(this, umbExtensionsRegistry);
         new UUIIconRegistryEssential().attach(this);
         new UmbContextDebugController(this);
     }
@@ -105,7 +109,7 @@ _UmbAppElement_setup = async function _UmbAppElement_setup() {
     new UmbAppContext(this, { backofficePath: this.backofficePath, serverUrl: this.serverUrl });
     // Register Core extensions (this is specifically done here because we need these extensions to be registered before the application is initialized)
     onInit(this, umbExtensionsRegistry);
-    // Register public extensions
+    // Register public extensions (login extensions)
     await new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPublicExtensions();
     // Try to initialise the auth flow and get the runtime status
     try {

package/dist-cms/apps/backoffice/backoffice.element.js

@@ -6,11 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbBackofficeContext } from './backoffice.context.js';
 import { css, html, customElement } from '../../external/lit/index.js';
-import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
-import { UmbBundleExtensionInitializer, UmbEntryPointExtensionInitializer, UmbServerExtensionRegistrator, } from '../../libs/extension-api/index.js';
+import { UmbBackofficeEntryPointExtensionInitializer, UmbEntryPointExtensionInitializer, umbExtensionsRegistry, } from '../../packages/core/extension-registry/index.js';
+import { UmbServerExtensionRegistrator } from '../../libs/extension-api/index.js';
 import { UmbLitElement } from '../../packages/core/lit-element/index.js';
 import './components/index.js';
-// TODO: temp solution to load core packages
 const CORE_PACKAGES = [
     import('../../packages/audit-log/umbraco-package.js'),
     import('../../packages/block/umbraco-package.js'),
@@ -25,8 +24,8 @@ const CORE_PACKAGES = [
     import('../../packages/media/umbraco-package.js'),
     import('../../packages/members/umbraco-package.js'),
     import('../../packages/models-builder/umbraco-package.js'),
-    //import('../../packages/object-type/umbraco-package.js'),// This had nothing to register.
     import('../../packages/packages/umbraco-package.js'),
+    import('../../packages/property-editors/umbraco-package.js'),
     import('../../packages/relations/umbraco-package.js'),
     import('../../packages/search/umbraco-package.js'),
     import('../../packages/settings/umbraco-package.js'),
@@ -47,14 +46,14 @@ let UmbBackofficeElement = class UmbBackofficeElement extends UmbLitElement {
          */
         this.extensionRegistry = umbExtensionsRegistry;
         new UmbBackofficeContext(this);
-        new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
+        new UmbBackofficeEntryPointExtensionInitializer(this, umbExtensionsRegistry);
         new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry);
-        new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPrivateExtensions();
         // So far local packages are this simple to registerer, so no need for a manager to do that:
         CORE_PACKAGES.forEach(async (packageImport) => {
             const packageModule = await packageImport;
             umbExtensionsRegistry.registerMany(packageModule.extensions);
         });
+        new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPrivateExtensions();
     }
     render() {
         return html `

package/dist-cms/apps/backoffice/components/backoffice-header-sections.element.js

@@ -57,7 +57,7 @@ UmbBackofficeHeaderSectionsElement.styles = [
 			#tabs {
 				height: 60px;
 				flex-basis: 100%;
-				font-size: 16px;
+				font-size: 16px; /* specific for the header */
 				--uui-tab-text: var(--uui-color-header-contrast);
 				--uui-tab-text-hover: var(--uui-color-header-contrast-emphasis);
 				--uui-tab-text-active: var(--uui-color-header-contrast-emphasis);

package/dist-cms/apps/backoffice/components/backoffice-main.element.d.ts

@@ -1,3 +1,4 @@
+import { nothing } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
 export declare class UmbBackofficeMainElement extends UmbLitElement {
     private _routes;
@@ -10,7 +11,7 @@ export declare class UmbBackofficeMainElement extends UmbLitElement {
     private _createRoutes;
     private _onRouteChange;
     private _provideSectionContext;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 declare global {

package/dist-cms/apps/backoffice/components/backoffice-main.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BACKOFFICE_CONTEXT } from '../backoffice.context.js';
-import { css, html, customElement, state } from '../../../external/lit/index.js';
+import { css, html, customElement, state, nothing } from '../../../external/lit/index.js';
 import { UmbSectionContext, UMB_SECTION_CONTEXT } from '../../../packages/core/section/index.js';
 import { createExtensionElement } from '../../../libs/extension-api/index.js';
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
@@ -83,17 +83,18 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
     render() {
         return this._routes.length > 0
             ? html `<umb-router-slot .routes=${this._routes} @change=${this._onRouteChange}></umb-router-slot>`
-            : '';
+            : nothing;
     }
 };
 UmbBackofficeMainElement.styles = [
     css `
 			:host {
-				background-color: var(--uui-color-background);
 				display: block;
+				background-color: var(--uui-color-background);
+				width: 100%;
 				height: calc(
 					100% - 60px
-				); // 60 => top header height, TODO: Make sure this comes from somewhere so it is maintainable and eventually responsive.
+				); /* 60 => top header height, TODO: Make sure this comes from somewhere so it is maintainable and eventually responsive. */
 			}
 		`,
 ];

package/dist-cms/assets/lang/bs.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Creator Name: Smayke95
+ * Creator Link: https://github.com/Smayke95
+ *
+ * Language Alias: bs
+ * Language Int Name: Bosnian
+ * Language Local Name: Bosanski
+ * Language LCID: 25
+ * Language Culture: bs
+ */
+import type { UmbLocalizationDictionary } from '../../libs/localization-api/index.js';
+declare const _default: UmbLocalizationDictionary;
+export default _default;