jessikitty/visitor-signin
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visitor sign in kiosk: multi-site, badge printing, WWCC expiry warnings, admin accounts with 2FA

Browse Source
This commit is contained in:
jessikitty
2026-08-31 14:54:17 +10:00
parent b23ad422d0
commit 14678e13e8
8 changed files with 463 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.html
+63 -52
View File
@@ -9,67 +9,78 @@
<body>
<!-- ------------------------------------------------------------ login -->
<div id="login" class="login" hidden>
<div class="login-card">
<h1 id="login-heading">Visitor admin</h1>
<div id="login" class="auth" hidden>
<div class="auth-card">
<header class="auth-head">
<button type="button" class="auth-back" id="auth-back" hidden aria-label="Go back">&#8592;</button>
<div class="auth-rail" id="auth-rail" hidden></div>
<h1 id="auth-title">Visitor admin</h1>
<p class="auth-sub" id="auth-subtitle"></p>
</header>
<form class="login-step" id="step-password">
<label>
<span>Email address</span>
<input type="email" id="login-email" autocomplete="username" autocapitalize="none">
</label>
<label>
<span>Password</span>
<input type="password" id="login-password" autocomplete="current-password">
</label>
<p class="hint" id="domain-rule" hidden></p>
<button type="submit">Continue</button>
</form>
<div class="auth-body" id="auth-body">
<form class="auth-screen" id="step-password">
<label>
<span>Email address</span>
<input type="email" id="login-email" autocomplete="username" autocapitalize="none">
</label>
<label>
<span>Password</span>
<input type="password" id="login-password" autocomplete="current-password">
</label>
<p class="hint" id="domain-rule" hidden></p>
<button type="submit">Continue</button>
</form>
<form class="login-step" id="step-2fa" hidden>
<p class="hint" id="twofa-intro"></p>
<div id="twofa-setup" hidden>
<img id="twofa-qr" alt="Two factor setup QR code" width="200" height="200">
<p class="hint">Can't scan it? Enter this key by hand:<br><code id="twofa-secret"></code></p>
<form class="auth-screen" id="step-2fa" hidden>
<div id="twofa-setup" hidden>
<img id="twofa-qr" alt="Two factor setup QR code" width="180" height="180">
<details class="auth-details">
<summary>Can't scan it?</summary>
<p class="hint">Enter this key in your authenticator app by hand:</p>
<p><code id="twofa-secret"></code></p>
</details>
</div>
<label>
<span id="twofa-label">6 digit code</span>
<input id="twofa-code" inputmode="numeric" autocomplete="one-time-code" maxlength="12">
</label>
<button type="submit">Verify</button>
</form>
<div class="auth-screen" id="step-recovery" hidden>
<ul class="recovery" id="recovery-list"></ul>
<div class="auth-row">
<button type="button" class="secondary" id="recovery-copy">Copy codes</button>
<button type="button" id="recovery-done">I've saved them</button>
</div>
</div>
<label>
<span id="twofa-label">6 digit code</span>
<input id="twofa-code" inputmode="numeric" autocomplete="one-time-code" maxlength="12">
</label>
<button type="submit">Verify</button>
<button type="button" class="link-quiet" id="twofa-cancel">Start again</button>
</form>
<div class="login-step" id="step-recovery" hidden>
<p class="hint">Save these recovery codes somewhere safe. Each one works once, if you ever
lose the phone with your authenticator app on it.</p>
<ul class="recovery" id="recovery-list"></ul>
<button type="button" id="recovery-done">I've saved them</button>
</div>
<form class="auth-screen" id="step-newpassword" hidden>
<label>
<span>Current password</span>
<input type="password" id="pw-current" autocomplete="current-password">
</label>
<label>
<span>New password</span>
<input type="password" id="pw-new" autocomplete="new-password">
</label>
<label>
<span>New password again</span>
<input type="password" id="pw-again" autocomplete="new-password">
</label>
<p class="hint">At least 12 characters, with upper and lower case and a number.</p>
<button type="submit">Save and continue</button>
</form>
<form class="login-step" id="step-newpassword" hidden>
<p class="hint">Set a password only you know before you continue.</p>
<label>
<span>Current password</span>
<input type="password" id="pw-current" autocomplete="current-password">
</label>
<label>
<span>New password</span>
<input type="password" id="pw-new" autocomplete="new-password">
</label>
<label>
<span>New password again</span>
<input type="password" id="pw-again" autocomplete="new-password">
</label>
<button type="submit">Save and continue</button>
</form>
<div class="login-step" id="step-setup" hidden>
<p class="hint" id="setup-message"></p>
<div class="auth-screen" id="step-setup" hidden>
<p class="hint" id="setup-message"></p>
</div>
</div>
<p class="err" id="login-error" hidden></p>
</div>
<p class="auth-foot">Created by: Jess Rogerson (yelling commands at Claude.AI)</p>
</div>
<!-- ---------------------------------------------------------- console -->