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

preparing for keycloak authentication
Some checks failed
PHPUnit / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
tom.hempel
2026-06-29 11:31:53 +02:00
parent cecaf26c85
commit 9bd9d9653c
8 changed files with 540 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,15 @@ function setFormBusy(formId, busy, busyLabel) {
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 {
@ -40,8 +49,6 @@ export async function loginPage() {
app.innerHTML = `
<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>
@ -51,42 +58,63 @@ export async function loginPage() {
<p class="login-brand__subtitle">Questionnaire Management</p>
</header>
<div class="login-card card">
<h2 id="login-panel-title" class="login-card__heading">Sign in</h2>
<p id="loginPanelSubtitle" class="login-card__lead">Admin or supervisor account.</p>
<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">
<form id="loginForm" class="login-form" autocomplete="on">
<div class="form-group">
<label for="newPw">New password</label>
<input type="password" id="newPw" autocomplete="new-password" required minlength="6">
<label for="username">Username</label>
<input type="text" id="username" name="username" autocomplete="username" required>
</div>
<div class="form-group">
<label for="newPwConfirm">Confirm password</label>
<input type="password" id="newPwConfirm" autocomplete="new-password" required minlength="6">
<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">Change and continue</button>
<p id="changePwError" class="login-alert login-alert--error" role="alert" hidden></p>
<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>
<p class="login-card__footnote">Counselors use the mobile app.</p>
<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&auml;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>
`;
@ -94,6 +122,36 @@ export async function loginPage() {
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');
@ -136,6 +194,7 @@ export async function loginPage() {
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();