tomh104/nat-as-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

minor styling changes
Some checks failed
PHPUnit / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Tom Hempel
2026-06-14 17:56:17 +02:00
parent 71956c0927
commit 6ae29f1648
3 changed files with 632 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

652
website/css/style.css
View File

File diff suppressed because it is too large Load Diff

3
website/js/app.js
View File

@ -104,6 +104,8 @@ function updateNav() {
const nav = document.getElementById('mainNav');
const userInfo = document.getElementById('userInfo');
document.body.classList.toggle('logged-in', isLoggedIn());
const hash = window.location.hash.slice(1) || '/';
document.body.classList.toggle('login-active', hash === '/login' || hash.startsWith('/login?'));
if (isLoggedIn()) {
nav.style.display = '';
const role = getRole();
@ -117,7 +119,6 @@ function updateNav() {
});
// Highlight active nav link
const hash = window.location.hash.slice(1) || '/';
document.querySelectorAll('.sidebar-nav a').forEach(a => {
const href = a.getAttribute('href').slice(1);
let active = hash === href;

85
website/js/pages/login.js
View File

@ -4,6 +4,19 @@ import { apiGet, invalidateSessionCheck } from '../api.js';
const WEBSITE_ROLES = ['admin', 'supervisor'];
function setFormBusy(formId, busy, busyLabel) {
const form = document.getElementById(formId);
if (!form) return;
const btn = form.querySelector('button[type="submit"]');
if (!btn) return;
if (!btn.dataset.defaultLabel) {
btn.dataset.defaultLabel = btn.textContent.trim();
}
btn.disabled = busy;
btn.textContent = busy ? busyLabel : btn.dataset.defaultLabel;
form.querySelectorAll('input').forEach((el) => { el.disabled = busy; });
}
export async function loginPage() {
if (isLoggedIn()) {
try {
@ -25,27 +38,40 @@ export async function loginPage() {
const app = document.getElementById('app');
app.innerHTML = `
<div class="login-wrapper">
<div class="login-screen" role="main">
<div class="login-screen__backdrop" aria-hidden="true">
<div class="login-orb login-orb--a"></div>
<div class="login-orb login-orb--b"></div>
<div class="login-grid"></div>
</div>
<div class="login-screen__content">
<header class="login-brand">
<h1 class="login-brand__title">BW Sch&uuml;tzt - NAT-AS</h1>
<p class="login-brand__subtitle">Questionnaire Management</p>
</header>
<div class="login-card card">
<h1>BW Sch&uuml;tzt - NAT-AS</h1>
<p class="subtitle">Questionnaire Management</p>
<p class="login-privacy-note">Counselor app stores interview answers encrypted on device; data shown here is loaded from the server after upload.</p>
<form id="loginForm">
<h2 id="login-panel-title" class="login-card__heading">Sign in</h2>
<p id="loginPanelSubtitle" class="login-card__lead">Admin or supervisor account.</p>
<form id="loginForm" class="login-form" autocomplete="on">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" autocomplete="username" required>
<input type="text" id="username" name="username" autocomplete="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" autocomplete="current-password" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Log in</button>
<p id="loginError" class="error-text" style="display:none"></p>
<p id="loginError" class="login-alert login-alert--error" role="alert" hidden></p>
</form>
<div id="changePwSection" style="display:none">
<div id="changePwSection" class="login-change" hidden>
<hr>
<p>You must change your password before continuing.</p>
<form id="changePwForm">
<form id="changePwForm" class="login-form">
<div class="form-group">
<label for="newPw">New password</label>
<input type="password" id="newPw" autocomplete="new-password" required minlength="6">
@ -54,10 +80,13 @@ export async function loginPage() {
<label for="newPwConfirm">Confirm password</label>
<input type="password" id="newPwConfirm" autocomplete="new-password" required minlength="6">
</div>
<button type="submit" class="btn btn-primary btn-block">Change &amp; continue</button>
<p id="changePwError" class="error-text" style="display:none"></p>
<button type="submit" class="btn btn-primary btn-block">Change and continue</button>
<p id="changePwError" class="login-alert login-alert--error" role="alert" hidden></p>
</form>
</div>
<p class="login-card__footnote">Counselors use the mobile app.</p>
</div>
</div>
</div>
`;
@ -68,10 +97,11 @@ export async function loginPage() {
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const errEl = document.getElementById('loginError');
errEl.style.display = 'none';
errEl.hidden = true;
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
setFormBusy('loginForm', true, 'Signing in…');
try {
const res = await fetch('../api/auth/login', {
method: 'POST',
@ -92,20 +122,23 @@ export async function loginPage() {
}
}
errEl.textContent = msg;
errEl.style.display = '';
errEl.hidden = false;
return;
}
const d = json.data;
if (d.role === 'coach') {
errEl.textContent = 'Counselor accounts can only sign in through the mobile app.';
errEl.style.display = '';
errEl.hidden = false;
return;
}
if (d.mustChangePassword) {
pendingUsername = username;
pendingTempToken = d.token;
document.getElementById('loginForm').style.display = 'none';
document.getElementById('changePwSection').style.display = '';
document.getElementById('loginForm').hidden = true;
document.getElementById('changePwSection').hidden = false;
document.getElementById('login-panel-title').textContent = 'New password';
document.getElementById('loginPanelSubtitle').textContent = pendingUsername;
document.getElementById('newPw').focus();
return;
}
localStorage.setItem('qdb_token', d.token);
@ -115,22 +148,26 @@ export async function loginPage() {
navigate('#/');
} catch (err) {
errEl.textContent = err.message;
errEl.style.display = '';
errEl.hidden = false;
} finally {
setFormBusy('loginForm', false, 'Signing in…');
}
});
document.getElementById('changePwForm').addEventListener('submit', async (e) => {
e.preventDefault();
const errEl = document.getElementById('changePwError');
errEl.style.display = 'none';
errEl.hidden = true;
const newPw = document.getElementById('newPw').value;
const confirm = document.getElementById('newPwConfirm').value;
if (newPw !== confirm) {
errEl.textContent = 'Passwords do not match';
errEl.style.display = '';
errEl.hidden = false;
return;
}
const oldPw = document.getElementById('password').value;
setFormBusy('changePwForm', true, 'Saving…');
try {
const headers = {
'Content-Type': 'application/json',
@ -147,13 +184,13 @@ export async function loginPage() {
const json = await res.json();
if (!json.ok) {
errEl.textContent = json.error?.message || 'Password change failed';
errEl.style.display = '';
errEl.hidden = false;
return;
}
const d = json.data;
if (d.role === 'coach') {
errEl.textContent = 'Counselor accounts can only sign in through the mobile app.';
errEl.style.display = '';
errEl.hidden = false;
return;
}
localStorage.setItem('qdb_token', d.token);
@ -164,7 +201,9 @@ export async function loginPage() {
navigate('#/');
} catch (err) {
errEl.textContent = err.message;
errEl.style.display = '';
errEl.hidden = false;
} finally {
setFormBusy('changePwForm', false, 'Saving…');
}
});
}