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…
+
?