269 lines
12 KiB
JavaScript
269 lines
12 KiB
JavaScript
import { navigate } from '../router.js';
|
|
import { isLoggedIn, showToast } from '../app.js';
|
|
import { apiGet, invalidateSessionCheck, apiUrl } 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; });
|
|
}
|
|
|
|
function setButtonBusy(button, busy, busyLabel) {
|
|
if (!button) return;
|
|
if (!button.dataset.defaultLabel) {
|
|
button.dataset.defaultLabel = button.textContent.trim();
|
|
}
|
|
button.disabled = busy;
|
|
button.textContent = busy ? busyLabel : button.dataset.defaultLabel;
|
|
}
|
|
|
|
export async function loginPage() {
|
|
if (isLoggedIn()) {
|
|
try {
|
|
const data = await apiGet('session');
|
|
if (data.success && data.valid && !data.mustChangePassword && WEBSITE_ROLES.includes(data.role)) {
|
|
if (data.user) localStorage.setItem('qdb_user', data.user);
|
|
if (data.role) localStorage.setItem('qdb_role', data.role);
|
|
navigate('#/');
|
|
return;
|
|
}
|
|
} catch {
|
|
invalidateSessionCheck();
|
|
}
|
|
localStorage.removeItem('qdb_token');
|
|
localStorage.removeItem('qdb_user');
|
|
localStorage.removeItem('qdb_role');
|
|
invalidateSessionCheck();
|
|
}
|
|
|
|
const app = document.getElementById('app');
|
|
app.innerHTML = `
|
|
<div class="login-screen" role="main">
|
|
<div class="login-screen__backdrop" aria-hidden="true">
|
|
<div class="login-grid"></div>
|
|
</div>
|
|
|
|
<div class="login-screen__content">
|
|
<header class="login-brand">
|
|
<h1 class="login-brand__title">BW Schützt - NAT-AS</h1>
|
|
<p class="login-brand__subtitle">Questionnaire Management</p>
|
|
</header>
|
|
|
|
<div id="loginOptions" class="login-options">
|
|
<section class="login-card login-card--local card" aria-labelledby="login-panel-title">
|
|
<h2 id="login-panel-title" class="login-card__heading">Local account</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" name="username" autocomplete="username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<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="login-alert login-alert--error" role="alert" hidden></p>
|
|
</form>
|
|
|
|
<div id="changePwSection" class="login-change" hidden>
|
|
<hr>
|
|
<p>You must change your password before continuing.</p>
|
|
<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">
|
|
</div>
|
|
<div class="form-group">
|
|
<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 and continue</button>
|
|
<p id="changePwError" class="login-alert login-alert--error" role="alert" hidden></p>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="keycloakLoginSection" class="login-card login-card--sso card" aria-labelledby="keycloak-panel-title">
|
|
<h2 id="keycloak-panel-title" class="login-card__heading">University login</h2>
|
|
<p id="keycloakPanelSubtitle" class="login-card__lead">Use your University Konstanz credentials.</p>
|
|
<div class="login-sso">
|
|
<div class="login-sso__logo" aria-hidden="true">
|
|
<img
|
|
src="media/uni-logo.png"
|
|
alt=""
|
|
onerror="this.hidden=true; this.parentElement.classList.add('login-sso__logo--fallback');"
|
|
>
|
|
<span>Universität Konstanz</span>
|
|
</div>
|
|
<button id="keycloakLoginBtn" type="button" class="btn btn-block login-sso__button" disabled>
|
|
Log in with University Konstanz
|
|
</button>
|
|
<p id="keycloakLoginError" class="login-alert login-alert--error" role="alert" hidden></p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<p class="login-card__footnote">Counselors use the mobile app.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
let pendingUsername = '';
|
|
let pendingTempToken = '';
|
|
|
|
const keycloakSection = document.getElementById('keycloakLoginSection');
|
|
const keycloakBtn = document.getElementById('keycloakLoginBtn');
|
|
const keycloakErr = document.getElementById('keycloakLoginError');
|
|
let keycloakLoginUrl = '';
|
|
|
|
apiGet('auth/keycloak-config')
|
|
.then((data) => {
|
|
if (!data.success || !data.enabled) {
|
|
keycloakBtn.textContent = 'University login unavailable';
|
|
return;
|
|
}
|
|
keycloakLoginUrl = data.loginUrl ? apiUrl(data.loginUrl) : apiUrl('auth/keycloak-login');
|
|
keycloakBtn.textContent = `Log in with ${data.displayName || 'University Konstanz'}`;
|
|
keycloakBtn.disabled = false;
|
|
})
|
|
.catch(() => {
|
|
keycloakBtn.textContent = 'University login unavailable';
|
|
});
|
|
|
|
keycloakBtn.addEventListener('click', () => {
|
|
keycloakErr.hidden = true;
|
|
if (!keycloakLoginUrl) {
|
|
keycloakErr.textContent = 'University login is not available.';
|
|
keycloakErr.hidden = false;
|
|
return;
|
|
}
|
|
setButtonBusy(keycloakBtn, true, 'Redirecting...');
|
|
window.location.assign(keycloakLoginUrl);
|
|
});
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const errEl = document.getElementById('loginError');
|
|
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(apiUrl('auth/login'), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-QDB-Client': 'web',
|
|
},
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
const json = await res.json();
|
|
if (!json.ok) {
|
|
const code = json.error?.code || '';
|
|
let msg = json.error?.message || 'Login failed';
|
|
if (res.status === 429 || code === 'RATE_LIMITED') {
|
|
const retry = res.headers.get('Retry-After');
|
|
if (retry) {
|
|
msg += ` Try again in about ${retry} seconds.`;
|
|
}
|
|
}
|
|
errEl.textContent = msg;
|
|
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.hidden = false;
|
|
return;
|
|
}
|
|
if (d.mustChangePassword) {
|
|
pendingUsername = username;
|
|
pendingTempToken = d.token;
|
|
document.getElementById('loginForm').hidden = true;
|
|
document.getElementById('changePwSection').hidden = false;
|
|
keycloakSection.hidden = true;
|
|
document.getElementById('login-panel-title').textContent = 'New password';
|
|
document.getElementById('loginPanelSubtitle').textContent = pendingUsername;
|
|
document.getElementById('newPw').focus();
|
|
return;
|
|
}
|
|
localStorage.setItem('qdb_token', d.token);
|
|
localStorage.setItem('qdb_user', d.user);
|
|
localStorage.setItem('qdb_role', d.role);
|
|
invalidateSessionCheck();
|
|
navigate('#/');
|
|
} catch (err) {
|
|
errEl.textContent = err.message;
|
|
errEl.hidden = false;
|
|
} finally {
|
|
setFormBusy('loginForm', false, 'Signing in…');
|
|
}
|
|
});
|
|
|
|
document.getElementById('changePwForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const errEl = document.getElementById('changePwError');
|
|
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.hidden = false;
|
|
return;
|
|
}
|
|
const oldPw = document.getElementById('password').value;
|
|
|
|
setFormBusy('changePwForm', true, 'Saving…');
|
|
try {
|
|
const headers = {
|
|
'Content-Type': 'application/json',
|
|
'X-QDB-Client': 'web',
|
|
};
|
|
if (pendingTempToken) {
|
|
headers['Authorization'] = `Bearer ${pendingTempToken}`;
|
|
}
|
|
const res = await fetch(apiUrl('auth/change-password'), {
|
|
method: 'POST',
|
|
headers,
|
|
body: JSON.stringify({ username: pendingUsername, old_password: oldPw, new_password: newPw }),
|
|
});
|
|
const json = await res.json();
|
|
if (!json.ok) {
|
|
errEl.textContent = json.error?.message || 'Password change failed';
|
|
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.hidden = false;
|
|
return;
|
|
}
|
|
localStorage.setItem('qdb_token', d.token);
|
|
localStorage.setItem('qdb_user', d.user);
|
|
localStorage.setItem('qdb_role', d.role);
|
|
invalidateSessionCheck();
|
|
showToast('Password changed successfully', 'success');
|
|
navigate('#/');
|
|
} catch (err) {
|
|
errEl.textContent = err.message;
|
|
errEl.hidden = false;
|
|
} finally {
|
|
setFormBusy('changePwForm', false, 'Saving…');
|
|
}
|
|
});
|
|
}
|