Improve session-user

dashboard.qrc

@@ -7,5 +7,6 @@
         <file>dashboard/styles/pce/favicon.ico</file>
         <file>dashboard/styles/pce/icon.png</file>
         <file>dashboard/styles/pce/icon.svg</file>
+        <file>dashboard/icons/user.svg</file>
     </qresource>
 </RCC>

dashboard/app.js

@@ -9,7 +9,7 @@ class DashboardApp {
             password: document.getElementById('password'),
             statusDot: document.getElementById('statusDot'),
             connectionStatus: document.getElementById('connectionStatus'),
-            sessionSummary: document.getElementById('sessionSummary'),
+            sessionUsername: document.getElementById('sessionUsername'),
             logoutButton: document.getElementById('logoutButton'),
             requestTemplate: document.getElementById('requestTemplate'),
             responseTemplate: document.getElementById('responseTemplate'),
@@ -140,9 +140,9 @@ class DashboardApp {
             this.tokenExpiry = expiresAt;
             this.username = parsed.username || null;
             this.scheduleTokenRefresh();
-            this.updateSessionSummary();
+        this.updateSessionUser();
-            this.hideLoginOverlay();
+        this.hideLoginOverlay();
-            this.connectWebSocket();
+        this.connectWebSocket();
         } catch (error) {
             console.warn('Failed to restore session', error);
             this.clearSession();
@@ -167,7 +167,7 @@ class DashboardApp {
             .then(session => {
                 this.persistSession({ ...session, username });
                 this.hideLoginOverlay();
-                this.updateSessionSummary();
+                this.updateSessionUser();
                 this.connectWebSocket(true);
             })
             .catch(error => {
@@ -266,7 +266,7 @@ class DashboardApp {
             console.warn('Failed to clear session', error);
         }
 
-        this.updateSessionSummary();
+        this.updateSessionUser();
     }
 
     connectWebSocket(resetPending = false) {
@@ -426,7 +426,7 @@ class DashboardApp {
 
     onAuthenticationSucceeded() {
         this.updateConnectionStatus('Connected', 'connected');
-        this.updateSessionSummary();
+        this.updateSessionUser();
         this.sendGetChargers();
     }
 
@@ -699,19 +699,21 @@ class DashboardApp {
         dot.classList.add(state);
     }
 
-    updateSessionSummary() {
+    updateSessionUser() {
-        if (!this.elements.sessionSummary)
+        if (!this.elements.sessionUsername)
             return;
 
-        if (!this.token) {
+        const defaultLabel = document.body && document.body.dataset.mode === 'help'
-            this.elements.sessionSummary.textContent = 'Please sign in to start the WebSocket session.';
+            ? 'Load the dashboard to authenticate.'
+            : 'Awaiting login…';
+
+        if (!this.token || !this.username) {
+            this.elements.sessionUsername.textContent = defaultLabel;
             this.toggleLogoutButton(false);
             return;
         }
 
-        const expires = this.tokenExpiry ? this.tokenExpiry.toISOString() : 'unknown';
+        this.elements.sessionUsername.textContent = this.username;
-        const username = this.username ? this.username : 'user';
-        this.elements.sessionSummary.textContent = `Signed in as ${username}. Token valid until ${expires}.`;
         this.toggleLogoutButton(true);
     }
 
@@ -781,7 +783,7 @@ class DashboardApp {
         if (this.socket && this.socket.readyState === WebSocket.OPEN)
             this.socket.close();
         this.updateConnectionStatus('Logged out', 'connecting');
-        this.updateSessionSummary();
+        this.updateSessionUser();
         this.showLoginOverlay('You have been logged out.');
     }
 
@@ -829,7 +831,7 @@ class DashboardApp {
                 expiresAt: data.expiresAt,
                 username: this.username
             });
-            this.updateSessionSummary();
+            this.updateSessionUser();
         } catch (error) {
             console.warn('Token refresh failed', error);
             this.clearSession();

dashboard/help.html

@@ -84,6 +84,21 @@
             gap: 1rem 1.5rem;
         }
 
+        .session-user {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: #ffffff;
+        }
+
+        .session-user-icon {
+            width: 28px;
+            height: 28px;
+            display: inline-block;
+        }
+
         .status-indicator {
             display: inline-flex;
             align-items: center;
@@ -137,13 +152,6 @@
             border-color: #ffffff;
         }
 
-        .session-details {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            font-size: 0.95rem;
-        }
-
         button.ghost {
             border: 1px solid rgba(255, 255, 255, 0.55);
             color: #ffffff;
@@ -232,10 +240,11 @@
                     <span id="statusDot" class="status-dot connecting" aria-hidden="true"></span>
                     <span id="connectionStatus">Awaiting login…</span>
                 </p>
-                <div class="session-details">
+                <div class="session-user">
-                    <span id="sessionSummary">Load the dashboard to authenticate.</span>
+                    <img src="icons/user.svg" alt="" aria-hidden="true" class="session-user-icon">
-                    <button type="button" id="logoutButton" class="ghost hidden">Logout</button>
+                    <span id="sessionUsername">Load the dashboard to authenticate.</span>
                 </div>
+                <button type="button" id="logoutButton" class="ghost hidden">Logout</button>
                 <a class="tool-button" href="index.html" aria-label="Back to dashboard">⟵</a>
             </div>
         </div>

dashboard/icons/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-504.62q-49.5 0-84.75-35.25T360-624.62q0-49.5 35.25-84.75T480-744.62q49.5 0 84.75 35.25T600-624.62q0 49.5-35.25 84.75T480-504.62ZM200-215.38v-65.85q0-24.77 14.42-46.35 14.43-21.57 38.81-33.5 56.62-27.15 113.31-40.73 56.69-13.57 113.46-13.57 56.77 0 113.46 13.57 56.69 13.58 113.31 40.73 24.38 11.93 38.81 33.5Q760-306 760-281.23v65.85H200Zm40-40h480v-25.85q0-13.31-8.58-25-8.57-11.69-23.73-19.77-49.38-23.92-101.83-36.65-52.45-12.73-105.86-12.73t-105.86 12.73Q321.69-349.92 272.31-326q-15.16 8.08-23.73 19.77-8.58 11.69-8.58 25v25.85Zm240-289.24q33 0 56.5-23.5t23.5-56.5q0-33-23.5-56.5t-56.5-23.5q-33 0-56.5 23.5t-23.5 56.5q0 33 23.5 56.5t56.5 23.5Zm0-80Zm0 369.24Z"/></svg>

dashboard/index.html

@@ -84,6 +84,21 @@
             gap: 1rem 1.5rem;
         }
 
+        .session-user {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: #ffffff;
+        }
+
+        .session-user-icon {
+            width: 28px;
+            height: 28px;
+            display: inline-block;
+        }
+
         .tool-button {
             display: inline-flex;
             align-items: center;
@@ -370,13 +385,6 @@
             display: none !important;
         }
 
-        .session-details {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            font-size: 0.95rem;
-        }
-
         button.ghost {
             border: 1px solid rgba(255, 255, 255, 0.55);
             color: #ffffff;
@@ -407,10 +415,11 @@
                     <span id="statusDot" class="status-dot connecting" aria-hidden="true"></span>
                     <span id="connectionStatus">Awaiting login…</span>
                 </p>
-                <div class="session-details">
+                <div class="session-user">
-                    <span id="sessionSummary">Please sign in.</span>
+                    <img src="icons/user.svg" alt="" aria-hidden="true" class="session-user-icon">
-                    <button type="button" id="logoutButton" class="ghost hidden">Logout</button>
+                    <span id="sessionUsername">Awaiting login…</span>
                 </div>
+                <button type="button" id="logoutButton" class="ghost hidden">Logout</button>
                 <a class="tool-button" href="help.html" aria-label="Open help">?</a>
             </div>
         </div>