v_2.3

2026-09-13 20:10:17 +01:00
parent 9b5cc30fb4
commit b192fb3f17
482 changed files with 0 additions and 48205 deletions
@@ -0,0 +1,132 @@
+<!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 &amp; 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>