diff --git a/dashboard.qrc b/dashboard.qrc index 7cdf36e..1cc1339 100644 --- a/dashboard.qrc +++ b/dashboard.qrc @@ -7,5 +7,6 @@ dashboard/styles/pce/favicon.ico dashboard/styles/pce/icon.png dashboard/styles/pce/icon.svg + dashboard/icons/user.svg diff --git a/dashboard/app.js b/dashboard/app.js index d0afb98..2857cc3 100644 --- a/dashboard/app.js +++ b/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.hideLoginOverlay(); - this.connectWebSocket(); + this.updateSessionUser(); + this.hideLoginOverlay(); + 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() { - if (!this.elements.sessionSummary) + updateSessionUser() { + if (!this.elements.sessionUsername) return; - if (!this.token) { - this.elements.sessionSummary.textContent = 'Please sign in to start the WebSocket session.'; + const defaultLabel = document.body && document.body.dataset.mode === 'help' + ? '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'; - const username = this.username ? this.username : 'user'; - this.elements.sessionSummary.textContent = `Signed in as ${username}. Token valid until ${expires}.`; + this.elements.sessionUsername.textContent = this.username; 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(); diff --git a/dashboard/help.html b/dashboard/help.html index 960ad78..40cc0d5 100644 --- a/dashboard/help.html +++ b/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 @@ Awaiting login…

-
- Load the dashboard to authenticate. - +
+ + Load the dashboard to authenticate.
+
diff --git a/dashboard/icons/user.svg b/dashboard/icons/user.svg new file mode 100644 index 0000000..d164649 --- /dev/null +++ b/dashboard/icons/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dashboard/index.html b/dashboard/index.html index b91d226..3d55048 100644 --- a/dashboard/index.html +++ b/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 @@ Awaiting login…

-
- Please sign in. - +
+ + Awaiting login…
+ ?