133 lines
4.9 KiB
HTML
133 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>First-time setup · 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>Welcome to Infosec</h1>
|
|||
|
|
<p>Let's create the administrator account for this installation. This only happens once.</p>
|
|||
|
|
<div class="feat">
|
|||
|
|
<div>%SHIELD% This account has full administrative rights</div>
|
|||
|
|
<div>%CHECK% You can add two-factor authentication right after</div>
|
|||
|
|
<div>%LOGS% Everything from here on is recorded in the audit log</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="foot">© 2026 Martinhal IT - Joao Vaz - Version 2.3</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="auth-panel">
|
|||
|
|
<div class="auth-form">
|
|||
|
|
<div id="step-form">
|
|||
|
|
<div class="setup-badge">Step 1 of 1 · First-time setup</div>
|
|||
|
|
<h2>Create administrator</h2>
|
|||
|
|
<p class="sub">These are the credentials you will use to sign in from now on.</p>
|
|||
|
|
|
|||
|
|
<div class="field">
|
|||
|
|
<label>Username</label>
|
|||
|
|
<input type="text" id="username" autocomplete="username" autofocus placeholder="admin">
|
|||
|
|
<span class="hint">3–32 characters. Letters, numbers, dot, underscore or hyphen.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="field">
|
|||
|
|
<label>Email address <span class="req-star">*</span></label>
|
|||
|
|
<input type="email" id="email" required autocomplete="email" placeholder="admin@yourdomain.com">
|
|||
|
|
<span class="hint">Required. Approval requests and system notifications are sent here.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="field">
|
|||
|
|
<label>Password</label>
|
|||
|
|
<input type="password" id="password" autocomplete="new-password">
|
|||
|
|
<div class="pw-meter"><span id="pwBar"></span></div>
|
|||
|
|
<span class="hint" id="pwHint">At least 10 characters, including a letter and a number.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="field">
|
|||
|
|
<label>Confirm password</label>
|
|||
|
|
<input type="password" id="confirm" autocomplete="new-password">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="btn btn-primary" id="createBtn">Create account & continue</button>
|
|||
|
|
<div class="err-line" id="err"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="step-done" style="display:none">
|
|||
|
|
<h2>All set</h2>
|
|||
|
|
<p class="sub">Your administrator account has been created and you are now signed in.</p>
|
|||
|
|
<p class="hint">Taking you to Infosec…</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="/js/app.js"></script>
|
|||
|
|
<script>
|
|||
|
|
document.querySelector('.auth-hero').innerHTML =
|
|||
|
|
document.querySelector('.auth-hero').innerHTML
|
|||
|
|
.replace('%SHIELD%', ICON.shield).replace('%CHECK%', ICON.check).replace('%LOGS%', ICON.logs);
|
|||
|
|
|
|||
|
|
const $ = (id) => document.getElementById(id);
|
|||
|
|
|
|||
|
|
// If setup was already completed (e.g. someone bookmarked this page), leave.
|
|||
|
|
(async () => {
|
|||
|
|
try {
|
|||
|
|
const s = await api('/api/setup/status');
|
|||
|
|
if (!s.needs_setup) location.href = '/login.html';
|
|||
|
|
} catch (_) { /* ignore — the server will reject the POST anyway */ }
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
// Lightweight strength indicator (guidance only; the server enforces the rules).
|
|||
|
|
function strength(p) {
|
|||
|
|
let s = 0;
|
|||
|
|
if (p.length >= 10) s++;
|
|||
|
|
if (p.length >= 14) s++;
|
|||
|
|
if (/[A-Z]/.test(p) && /[a-z]/.test(p)) s++;
|
|||
|
|
if (/[0-9]/.test(p)) s++;
|
|||
|
|
if (/[^A-Za-z0-9]/.test(p)) s++;
|
|||
|
|
return Math.min(s, 4);
|
|||
|
|
}
|
|||
|
|
$('password').addEventListener('input', () => {
|
|||
|
|
const s = strength($('password').value);
|
|||
|
|
const bar = $('pwBar');
|
|||
|
|
bar.className = 'lvl-' + s;
|
|||
|
|
bar.style.width = (s * 25) + '%';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function create() {
|
|||
|
|
$('err').textContent = '';
|
|||
|
|
const payload = {
|
|||
|
|
username: $('username').value.trim(),
|
|||
|
|
email: $('email').value.trim(),
|
|||
|
|
password: $('password').value,
|
|||
|
|
confirm: $('confirm').value,
|
|||
|
|
};
|
|||
|
|
if (!payload.email) { $('err').textContent = 'An email address is required.'; return; }
|
|||
|
|
if (!payload.username || !payload.password) {
|
|||
|
|
$('err').textContent = 'Please fill in every field.'; return;
|
|||
|
|
}
|
|||
|
|
if (payload.password !== payload.confirm) {
|
|||
|
|
$('err').textContent = 'The two passwords do not match.'; return;
|
|||
|
|
}
|
|||
|
|
$('createBtn').disabled = true;
|
|||
|
|
$('createBtn').textContent = 'Creating…';
|
|||
|
|
try {
|
|||
|
|
await api('/api/setup', { method: 'POST', body: payload });
|
|||
|
|
$('step-form').style.display = 'none';
|
|||
|
|
$('step-done').style.display = 'block';
|
|||
|
|
setTimeout(() => { location.href = '/view-data.html'; }, 1200);
|
|||
|
|
} catch (e) {
|
|||
|
|
$('err').textContent = e.message;
|
|||
|
|
$('createBtn').disabled = false;
|
|||
|
|
$('createBtn').textContent = 'Create account & continue';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$('createBtn').onclick = create;
|
|||
|
|
$('confirm').addEventListener('keydown', (e) => { if (e.key === 'Enter') create(); });
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|