86 lines
3.0 KiB
HTML
86 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Sign in · Infosec</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="auth-wrap">
|
|
<div class="auth-hero">
|
|
<div>
|
|
<div class="auth-logo"><img src="/assets/infosec-logo.png" alt="Infosec"></div>
|
|
<h1 class="visually-hidden">Infosec</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="auth-panel">
|
|
<div class="auth-form">
|
|
<!-- Step 1: credentials -->
|
|
<div id="step-cred">
|
|
<h2>Sign in</h2>
|
|
<p class="sub">Use your Infosec account to continue.</p>
|
|
<div class="field">
|
|
<label>Username or email</label>
|
|
<input type="text" id="username" autocomplete="username" autofocus>
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password" id="password" autocomplete="current-password">
|
|
</div>
|
|
<button class="btn btn-primary" id="loginBtn">Sign in</button>
|
|
<div class="err-line" id="err"></div>
|
|
</div>
|
|
|
|
<!-- Step 2: MFA -->
|
|
<div id="step-mfa" style="display:none">
|
|
<h2>Two-factor code</h2>
|
|
<p class="sub">Enter the 6-digit code from your authenticator app.</p>
|
|
<div class="field">
|
|
<input type="text" id="otp" class="otp-input" inputmode="numeric" maxlength="6" placeholder="••••••">
|
|
</div>
|
|
<button class="btn btn-primary" id="verifyBtn">Verify & sign in</button>
|
|
<div class="err-line" id="err2"></div>
|
|
<p class="hint" style="margin-top:14px"><a href="#" id="backLink">← Use a different account</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/app.js"></script>
|
|
<script>
|
|
const $ = (id) => document.getElementById(id);
|
|
let creds = {};
|
|
|
|
async function doLogin(token) {
|
|
$('err').textContent = ''; $('err2').textContent = '';
|
|
try {
|
|
const body = { username: creds.username, password: creds.password };
|
|
if (token) body.token = token;
|
|
const r = await api('/api/auth/login', { method: 'POST', body });
|
|
if (r.mfa_required) {
|
|
$('step-cred').style.display = 'none';
|
|
$('step-mfa').style.display = 'block';
|
|
$('otp').focus();
|
|
return;
|
|
}
|
|
location.href = '/view-data.html';
|
|
} catch (e) {
|
|
(token ? $('err2') : $('err')).textContent = e.message;
|
|
}
|
|
}
|
|
|
|
$('loginBtn').onclick = () => {
|
|
creds = { username: $('username').value.trim(), password: $('password').value };
|
|
if (!creds.username || !creds.password) { $('err').textContent = 'Enter your username and password.'; return; }
|
|
doLogin();
|
|
};
|
|
$('password').addEventListener('keydown', (e) => { if (e.key === 'Enter') $('loginBtn').click(); });
|
|
$('verifyBtn').onclick = () => doLogin($('otp').value.trim());
|
|
$('otp').addEventListener('keydown', (e) => { if (e.key === 'Enter') $('verifyBtn').click(); });
|
|
$('backLink').onclick = (e) => { e.preventDefault(); location.reload(); };
|
|
</script>
|
|
</body>
|
|
</html>
|