Improve login and hide background

This commit is contained in:
Simon Stürz 2025-11-10 15:24:44 +01:00
parent f251743793
commit 0faf077b25
3 changed files with 38 additions and 22 deletions

View File

@ -421,6 +421,7 @@ class DashboardApp {
}
showLoginOverlay(message) {
this.setAuthLayout(true);
if (this.elements.loginOverlay)
this.elements.loginOverlay.classList.remove('hidden');
if (typeof message === 'string' && message.length > 0)
@ -433,6 +434,7 @@ class DashboardApp {
}
hideLoginOverlay() {
this.setAuthLayout(false);
if (this.elements.loginOverlay)
this.elements.loginOverlay.classList.add('hidden');
this.hideLoginError();
@ -465,6 +467,13 @@ class DashboardApp {
return `req-${Date.now()}-${Math.random().toString(16).slice(2)}`;
}
setAuthLayout(requireAuth) {
const body = document.body;
if (!body)
return;
body.classList.toggle('needs-auth', requireAuth);
}
}
window.app = new DashboardApp();

View File

@ -131,30 +131,37 @@
color: var(--muted-text-color);
}
/* Login overlay */
.overlay {
position: fixed;
inset: 0;
background: rgba(31, 45, 61, 0.65);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
transition: opacity 0.3s ease;
/* Authentication view */
body.needs-auth {
background: var(--surface-color);
}
.overlay.hidden {
visibility: hidden;
opacity: 0;
pointer-events: none;
body.needs-auth header,
body.needs-auth main,
body.needs-auth footer {
display: none;
}
.login-view {
width: 100%;
padding: 3rem 1.5rem;
display: none;
}
body.needs-auth .login-view {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
.login-panel {
background: var(--surface-color);
width: min(420px, 100%);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
padding: 2.25rem;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 18px 28px rgba(0, 0, 0, 0.08);
}
.login-panel h2 {
@ -242,7 +249,7 @@
}
</style>
</head>
<body>
<body class="needs-auth">
<header>
<h1>nymea EV Dash</h1>
<p class="status-indicator">
@ -277,7 +284,7 @@
</section>
</main>
<div id="loginOverlay" class="overlay" role="dialog" aria-modal="true" aria-labelledby="loginTitle">
<section id="loginOverlay" class="login-view" aria-labelledby="loginTitle">
<div class="login-panel">
<h2 id="loginTitle">Sign in</h2>
<p>Authenticate with your nymea credentials to obtain a session token for the dashboard.</p>
@ -293,7 +300,7 @@
<button type="submit" id="loginButton" class="primary">Sign in</button>
</form>
</div>
</div>
</section>
<footer>
<span id="appVersion">nymea EV Dash</span> · &copy; 20132025 nymea GmbH. All rights reserved.

View File

@ -67,13 +67,13 @@ EvDashEngine::EvDashEngine(ThingManager *thingManager, EvDashWebServerResource *
connect(socket, &QWebSocket::disconnected, this, [this, socket](){
m_clients.removeAll(socket);
m_authenticatedClients.remove(socket);
qCDebug(dcEvDashExperience()) << "WebSocket client disconnected" << socket->peerAddress() << "Remaining clients:" << m_clients.count();
qCDebug(dcEvDashExperience()) << "WebSocket client disconnected" << socket->peerAddress().toString() << "Remaining clients:" << m_clients.count();
socket->deleteLater();
});
m_clients.append(socket);
m_authenticatedClients.insert(socket, QString());
qCDebug(dcEvDashExperience()) << "WebSocket client connected" << socket->peerAddress() << "Total clients:" << m_clients.count();
qCDebug(dcEvDashExperience()) << "WebSocket client connected" << socket->peerAddress().toString() << "Total clients:" << m_clients.count();
});
connect(m_webSocketServer, &QWebSocketServer::acceptError, this, [this](QAbstractSocket::SocketError error) {
@ -108,7 +108,7 @@ bool EvDashEngine::startWebSocket(quint16 port)
m_webSocketServer->close();
}
const bool listening = m_webSocketServer->listen(QHostAddress::Any, port);
const bool listening = m_webSocketServer->listen(QHostAddress::AnyIPv4, port);
if (listening) {
qCDebug(dcEvDashExperience()) << "WebSocket server listening on" << m_webSocketServer->serverAddress() << m_webSocketServer->serverPort();
} else {