feat: YOUreka Tools express app — landing page + fpagent enrollment wizard
- tools/: express host (hardcoded config, YOUreka Auth cookie session, OpenFGA domain filtering with 5-min cache, a2loft proxies) - /fingerprint wizard: domain picker, two-finger capture via fpagent Socket.IO, OTP-validated lookup/save, domain refresh control - node --test suite (27 tests, fake portal/PocketBase/a2loft upstreams) - Dockerfile (node:22-alpine, non-root, healthcheck) - README rewritten; node_modules gitignored Field-verified end to end: portal login, permitted-domain filtering, real U.are.U 4500 captures, cancel-preserves-capture, a2loft save.
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Fingerprint Agent · YOUreka Tools</title>
|
||||
<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='6' fill='%233b4fd8'/><path d='M12 5a6 6 0 0 0-6 6c0 2.6.8 4.1 1.5 5.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M15.5 19a7.5 7.5 0 0 0 3-9.7A6 6 0 0 0 7.1 7.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M9.5 18.5a5.5 5.5 0 0 1-.8-7.6 3.8 3.8 0 0 1 7.2 1.5 4.3 4.3 0 0 1-3.4 4.6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>">
|
||||
</head>
|
||||
<body class="app">
|
||||
<div id="app">
|
||||
<nav class="nav">
|
||||
<div class="container">
|
||||
<a class="brand" href="/">
|
||||
<span class="brand-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a8 8 0 0 0-8 8c0 3.5 1 5.5 2 7"/><path d="M16 21a10 10 0 0 0 4-13 8 8 0 0 0-15.7-1"/><path d="M8 21a8 8 0 0 1-1-11 5 5 0 0 1 9.7 1.4A6 6 0 0 1 12 17"/><path d="M12 21a4 4 0 0 0 4-4 4 4 0 0 0-1.2-2.9"/></svg>
|
||||
</span>
|
||||
YOUreka <small>Tools</small>
|
||||
</a>
|
||||
<div class="nav-right" v-cloak v-if="session">
|
||||
<span class="badge-soft" v-bind:class="agent.connected ? 'badge-ok badge-live' : 'badge-err'" v-bind:title="agent.version ? 'fpagent ' + agent.version : ''">
|
||||
<span class="dot"></span>{{ agent.connected ? 'Agent connected' : 'Agent offline' }}
|
||||
</span>
|
||||
<span class="user-chip">
|
||||
<span class="avatar">{{ initials }}</span>
|
||||
{{ session.firstName || session.phone }}
|
||||
</span>
|
||||
<a class="linklike" href="/auth/logout">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container" v-cloak v-if="session">
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h1>Fingerprint Agent</h1>
|
||||
<p class="sub">
|
||||
Enrollment wizard for staff fingerprints on this laptop
|
||||
<span v-if="agent.version" class="faint">· fpagent {{ agent.version }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert-soft" v-if="pageError">{{ pageError }}</div>
|
||||
|
||||
<!-- Step 1 · locate profile -->
|
||||
<section class="card panel">
|
||||
<div class="panel-head">
|
||||
<span class="step-chip">1</span>
|
||||
<h2>Locate profile</h2>
|
||||
<span class="hint" v-if="domainsLastCheckedLabel">Permissions checked {{ domainsLastCheckedLabel }}</span>
|
||||
</div>
|
||||
|
||||
<div class="row-gap" style="align-items:flex-end;">
|
||||
<div class="flex-fill" style="min-width:220px;">
|
||||
<label for="domain">Domain</label>
|
||||
<select id="domain" class="form-control" v-model="domain">
|
||||
<option v-for="d in session.domains" v-bind:key="d.code" v-bind:value="d.code">{{ d.name }} ({{ d.code }})</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-fill" style="min-width:170px;">
|
||||
<label for="reference">Staff reference</label>
|
||||
<input id="reference" class="form-control" v-model.trim="reference" v-on:keyup.enter="lookup" placeholder="e.g. UC/0231">
|
||||
</div>
|
||||
<div style="min-width:130px; max-width:170px;">
|
||||
<label for="otpLookup">OTP</label>
|
||||
<input id="otpLookup" class="form-control" v-model.trim="otpLookup" v-on:keyup.enter="lookup" autocomplete="one-time-code">
|
||||
</div>
|
||||
<button class="btn btn-primary" v-bind:disabled="!canLookup" v-on:click="lookup">
|
||||
<span v-if="!busy.lookup">Get details</span>
|
||||
<span v-else>Checking…</span>
|
||||
</button>
|
||||
<button class="btn btn-ghost" v-bind:disabled="!refreshEnabled" v-on:click="refreshDomains"
|
||||
v-bind:title="refreshEnabled ? 'Re-check which domains you may capture for' : 'Permissions were checked recently — refresh unlocks ' + refreshEtaLabel">
|
||||
<span v-if="!refreshing">Refresh domains</span>
|
||||
<span v-else>Refreshing…</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="faint mt-1" v-if="!session.domains.length">
|
||||
You are not permitted to capture fingerprints for any domain. Contact your domain administrator if you believe this is a mistake.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Step 2 · capture -->
|
||||
<section class="card panel" v-if="staff">
|
||||
<div class="panel-head">
|
||||
<span class="step-chip">2</span>
|
||||
<h2>Capture fingerprints</h2>
|
||||
<span class="hint">Two fingers are required · place the finger on the scanner each scan</span>
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<div><dt>Name</dt><dd>{{ staff.name }}</dd></div>
|
||||
<div><dt>Reference</dt><dd>{{ staff.reference }}</dd></div>
|
||||
<div><dt>Domain reference</dt><dd>{{ staff.domainReference }}</dd></div>
|
||||
<div><dt>Rank</dt><dd>{{ staff.domainRankDescription }}</dd></div>
|
||||
<div><dt>Prior enrollments</dt><dd>{{ staff.fingerPrintCaptureCount }}</dd></div>
|
||||
</dl>
|
||||
|
||||
<div class="finger-grid mt-2">
|
||||
<div class="finger" v-for="(label, finger) in fingerLabels" v-bind:key="finger"
|
||||
v-bind:class="{ capturing: capturing === finger, done: fingers[finger].status === 'done' }">
|
||||
<div class="finger-head">
|
||||
<h3>{{ label }}</h3>
|
||||
<span class="badge-soft" v-bind:class="fingerBadge(finger).cls">{{ fingerBadge(finger).text }}</span>
|
||||
</div>
|
||||
<div class="progress" v-if="fingers[finger].status === 'scanning'">
|
||||
<div class="progress-bar striped" v-bind:style="{ width: progressPct(fingers[finger].stage) }"></div>
|
||||
</div>
|
||||
<p class="meta" v-if="fingers[finger].status === 'scanning'">Scan {{ Math.min(fingers[finger].stage, maxStage) }} of {{ maxStage }} — place the {{ label.toLowerCase() }} on the scanner.</p>
|
||||
<p class="meta" v-if="fingers[finger].status === 'done'">Enrollment ID <strong>{{ fingers[finger].id }}</strong></p>
|
||||
<p class="meta" v-if="fingers[finger].status === 'failed'">The last attempt failed. You can try again.</p>
|
||||
|
||||
<div class="row-gap mt-1">
|
||||
<button class="btn btn-primary" v-if="fingers[finger].status !== 'done'" v-bind:disabled="capturing !== null" v-on:click="capture(finger)">
|
||||
{{ fingers[finger].status === 'failed' ? 'Retry capture' : 'Capture fingerprint' }}
|
||||
</button>
|
||||
<button class="btn btn-ghost" v-if="fingers[finger].status === 'done'" v-bind:disabled="capturing !== null" v-on:click="capture(finger)">
|
||||
Recapture
|
||||
</button>
|
||||
<button class="btn btn-danger-ghost" v-if="capturing === finger" v-on:click="cancelCapture">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Step 3 · save -->
|
||||
<section class="card panel" v-if="bothCaptured">
|
||||
<div class="panel-head">
|
||||
<span class="step-chip">3</span>
|
||||
<h2>Save enrollment</h2>
|
||||
<span class="hint">Both fingerprints will be saved for {{ staff ? staff.name : '' }} ({{ reference }})</span>
|
||||
</div>
|
||||
<div class="row-gap" style="align-items:flex-end;">
|
||||
<div style="min-width:170px; max-width:220px;">
|
||||
<label for="otpSave">OTP</label>
|
||||
<input id="otpSave" class="form-control" v-model.trim="otpSave" autocomplete="one-time-code">
|
||||
</div>
|
||||
<button class="btn btn-primary" v-bind:disabled="!canSave" v-on:click="save">
|
||||
<span v-if="!busy.save">Save fingerprints</span>
|
||||
<span v-else>Saving…</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<main class="container" v-cloak v-if="loading && !session">
|
||||
<div class="narrow center-v">
|
||||
<div class="card panel" style="text-align:center;">Loading your session…</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="foot" v-cloak v-if="session">
|
||||
<div class="container">
|
||||
<span>Capture agent <strong>{{ agent.captureAgentId || 'connecting…' }}</strong></span>
|
||||
<span>Signed in as {{ session.phone }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||
<script src="/assets/fp/app.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user