Improve session-user
This commit is contained in:
Simon Stürz
parent
912a1ebf74
commit
0498235a21
@ -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>
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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">
|
||||
<span id="sessionSummary">Load the dashboard to authenticate.</span>
|
||||
<button type="button" id="logoutButton" class="ghost hidden">Logout</button>
|
||||
<div class="session-user">
|
||||
<img src="icons/user.svg" alt="" aria-hidden="true" class="session-user-icon">
|
||||
<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>
|
||||
|
||||
1
dashboard/icons/user.svg
Normal file
1
dashboard/icons/user.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 794 B |
@ -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">
|
||||
<span id="sessionSummary">Please sign in.</span>
|
||||
<button type="button" id="logoutButton" class="ghost hidden">Logout</button>
|
||||
<div class="session-user">
|
||||
<img src="icons/user.svg" alt="" aria-hidden="true" class="session-user-icon">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user