@umbraco-cms/backoffice 14.0.0--preview004-9ceaa576 → 14.0.0--preview004-52e41be8

package/dist-cms/apps/app/app.context.d.ts

@@ -1,9 +1,10 @@
-import { UmbAppContextConfig } from '../../apps/app/app-context-config.interface.js';
+import { UmbAppContextConfig } from './app-context-config.interface.js';
+import { UmbBaseController, UmbControllerHost } from '../../libs/controller-api/index.js';
 import { UmbContextToken } from '../../libs/context-api/index.js';
-export declare class UmbAppContext {
+export declare class UmbAppContext extends UmbBaseController {
     #private;
-    constructor(config: UmbAppContextConfig);
+    constructor(host: UmbControllerHost, config: UmbAppContextConfig);
     getBackofficePath(): string;
     getServerUrl(): string;
 }
-export declare const UMB_APP: UmbContextToken<UmbAppContext, UmbAppContext>;
+export declare const UMB_APP_CONTEXT: UmbContextToken<UmbAppContext, UmbAppContext>;

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

@@ -1,10 +1,13 @@
+import { UmbBaseController } from '../../libs/controller-api/index.js';
 import { UmbContextToken } from '../../libs/context-api/index.js';
-export class UmbAppContext {
+export class UmbAppContext extends UmbBaseController {
     #serverUrl;
     #backofficePath;
-    constructor(config) {
+    constructor(host, config) {
+        super(host);
         this.#serverUrl = config.serverUrl;
         this.#backofficePath = config.backofficePath;
+        this.provideContext(UMB_APP_CONTEXT, this);
     }
     getBackofficePath() {
         return this.#backofficePath;
@@ -13,4 +16,4 @@ export class UmbAppContext {
         return this.#serverUrl;
     }
 }
-export const UMB_APP = new UmbContextToken('UMB_APP');
+export const UMB_APP_CONTEXT = new UmbContextToken('UMB_APP');

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

@@ -4,22 +4,21 @@ 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;
 };
-import { UMB_APP, UmbAppContext } from './app.context.js';
-import { umbLocalizationRegistry } from '../../packages/core/localization/index.js';
-import { UMB_AUTH_CONTEXT, UmbAuthContext } from '../../shared/auth/index.js';
+import { UmbAppContext } from './app.context.js';
+import { UmbServerConnection } from './server-connection.js';
+import { UmbAuthContext } from '../../shared/auth/index.js';
 import { css, html, customElement, property } from '../../external/lit/index.js';
 import { UUIIconRegistryEssential } from '../../external/uui/index.js';
 import { UmbIconRegistry } from '../../shared/icon-registry/index.js';
 import { UmbLitElement } from '../../shared/lit-element/index.js';
 import { pathWithoutBasePath } from '../../shared/router/index.js';
-import { tryExecute } from '../../shared/resources/index.js';
-import { OpenAPI, RuntimeLevelModel, ServerResource } from '../../external/backend-api/index.js';
-import { contextData, umbDebugContextEventType } from '../../libs/context-api/index.js';
+import { OpenAPI, RuntimeLevelModel } from '../../external/backend-api/index.js';
+import { UmbContextDebugController } from '../../packages/core/debug/index.js';
 export let UmbAppElement = class UmbAppElement extends UmbLitElement {
     #authContext;
     #umbIconRegistry;
     #uuiIconRegistry;
-    #runtimeLevel;
+    #serverConnection;
     constructor() {
         super();
         /**
@@ -58,51 +57,30 @@ export let UmbAppElement = class UmbAppElement extends UmbLitElement {
         ];
         this.#umbIconRegistry = new UmbIconRegistry();
         this.#uuiIconRegistry = new UUIIconRegistryEssential();
-        this.#runtimeLevel = RuntimeLevelModel.UNKNOWN;
+        new UmbContextDebugController(this);
         this.#umbIconRegistry.attach(this);
         this.#uuiIconRegistry.attach(this);
     }
     connectedCallback() {
         super.connectedCallback();
-        this.#setLanguage();
         this.#setup();
     }
-    #setLanguage() {
-        if (this.lang) {
-            umbLocalizationRegistry.loadLanguage(this.lang);
-        }
-    }
-    #listenForLanguageChange() {
-        // This will wait for the default language to be loaded before attempting to load the current user language
-        // just in case the user language is not the default language.
-        // We **need** to do this because the default language (typically en-us) holds all the fallback keys for all the other languages.
-        // This way we can ensure that the document language is always loaded first and subsequently registered as the fallback language.
-        this.observe(umbLocalizationRegistry.isDefaultLoaded, (isDefaultLoaded) => {
-            if (!this.#authContext) {
-                throw new Error('[Fatal] AuthContext requested before it was initialized');
-            }
-            if (!isDefaultLoaded)
-                return;
-            this.observe(this.#authContext.languageIsoCode, (currentLanguageIsoCode) => {
-                umbLocalizationRegistry.loadLanguage(currentLanguageIsoCode);
-            }, 'languageIsoCode');
-        });
-    }
     async #setup() {
         if (this.serverUrl === undefined)
             throw new Error('No serverUrl provided');
+        /* All requests to the server requires the base URL to be set.
+        We make sure it happens before we get the server status.
+        TODO: find the right place to set this
+        */
         OpenAPI.BASE = this.serverUrl;
-        const redirectUrl = `${window.location.origin}${this.backofficePath}`;
-        this.#authContext = new UmbAuthContext(this, this.serverUrl, redirectUrl);
-        this.provideContext(UMB_AUTH_CONTEXT, this.#authContext);
-        this.provideContext(UMB_APP, new UmbAppContext({ backofficePath: this.backofficePath, serverUrl: this.serverUrl }));
+        this.#serverConnection = await new UmbServerConnection(this.serverUrl).connect();
+        this.#authContext = new UmbAuthContext(this, this.serverUrl, this.backofficePath, this.bypassAuth);
+        new UmbAppContext(this, { backofficePath: this.backofficePath, serverUrl: this.serverUrl });
         // Try to initialise the auth flow and get the runtime status
         try {
-            // Get the current runtime level
-            await this.#setInitStatus();
             // If the runtime level is "install" we should clear any cached tokens
             // else we should try and set the auth status
-            if (this.#runtimeLevel === RuntimeLevelModel.INSTALL) {
+            if (this.#serverConnection.getStatus() === RuntimeLevelModel.INSTALL) {
                 await this.#authContext.signOut();
             }
             else {
@@ -127,54 +105,22 @@ export let UmbAppElement = class UmbAppElement extends UmbLitElement {
             // Redirect to the error page
             this.#errorPage(errorMsg, error);
         }
-        // TODO: wrap all debugging logic in a separate class. Maybe this could be part of the context-api? When we create a new root, we could attach the debugger to it?
-        // Listen for the debug event from the <umb-debug> component
-        this.addEventListener(umbDebugContextEventType, (event) => {
-            // Once we got to the outter most component <umb-app>
-            // we can send the event containing all the contexts
-            // we have collected whilst coming up through the DOM
-            // and pass it back down to the callback in
-            // the <umb-debug> component that originally fired the event
-            if (event.callback) {
-                event.callback(event.instances);
-            }
-            // Massage the data into a simplier format
-            // Why? Can't send contexts data directly - browser seems to not serialize it and says its null
-            // But a simple object works fine for browser extension to consume
-            const data = {
-                contexts: contextData(event.instances),
-            };
-            // Emit this new event for the browser extension to listen for
-            this.dispatchEvent(new CustomEvent('umb:debug-contexts:data', { detail: data, bubbles: true }));
-        });
-    }
-    async #setInitStatus() {
-        const { data, error } = await tryExecute(ServerResource.getServerStatus());
-        if (error) {
-            throw error;
-        }
-        this.#runtimeLevel = data?.serverStatus ?? RuntimeLevelModel.UNKNOWN;
     }
+    // TODO: move set initial auth state into auth context
     async #setAuthStatus() {
-        if (this.bypassAuth === false) {
-            if (!this.#authContext) {
-                throw new Error('[Fatal] AuthContext requested before it was initialized');
-            }
-            // Get service configuration from authentication server
-            await this.#authContext.setInitialState();
-            // Instruct all requests to use the auth flow to get and use the access_token for all subsequent requests
-            OpenAPI.TOKEN = () => this.#authContext.getLatestToken();
-        }
-        this.#listenForLanguageChange();
-        if (this.#authContext?.isAuthorized()) {
-            this.#authContext?.setLoggedIn(true);
-        }
-        else {
-            this.#authContext?.setLoggedIn(false);
+        if (this.bypassAuth)
+            return;
+        if (!this.#authContext) {
+            throw new Error('[Fatal] AuthContext requested before it was initialized');
         }
+        // Get service configuration from authentication server
+        await this.#authContext?.setInitialState();
+        // Instruct all requests to use the auth flow to get and use the access_token for all subsequent requests
+        OpenAPI.TOKEN = () => this.#authContext.getLatestToken();
+        OpenAPI.WITH_CREDENTIALS = true;
     }
     #redirect() {
-        switch (this.#runtimeLevel) {
+        switch (this.#serverConnection?.getStatus()) {
             case RuntimeLevelModel.INSTALL:
                 history.replaceState(null, '', 'install');
                 break;
@@ -200,22 +146,21 @@ export let UmbAppElement = class UmbAppElement extends UmbLitElement {
             }
             default:
                 // Redirect to the error page
-                this.#errorPage(`Unsupported runtime level: ${this.#runtimeLevel}`);
+                this.#errorPage(`Unsupported runtime level: ${this.#serverConnection?.getStatus()}`);
         }
     }
-    #isAuthorized() {
-        if (!this.#authContext)
-            return false;
-        return this.bypassAuth ? true : this.#authContext.isAuthorized();
-    }
     #isAuthorizedGuard() {
         return () => {
-            if (this.#isAuthorized()) {
+            if (!this.#authContext) {
+                throw new Error('[Fatal] AuthContext requested before it was initialized');
+            }
+            if (this.#authContext.getIsAuthorized()) {
                 return true;
             }
             // Save location.href so we can redirect to it after login
             window.sessionStorage.setItem('umb:auth:redirect', location.href);
             // Make a request to the auth server to start the auth flow
+            // TODO: find better name for this method
             this.#authContext.login();
             // Return false to prevent the route from being rendered
             return false;

package/dist-cms/apps/app/server-connection.d.ts

@@ -0,0 +1,29 @@
+import { RuntimeLevelModel } from '../../external/backend-api/index.js';
+export declare class UmbServerConnection {
+    #private;
+    isConnected: import("rxjs").Observable<boolean>;
+    constructor(serverUrl: string);
+    /**
+     * Connects to the server.
+     * @memberof UmbServerConnection
+     */
+    connect(): Promise<this>;
+    /**
+     * Gets the URL of the server.
+     * @return {*}
+     * @memberof UmbServerConnection
+     */
+    getUrl(): string;
+    /**
+     * Gets the status of the server.
+     * @return {string}
+     * @memberof UmbServerConnection
+     */
+    getStatus(): RuntimeLevelModel;
+    /**
+     * Checks if the server is connected.
+     * @return {boolean}
+     * @memberof UmbServerConnection
+     */
+    getIsConnected(): boolean;
+}

package/dist-cms/apps/app/server-connection.js

@@ -0,0 +1,56 @@
+import { RuntimeLevelModel, ServerResource } from '../../external/backend-api/index.js';
+import { UmbBooleanState } from '../../libs/observable-api/index.js';
+import { tryExecute } from '../../shared/resources/index.js';
+export class UmbServerConnection {
+    #url;
+    #status;
+    #isConnected;
+    constructor(serverUrl) {
+        this.#status = RuntimeLevelModel.UNKNOWN;
+        this.#isConnected = new UmbBooleanState(false);
+        this.isConnected = this.#isConnected.asObservable();
+        this.#url = serverUrl;
+    }
+    /**
+     * Connects to the server.
+     * @memberof UmbServerConnection
+     */
+    async connect() {
+        await this.#setStatus();
+        return this;
+    }
+    /**
+     * Gets the URL of the server.
+     * @return {*}
+     * @memberof UmbServerConnection
+     */
+    getUrl() {
+        return this.#url;
+    }
+    /**
+     * Gets the status of the server.
+     * @return {string}
+     * @memberof UmbServerConnection
+     */
+    getStatus() {
+        if (!this.getIsConnected())
+            throw new Error('Server is not connected. Remember to await connect()');
+        return this.#status;
+    }
+    /**
+     * Checks if the server is connected.
+     * @return {boolean}
+     * @memberof UmbServerConnection
+     */
+    getIsConnected() {
+        return this.#isConnected.getValue();
+    }
+    async #setStatus() {
+        const { data, error } = await tryExecute(ServerResource.getServerStatus());
+        if (error) {
+            throw error;
+        }
+        this.#isConnected.next(true);
+        this.#status = data?.serverStatus ?? RuntimeLevelModel.UNKNOWN;
+    }
+}