codenotch-react 1.0.22 → 1.0.24

package/dist/auml.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { SpaRenderStatus } from '@echino/echino.ui.framework/components/SpaBuilder/common/ISpaRenderProps';
+interface IRenderAumlProps {
+    auml: string;
+}
+interface IRenderAumlState {
+    loaded: boolean;
+    inspectorEnabled: boolean;
+}
+export declare class RenderAuml extends React.Component<IRenderAumlProps, IRenderAumlState> {
+    _refreshTokenTimer: NodeJS.Timeout | undefined;
+    constructor(props: IRenderAumlProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    progress(s: SpaRenderStatus): void;
+    getLogo(): React.JSX.Element;
+    getMode(theme: boolean | undefined): "dark" | "light";
+    retrieveInputs(): {
+        [k: string]: string;
+    };
+    getTimeToTokenExpiration(): number | null;
+    getTimeToNewTokenExpiration(expirationDateTime: string): number;
+    msToTime(ms: number): string;
+    parseJwt(token: string): any;
+    render(): React.JSX.Element;
+    refreshExpiredToken(): Promise<void>;
+}
+export {};
+//# sourceMappingURL=auml.d.ts.map

package/dist/auml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auml.d.ts","sourceRoot":"","sources":["../src/auml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,0EAA0E,CAAC;AAS3G,UAAU,gBAAgB;IACtB,IAAI,EAAE,MAAM,CAAC;CAChB;AACD,UAAU,gBAAgB;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE/E,kBAAkB,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;gBAEnC,KAAK,EAAE,gBAAgB;IAqBnC,iBAAiB;IAmCjB,oBAAoB;IAQpB,QAAQ,CAAC,CAAC,EAAE,eAAe;IAO3B,OAAO;IAYP,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS;IAclC,cAAc;;;IAMd,wBAAwB,IAAI,MAAM,GAAG,IAAI;IAoCzC,2BAA2B,CAAC,kBAAkB,EAAE,MAAM,GAAG,MAAM;IAO/D,QAAQ,CAAC,EAAE,EAAE,MAAM;IAmBnB,QAAQ,CAAC,KAAK,EAAE,MAAM;IAUtB,MAAM;IAiDA,mBAAmB;CAqC5B"}

package/dist/auml.js

@@ -0,0 +1,185 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderAuml = void 0;
+const react_1 = __importDefault(require("react"));
+const SpaRenderWithBrowserRouter_1 = require("@echino/echino.ui.framework/components/SpaBuilder/SpaRender/SpaRenderWithBrowserRouter");
+class RenderAuml extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            loaded: false,
+            inspectorEnabled: false
+        };
+        // Add a function that we can call from the browser console, allowing us to debug the page
+        //TODO we may not want to do that for prod pages
+        //@ts-ignore
+        window.toggleInspector = () => {
+            this.setState({
+                inspectorEnabled: !this.state.inspectorEnabled
+            }, () => console.log(`Auml inspector is now ${this.state.inspectorEnabled ? 'enabled' : 'disabled'}`));
+        };
+    }
+    componentDidMount() {
+        try {
+            // Setup a method to refresh our access token when it expires
+            if (this._refreshTokenTimer) {
+                clearTimeout(this._refreshTokenTimer);
+            }
+            if (!user) {
+                console.log("No user found, will not refresh the token");
+                return;
+            }
+            let timeToExpireMs = this.getTimeToTokenExpiration();
+            if (timeToExpireMs === null) {
+                console.log("No identity token found, attempting refreshing the token in 5 minutes");
+                this._refreshTokenTimer = setTimeout(() => this.refreshExpiredToken(), 5 * 60 * 1000);
+                return;
+            }
+            if (timeToExpireMs <= 0) {
+                // Refresh it immediatelty
+                this.refreshExpiredToken();
+            }
+            else {
+                this._refreshTokenTimer = setTimeout(() => this.refreshExpiredToken(), timeToExpireMs);
+            }
+        }
+        catch (err) {
+            console.warn("Could not setup token refresh timer: " + err);
+        }
+    }
+    componentWillUnmount() {
+        // Cleanup the refresh of the token
+        if (this._refreshTokenTimer) {
+            clearTimeout(this._refreshTokenTimer);
+        }
+    }
+    progress(s) {
+        //console.log('progessStatus ', s);
+        if (s === 'completed') {
+            this.setState({ loaded: true });
+        }
+    }
+    getLogo() {
+        //@ts-ignore
+        let tenant = global.tenant;
+        if (tenant.logoUrl) {
+            return react_1.default.createElement("img", { src: tenant.logoUrl, alt: tenant.displayName });
+        }
+        else {
+            return react_1.default.createElement("div", { className: 'app-loading-title' }, tenant.displayName);
+        }
+    }
+    getMode(theme) {
+        if (theme !== undefined) {
+            return theme ? 'dark' : 'light';
+        }
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    }
+    // Get input from the query parameters in the url
+    retrieveInputs() {
+        return Object.fromEntries(new URLSearchParams(window.location.search).entries());
+    }
+    getTimeToTokenExpiration() {
+        // The identity token is the only one we have access here on the client
+        // We use it to know when the access token (which we can't read) will expire
+        let identityToken = null;
+        let identityTokenKey = `${tenant.name}IdToken=`;
+        let cookies = document.cookie.split(';');
+        for (let c of cookies) {
+            if (c.trim().startsWith(identityTokenKey)) {
+                identityToken = c.trim().slice(identityTokenKey.length);
+                break;
+            }
+        }
+        if (identityToken === null) {
+            return null; // token not found
+        }
+        let identityTokenParsed = this.parseJwt(identityToken);
+        let expires = identityTokenParsed.exp; // Timestamp in second since Unix epoch
+        let timeToExpiresMs = expires * 1000 - new Date().getTime();
+        let timeToExpireStr = this.msToTime(timeToExpiresMs);
+        console.log(`Token will expire at ${new Date(expires * 1000).toISOString()} (in ${timeToExpireStr}), setting up a timer to refresh it`);
+        // Refresh it a bit before the expiration (5 min)
+        timeToExpiresMs -= 5 * 60 * 1000;
+        return timeToExpiresMs;
+    }
+    getTimeToNewTokenExpiration(expirationDateTime) {
+        let timeToExpiresMs = new Date(expirationDateTime).getTime() - new Date().getTime();
+        // Refresh it a bit before the expiration (5 min)
+        timeToExpiresMs -= 5 * 60 * 1000;
+        return timeToExpiresMs;
+    }
+    msToTime(ms) {
+        let seconds = Math.floor((ms / 1000) % 60), minutes = Math.floor((ms / (1000 * 60)) % 60), hours = Math.floor((ms / (1000 * 60 * 60)) % 24);
+        let timeString = seconds + " seconds";
+        if (minutes > 0) {
+            timeString = minutes + " minutes " + timeString;
+        }
+        if (hours > 0) {
+            timeString = hours + " hours " + timeString;
+        }
+        return timeString;
+    }
+    parseJwt(token) {
+        var base64Url = token.split('.')[1];
+        var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+        var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        }).join(''));
+        return JSON.parse(jsonPayload);
+    }
+    render() {
+        //var clusterUrl = this.figureOutClusterUrl();
+        let inputs = this.retrieveInputs();
+        let theme = undefined;
+        if (inputs["_theme"]) {
+            theme = inputs["_theme"].toLowerCase() === "dark";
+        }
+        let aumlManifest = null;
+        try {
+            let appManifestObj = JSON.parse(appManifest);
+            aumlManifest = appManifestObj.auml;
+        }
+        catch { }
+        return (react_1.default.createElement("div", { className: "app" },
+            react_1.default.createElement(SpaRenderWithBrowserRouter_1.SpaRenderWithBrowserRouter, { appDescription: this.props.auml, tenant: tenant, serviceName: serviceName, packageVersions: packageVersions, user: user, languages: languages, onProgress: (s) => this.progress(s), input: inputs, theme: theme, manifest: aumlManifest, inspectorEnabled: this.state.inspectorEnabled, children: [] }),
+            !this.state.loaded &&
+                react_1.default.createElement("div", { className: `app-loading ${this.getMode(theme)}` },
+                    this.getLogo(),
+                    react_1.default.createElement("i", { className: "fas fa-circle-notch fa-spin" }))));
+    }
+    async refreshExpiredToken() {
+        console.log("Token will expire soon, requesting a new one...");
+        // Using the refresh token we ask for a new access token using /portal/login/refresh
+        // If the refresh token has also expired, we will be redirected to the login page
+        let redirectUrl = window.location.href; // Where to send us back in case we need to be redirected to the login page
+        let url = `${tenant.clusterUrl}/portal/login/refresh?redirectUrl=${encodeURIComponent(redirectUrl)}`;
+        let response = await fetch(url); // For this request to work, we need to have a refresh token in the cookies
+        if (response.ok) {
+            // Setup next refresh
+            let timeToExpireMs;
+            try {
+                let newTokenExpiration = await response.text();
+                timeToExpireMs = this.getTimeToNewTokenExpiration(newTokenExpiration);
+            }
+            catch {
+                timeToExpireMs = 2 * 60 * 60 * 1000; // refresh in 2 hours
+            }
+            console.log(`Refresh request ok, next refresh in ${this.msToTime(timeToExpireMs)}`);
+            this._refreshTokenTimer = setTimeout(() => this.refreshExpiredToken(), timeToExpireMs);
+        }
+        else {
+            let content = await response.text();
+            console.error("Could not refresh the token", content);
+            console.log("Retrying refreshing the token in 5 minutes...");
+            this._refreshTokenTimer = setTimeout(() => this.refreshExpiredToken(), 5 * 60 * 1000);
+        }
+    }
+}
+exports.RenderAuml = RenderAuml;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "codenotch-react",
-    "version": "1.0.22",
+    "version": "1.0.24",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "author": "Codenotch SA",
@@ -13,9 +13,13 @@
     "files": [
         "dist/**/*"
     ],
+    "dependencies": {
+        "@echino/echino.ui.framework": "1.1.42"
+    },
     "devDependencies": {
         "@types/node": "^25.3.2",
         "@types/react": "^16.14.69",
+		"@echino/echino.ui.sdk": "^0.3.188",
         "typescript": "^5.9.3"
     },
     "peerDependencies": {