iobroker.webui 1.25.2 → 1.26.0

package/www/node_modules/@iobroker/socket-client/dist/esm/Connection.js

@@ -28,6 +28,10 @@ const ADAPTERS = ['material', 'echarts', 'vis'];
 export class Connection {
     constructor(props) {
         this.props = this.applyDefaultProps(props);
+        // Create unique ID of this instance
+        this.connId = `${this.props.name ? `${this.props.name}-` : ''}${Math.round(Math.random() * 1000000)
+            .toString()
+            .padStart(6, '0')}`;
         this.waitForSocketLib()
             .then(() => this.startSocket())
             .catch(e => {
@@ -51,6 +55,8 @@ export class Connection {
         };
     }
     props;
+    connId;
+    lastAccessToken = null;
     ignoreState = '';
     connected = false;
     subscribed = false;
@@ -83,7 +89,8 @@ export class Connection {
     _instanceSubscriptions = {};
     /** Cache for server requests */
     _promises = {};
-    _authTimer;
+    _authTimer = null;
+    _refreshTimer = null;
     _systemConfig;
     /** The "system.config" object */
     get systemConfig() {
@@ -184,6 +191,20 @@ export class Connection {
             token: this.props.token,
         });
         this._socket.on('connect', noTimeout => {
+            // Listen for messages from other tabs
+            window.addEventListener('storage', this.onAccessTokenUpdated);
+            const tokens = Connection.readTokens();
+            if (tokens && !tokens.owner) {
+                // Take the ownership of the token
+                const now = Date.now();
+                this.saveTokens({
+                    access_token: tokens.access_token,
+                    refresh_token: tokens.refresh_token,
+                    expires_in: Math.round((tokens.expires_in.getTime() - now) / 1000),
+                    refresh_token_expires_in: Math.round((tokens.refresh_token_expires_in.getTime() - now) / 1000),
+                    token_type: 'Bearer',
+                }, tokens.stayLoggedIn);
+            }
             this.onReadyDone = false;
             // If the user is not admin, it takes some time to install the handlers, because all rights must be checked
             if (noTimeout !== true) {
@@ -313,9 +334,252 @@ export class Connection {
             }
             this._subscribe(true);
             this.onConnectionHandlers.forEach(cb => cb(true));
+            this.checkAccessTokenExpire();
         }
         this._waitForFirstConnectionPromise.resolve();
     }
+    static readTokens() {
+        let tokenString = window.sessionStorage.getItem('iob_tokens');
+        const stayLoggedIn = !tokenString;
+        if (!tokenString) {
+            tokenString = window.localStorage.getItem('iob_tokens');
+        }
+        if (!tokenString) {
+            return null;
+        }
+        const [refresh_token, refresh_token_expires_in, access_token, expires_in, owner] = tokenString.split(';');
+        const refreshExpires = new Date(refresh_token_expires_in);
+        if (refreshExpires.getTime() < Date.now()) {
+            // refresh token expired
+            return null;
+        }
+        return {
+            refresh_token,
+            refresh_token_expires_in: refreshExpires,
+            access_token,
+            expires_in: new Date(expires_in),
+            owner,
+            stayLoggedIn,
+        };
+    }
+    static saveTokensStatic(data, stayLoggedIn, owner) {
+        const tokenStr = `${data.refresh_token};${new Date(Date.now() + data.refresh_token_expires_in * 1000).toISOString()};${data.access_token};${new Date(Date.now() + data.expires_in * 1000).toISOString()}${owner ? `;${owner}` : ''}`;
+        if (stayLoggedIn) {
+            window.localStorage.setItem('iob_tokens', tokenStr);
+        }
+        else {
+            window.sessionStorage.setItem('iob_tokens', tokenStr);
+        }
+    }
+    saveTokens(data, stayLoggedIn) {
+        Connection.saveTokensStatic(data, stayLoggedIn, this.connId);
+    }
+    static deleteTokensStatic() {
+        window.localStorage.removeItem('iob_tokens');
+        window.sessionStorage.removeItem('iob_tokens');
+    }
+    /**
+     * Destroy tokens if they were created by this connection if they expired or invalid
+     *
+     * @param stayLoggedIn if stored in localStorage or in sessionStorage
+     * @param logout if logout is requested
+     */
+    deleteTokens(stayLoggedIn, logout) {
+        const tokens = Connection.readTokens();
+        if (tokens) {
+            if (logout) {
+                Connection.deleteTokensStatic();
+            }
+            else if (tokens.stayLoggedIn === stayLoggedIn && tokens.owner === this.connId) {
+                if (tokens.stayLoggedIn) {
+                    window.localStorage.removeItem('iob_tokens');
+                }
+                else {
+                    window.sessionStorage.removeItem('iob_tokens');
+                }
+            }
+        }
+    }
+    onAccessTokenUpdated = (event) => {
+        // Storage event is only fired in other tabs/windows (or iframes) of the same origin when the localStorage (or sessionStorage) is modified, and not in the same window where the change was made.
+        if (event.key === 'iob_tokens') {
+            const tokens = Connection.readTokens();
+            if (tokens) {
+                console.log(`Tab ${this.connId} received updated token: ${tokens.access_token}`);
+                this.updateTokenExpiration(tokens.access_token);
+            }
+        }
+    };
+    updateTokenExpiration(accessToken) {
+        // This connection is not a token owner, so only read the new access token and inform the server
+        if (this.lastAccessToken !== accessToken) {
+            this.lastAccessToken = accessToken;
+            this._socket.emit('updateTokenExpiration', accessToken, (err, success) => {
+                if (err) {
+                    console.error(`Cannot update expiration time: ${err}`);
+                    window.location.reload();
+                }
+                else if (!success) {
+                    console.error('Cannot update expiration time');
+                    window.location.reload();
+                }
+            });
+        }
+        this.checkAccessTokenExpire();
+    }
+    refreshTokens(tokenStructure, takeOwnership) {
+        if (!tokenStructure) {
+            // Refresh the page, as we cannot refresh the token
+            setTimeout(() => window.location.reload(), 500);
+            return;
+        }
+        if (takeOwnership || !tokenStructure.owner || tokenStructure.owner === this.connId) {
+            if (this.acquireTokenLock()) {
+                // Access token will expire soon => Send authentication again
+                fetch('./oauth/token', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: `grant_type=refresh_token&refresh_token=${tokenStructure.refresh_token}&client_id=ioBroker&stayloggedin=${tokenStructure.stayLoggedIn}`,
+                })
+                    .then(response => {
+                    if (response.ok) {
+                        return response.json();
+                    }
+                    throw new Error('Cannot refresh access token');
+                })
+                    .then((data) => {
+                    if (data.access_token) {
+                        this.saveTokens(data, tokenStructure.stayLoggedIn);
+                        this.releaseTokenLock();
+                        this.updateTokenExpiration(data.access_token);
+                    }
+                    else {
+                        throw new Error('Cannot get access token');
+                    }
+                })
+                    .catch(err => {
+                    this.releaseTokenLock();
+                    this.deleteTokens(tokenStructure.stayLoggedIn);
+                    console.error(err);
+                    window.location.reload();
+                });
+            }
+            else {
+                // Someone else is updating the token, so wait for the next check
+                this.checkAccessTokenExpire();
+            }
+        }
+        else if (this.lastAccessToken !== tokenStructure.access_token) {
+            this.updateTokenExpiration(tokenStructure.access_token);
+        }
+    }
+    /**
+     * Attempts to acquire the semaphore lock.
+     *
+     * @returns True if the lock was acquired successfully; otherwise, false.
+     */
+    acquireTokenLock() {
+        const now = Date.now();
+        const lock = localStorage.getItem('iob_token_semaphore');
+        if (lock) {
+            try {
+                const lockData = JSON.parse(lock);
+                // If the current lock is still valid, we cannot acquire the lock.
+                if (now < lockData.expiry) {
+                    return false;
+                }
+                // Otherwise, the lock has expired and we can override it.
+            }
+            catch {
+                // ignore
+            }
+        }
+        // Create a new lock with expiry 10 seconds from now.
+        const newLock = {
+            connId: this.connId,
+            expiry: now + 10 * 1000, // 10 seconds in milliseconds
+        };
+        localStorage.setItem('iob_token_semaphore', JSON.stringify(newLock));
+        return true;
+    }
+    /** Releases the semaphore lock if it's owned by the given connection ID. */
+    releaseTokenLock() {
+        const lock = localStorage.getItem('iob_token_semaphore');
+        if (lock) {
+            try {
+                const lockData = JSON.parse(lock);
+                // Only remove the lock if it's owned by the current connection.
+                if (lockData.connId === this.connId) {
+                    localStorage.removeItem('iob_token_semaphore');
+                }
+            }
+            catch {
+                // If parsing fails, remove the lock just in case.
+                localStorage.removeItem('iob_token_semaphore');
+            }
+        }
+    }
+    checkAccessTokenExpire() {
+        if (this._refreshTimer) {
+            clearTimeout(this._refreshTimer);
+            this._refreshTimer = null;
+        }
+        if (this.isSecure) {
+            const tokens = Connection.readTokens();
+            if (tokens) {
+                const accessExpireInUnixMs = tokens.expires_in.getTime();
+                // Check if the access token expires in the next 30 seconds
+                if (accessExpireInUnixMs < Date.now() + 30_000) {
+                    const takeOwnership = accessExpireInUnixMs < Date.now() + 5_500;
+                    if (!tokens.refresh_token) {
+                        // Refresh the page, as we cannot refresh the token
+                        setTimeout(() => window.location.reload(), Date.now() > accessExpireInUnixMs ? 500 : accessExpireInUnixMs - Date.now());
+                    }
+                    else if (tokens.owner === this.connId ||
+                        // We gave 25 seconds to the owner to update the token, and now we will do it and take the ownership
+                        takeOwnership) {
+                        // Handle token expiration if the connection is the owner of the token
+                        if (this.props.tokenTimeoutHandler) {
+                            // Asc if the user wants to stay logged in
+                            void this.props.tokenTimeoutHandler(accessExpireInUnixMs).then(prolong => {
+                                if (prolong) {
+                                    this.refreshTokens(tokens, takeOwnership);
+                                }
+                                else {
+                                    // Refresh the page, as we cannot refresh the token
+                                    setTimeout(() => window.location.reload(), Date.now() > accessExpireInUnixMs ? 500 : accessExpireInUnixMs - Date.now());
+                                }
+                            });
+                        }
+                        else {
+                            this.refreshTokens(tokens, takeOwnership);
+                        }
+                    }
+                    else if (this.lastAccessToken !== tokens.access_token) {
+                        // The connection is not the owner, so just check if access_token changed, so inform the server about it
+                        this.refreshTokens(tokens);
+                    }
+                    else {
+                        // What 3 seconds and check again, maybe the owner connection will update the token
+                        this._refreshTimer = setTimeout(() => {
+                            this._refreshTimer = null;
+                            this.checkAccessTokenExpire();
+                        }, 3_000);
+                    }
+                }
+                else {
+                    this._refreshTimer = setTimeout(() => {
+                        this._refreshTimer = null;
+                        this.checkAccessTokenExpire();
+                    }, accessExpireInUnixMs - Date.now() - 30_000 > 120_000
+                        ? 120_000
+                        : accessExpireInUnixMs - Date.now() - 30_000);
+                }
+            }
+        }
+    }
     /**
      * Checks if running in ioBroker cloud
      */
@@ -355,7 +619,7 @@ export class Connection {
                         reject(err);
                     }
                     else {
-                        resolve(acl);
+                        resolve(acl || null);
                     }
                 });
             },

package/www/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.d.ts

@@ -49,12 +49,13 @@ export declare class BaseCustomWebComponentNoAttachedTemplate extends HTMLElemen
      * ==> this could also be nested
      *
      */
-    protected _bindingsParse(node?: Node, removeAttributes?: boolean, host?: any, context?: any): void;
+    protected _bindingsParse(node?: Node, removeAttributes?: boolean, host?: any, context?: any, useSignals?: boolean): void;
     private _bindingsInternalParse;
     private _textFragmentBinding;
     private _bindingRunEval;
     private _bindingRunEvalInt;
     private _bindingConditional;
+    oldValuesSymbol: symbol;
     private _bindingRepeat;
     private _bindingSetNodeValue;
     private _bindingSetElementCssValue;

package/www/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js

@@ -137,10 +137,10 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
      * ==> this could also be nested
      *
      */
-    _bindingsParse(node, removeAttributes = false, host = null, context = null) {
-        this._bindingsInternalParse(node, null, removeAttributes, host, context);
+    _bindingsParse(node, removeAttributes = false, host = null, context = null, useSignals = false) {
+        this._bindingsInternalParse(node, null, removeAttributes, host, context, useSignals);
     }
-    _bindingsInternalParse(startNode, repeatBindingItems, removeAttributes, host, context) {
+    _bindingsInternalParse(startNode, repeatBindingItems, removeAttributes, host, context, useSignals = false) {
         if (!this._bindings)
             this._bindings = [];
         if (!startNode)
@@ -384,64 +384,74 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
                 console.warn(error.message, 'Failed to bind Conditional to expression "' + expression + '"', this, node);
         }
     }
+    oldValuesSymbol = Symbol('oldValuesSymbol');
     _bindingRepeat(node, bindingProperty, bindingIndexName, expression, callback, repeatBindingItems, elementsCache, host, context) {
         try {
-            const values = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
-            if (callback) {
-                if (callback.startsWith('[[') && callback.endsWith(']]'))
-                    callback = callback.substring(2, callback.length - 2);
+            let values = this._bindingRunEval(expression, repeatBindingItems, null, host, context);
+            if (values && !Array.isArray(values))
+                values = [...values];
+            const oldValue = node[this.oldValuesSymbol];
+            if (oldValue !== values && (oldValue?.length !== values?.length || (values.some((x, i) => x !== oldValue?.[i])))) {
+                if (Array.isArray(values))
+                    node[this.oldValuesSymbol] = [...values];
                 else
-                    callback = "this." + callback;
-            }
-            for (let c of elementsCache) {
-                if (c.parentNode) {
-                    let intRepeatBindingItems = [];
-                    intRepeatBindingItems.push({ name: 'nodes', item: [c] });
-                    intRepeatBindingItems.push({ name: 'callbackType', item: 'remove' });
-                    this._bindingRunEval(callback, intRepeatBindingItems, null, host, context);
-                    const bnds = this._repeatBindings.get(c);
-                    if (bnds?.length) {
-                        for (const b of bnds) {
-                            const idx = this._bindings.indexOf(b);
-                            if (idx >= 0)
-                                this._bindings.splice(idx, 1);
+                    node[this.oldValuesSymbol] = values;
+                if (callback) {
+                    if (callback.startsWith('[[') && callback.endsWith(']]'))
+                        callback = callback.substring(2, callback.length - 2);
+                    else
+                        callback = "this." + callback;
+                }
+                for (let c of elementsCache) {
+                    if (c.parentNode) {
+                        let intRepeatBindingItems = [];
+                        intRepeatBindingItems.push({ name: 'nodes', item: [c] });
+                        intRepeatBindingItems.push({ name: 'callbackType', item: 'remove' });
+                        this._bindingRunEval(callback, intRepeatBindingItems, null, host, context);
+                        const bnds = this._repeatBindings.get(c);
+                        if (bnds?.length) {
+                            for (const b of bnds) {
+                                const idx = this._bindings.indexOf(b);
+                                if (idx >= 0)
+                                    this._bindings.splice(idx, 1);
+                            }
                         }
+                        c.parentNode.removeChild(c);
                     }
-                    c.parentNode.removeChild(c);
                 }
-            }
-            elementsCache.length = 0;
-            if (values) {
-                if (!this._repeatBindings)
-                    this._repeatBindings = new WeakMap();
-                //todo -> copy values to compare and only generate new controls...
-                let i = 0;
-                for (let e of values) {
-                    let intRepeatBindingItems = [];
-                    if (repeatBindingItems)
-                        intRepeatBindingItems = repeatBindingItems.slice();
-                    intRepeatBindingItems.push({ name: bindingProperty, item: e });
-                    intRepeatBindingItems.push({ name: bindingIndexName, item: i });
-                    let nd = node.content.cloneNode(true);
-                    elementsCache.push(...nd.children);
-                    const bndCount = this._bindings.length;
-                    this._bindingsInternalParse(nd, intRepeatBindingItems, true, host, context);
-                    this._repeatBindings.set(nd.children[0], this._bindings.toSpliced(0, bndCount));
-                    if (callback) {
-                        intRepeatBindingItems.push({ name: 'nodes', item: [...nd.children] });
-                        intRepeatBindingItems.push({ name: 'callbackType', item: 'create' });
-                        let nds = this._bindingRunEval(callback, intRepeatBindingItems, null, host, context);
-                        if (nds === undefined)
-                            nds = nd.children;
-                        if (nds) {
-                            for (let n of Array.from(nds))
-                                node.parentNode.insertBefore(n, node);
+                elementsCache.length = 0;
+                if (values) {
+                    if (!this._repeatBindings)
+                        this._repeatBindings = new WeakMap();
+                    //todo -> copy values to compare and only generate new controls...
+                    let i = 0;
+                    for (let e of values) {
+                        let intRepeatBindingItems = [];
+                        if (repeatBindingItems)
+                            intRepeatBindingItems = repeatBindingItems.slice();
+                        intRepeatBindingItems.push({ name: bindingProperty, item: e });
+                        intRepeatBindingItems.push({ name: bindingIndexName, item: i });
+                        let nd = node.content.cloneNode(true);
+                        elementsCache.push(...nd.children);
+                        const bndCount = this._bindings.length;
+                        this._bindingsInternalParse(nd, intRepeatBindingItems, true, host, context);
+                        this._repeatBindings.set(nd.children[0], this._bindings.toSpliced(0, bndCount));
+                        if (callback) {
+                            intRepeatBindingItems.push({ name: 'nodes', item: [...nd.children] });
+                            intRepeatBindingItems.push({ name: 'callbackType', item: 'create' });
+                            let nds = this._bindingRunEval(callback, intRepeatBindingItems, null, host, context);
+                            if (nds === undefined)
+                                nds = nd.children;
+                            if (nds) {
+                                for (let n of Array.from(nds))
+                                    node.parentNode.insertBefore(n, node);
+                            }
                         }
+                        else {
+                            node.parentNode.insertBefore(nd, node);
+                        }
+                        i++;
                     }
-                    else {
-                        node.parentNode.insertBefore(nd, node);
-                    }
-                    i++;
                 }
             }
         }

package/www/node_modules/@node-projects/base-custom-webcomponent/dist/Effect.js

@@ -0,0 +1,2 @@
+"use strict";
+//https://github.com/proposal-signals/signal-polyfill

package/www/node_modules/@node-projects/base-custom-webcomponent/dist/SignalDecorator.js

@@ -0,0 +1,16 @@
+//https://github.com/proposal-signals/signal-polyfill
+import { Signal } from "signal-polyfill";
+export function signal(target) {
+    const { get } = target;
+    return {
+        get() {
+            return get.call(this).get();
+        },
+        set(value) {
+            get.call(this).set(value);
+        },
+        init(value) {
+            return new Signal.State(value);
+        },
+    };
+}