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,286 @@
|
||||
/* Fingerprint Agent — enrollment wizard. Captures run through the local
|
||||
fpagent binary; artifacts are saved via the app's a2loft proxy. */
|
||||
/* global Vue, axios, swal, io */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var MAX_STAGE = 5; // the U.are.U 4500 reports five enrollment stages
|
||||
|
||||
function newFinger() {
|
||||
return { status: 'idle', stage: 0, id: '', fingerprint: '', image: '' };
|
||||
}
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
loading: true,
|
||||
session: null,
|
||||
tick: Date.now(),
|
||||
socket: null,
|
||||
agent: { connected: false, version: '', captureAgentId: '' },
|
||||
domain: '',
|
||||
reference: '',
|
||||
otpLookup: '',
|
||||
otpSave: '',
|
||||
staff: null,
|
||||
busy: { lookup: false, save: false },
|
||||
refreshing: false,
|
||||
pageError: '',
|
||||
fingers: {
|
||||
'right-thumb': newFinger(),
|
||||
'right-index-finger': newFinger(),
|
||||
},
|
||||
fingerLabels: { 'right-thumb': 'Right thumb', 'right-index-finger': 'Right index finger' },
|
||||
capturing: null, // finger currently being captured (fpagent serves one at a time)
|
||||
cancelling: false,
|
||||
prevCapture: null, // previous good capture for the finger being recaptured
|
||||
},
|
||||
|
||||
computed: {
|
||||
initials: function () {
|
||||
var n = (this.session && (this.session.firstName || this.session.phone)) || '?';
|
||||
return n.slice(0, 2).toUpperCase();
|
||||
},
|
||||
maxStage: function () { return MAX_STAGE; },
|
||||
bothCaptured: function () {
|
||||
return this.fingers['right-thumb'].status === 'done' &&
|
||||
this.fingers['right-index-finger'].status === 'done';
|
||||
},
|
||||
canLookup: function () {
|
||||
return !!(this.domain && this.reference && this.otpLookup) && !this.busy.lookup;
|
||||
},
|
||||
canSave: function () {
|
||||
return this.bothCaptured && !!this.otpSave && !this.busy.save;
|
||||
},
|
||||
refreshUnlocksAt: function () {
|
||||
var ttl = (this.session && this.session.domainCacheTtlMs) || 5 * 60 * 1000;
|
||||
return ((this.session && this.session.domainsCheckedAt) || 0) + ttl;
|
||||
},
|
||||
refreshEnabled: function () {
|
||||
return !!this.session && !this.refreshing && this.tick >= this.refreshUnlocksAt;
|
||||
},
|
||||
refreshEtaLabel: function () {
|
||||
var s = Math.max(0, Math.ceil((this.refreshUnlocksAt - this.tick) / 1000));
|
||||
var m = Math.floor(s / 60);
|
||||
return m > 0 ? 'in ' + m + ' min' : 'in ' + s + ' s';
|
||||
},
|
||||
domainsLastCheckedLabel: function () {
|
||||
if (!this.session || !this.session.domainsCheckedAt) return '';
|
||||
return new Date(this.session.domainsCheckedAt).toLocaleTimeString();
|
||||
},
|
||||
},
|
||||
|
||||
created: function () {
|
||||
var self = this;
|
||||
this.loadSession()
|
||||
.then(function () {
|
||||
self.connectAgent();
|
||||
})
|
||||
.catch(function () { /* loadSession redirects on 401 */ });
|
||||
setInterval(function () { self.tick = Date.now(); }, 1000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadSession: function () {
|
||||
var self = this;
|
||||
return axios.get('/auth/session').then(function (r) {
|
||||
self.session = r.data;
|
||||
if (self.session.domains.length) self.domain = self.session.domains[0].code;
|
||||
self.loading = false;
|
||||
}).catch(function (err) {
|
||||
if (err.response && err.response.status === 401) {
|
||||
window.location.href = '/auth/login';
|
||||
return;
|
||||
}
|
||||
self.loading = false;
|
||||
self.pageError = 'Could not load your session. Please refresh the page.';
|
||||
});
|
||||
},
|
||||
|
||||
refreshDomains: function () {
|
||||
var self = this;
|
||||
if (!this.refreshEnabled) return;
|
||||
this.refreshing = true;
|
||||
axios.post('/auth/domains/refresh').then(function (r) {
|
||||
self.session.domains = r.data.domains;
|
||||
self.session.domainsCheckedAt = r.data.domainsCheckedAt;
|
||||
if (self.session.domains.length && self.session.domains.indexOf(self.domain) < 0) {
|
||||
self.domain = self.session.domains[0].code;
|
||||
}
|
||||
if (!self.session.domains.length) {
|
||||
swal('No permitted domains', 'You are not permitted to capture fingerprints for any domain.', 'info');
|
||||
}
|
||||
}).catch(function (err) {
|
||||
var msg = (err.response && err.response.data && err.response.data.message) ||
|
||||
'Could not refresh domain permissions.';
|
||||
swal('Refresh failed', msg, 'error');
|
||||
}).finally(function () {
|
||||
self.refreshing = false;
|
||||
});
|
||||
},
|
||||
|
||||
connectAgent: function () {
|
||||
var self = this;
|
||||
this.socket = io(this.session.agentUrl, { reconnectionDelayMax: 5000 });
|
||||
|
||||
this.socket.on('connect', function () { self.agent.connected = true; });
|
||||
this.socket.on('disconnect', function () { self.agent.connected = false; });
|
||||
this.socket.on('connect_error', function () { self.agent.connected = false; });
|
||||
|
||||
this.socket.on('agent-hello', function (data) {
|
||||
self.agent.version = (data && data.version) || '';
|
||||
self.agent.captureAgentId = (data && data.captureAgentId) || '';
|
||||
});
|
||||
|
||||
this.socket.on('fprint-enroll-status', function (data) {
|
||||
if (!self.capturing) return;
|
||||
self.fingers[self.capturing].stage = (data && data.stage) || 0;
|
||||
});
|
||||
|
||||
this.socket.on('fprint-enroll-done', function (data) {
|
||||
var finger = self.capturing;
|
||||
if (!finger) return;
|
||||
var wasCancelling = self.cancelling;
|
||||
self.capturing = null;
|
||||
self.cancelling = false;
|
||||
var f = self.fingers[finger];
|
||||
|
||||
if (data && data.ok) {
|
||||
f.status = 'done';
|
||||
f.stage = MAX_STAGE;
|
||||
f.id = data.id || '';
|
||||
f.fingerprint = data.fingerprint || '';
|
||||
f.image = data.image || '';
|
||||
self.prevCapture = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Failure or cancellation. A recapture attempt that did not complete
|
||||
// restores the previous good capture instead of dropping it; a
|
||||
// cancelled first attempt returns to idle.
|
||||
var restored = self.prevCapture && self.prevCapture.finger === finger;
|
||||
if (restored) {
|
||||
var p = self.prevCapture;
|
||||
f.status = 'done';
|
||||
f.stage = MAX_STAGE;
|
||||
f.id = p.id;
|
||||
f.fingerprint = p.fingerprint;
|
||||
f.image = p.image;
|
||||
self.prevCapture = null;
|
||||
} else if (wasCancelling) {
|
||||
f.status = 'idle';
|
||||
f.stage = 0;
|
||||
} else {
|
||||
f.status = 'failed';
|
||||
f.stage = 0;
|
||||
}
|
||||
swal(
|
||||
wasCancelling ? 'Capture cancelled' : 'Capture failed',
|
||||
wasCancelling
|
||||
? (restored ? 'The previous capture for the ' + self.fingerLabels[finger].toLowerCase() + ' was kept.' : 'No changes were saved for the ' + self.fingerLabels[finger].toLowerCase() + '.')
|
||||
: (data && data.message) || 'The capture did not complete.',
|
||||
wasCancelling ? 'info' : 'error'
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
capture: function (finger) {
|
||||
if (this.capturing || !this.socket || !this.domain || !this.reference) return;
|
||||
// Preserve a previous good capture so a cancelled/failed recapture
|
||||
// can restore it instead of destroying it.
|
||||
var old = this.fingers[finger];
|
||||
this.prevCapture = old.id
|
||||
? { finger: finger, id: old.id, fingerprint: old.fingerprint, image: old.image }
|
||||
: null;
|
||||
this.fingers[finger] = newFinger();
|
||||
this.fingers[finger].status = 'scanning';
|
||||
this.capturing = finger;
|
||||
this.cancelling = false;
|
||||
this.socket.emit('fprint-enroll', {
|
||||
token: this.session.token,
|
||||
domain: this.domain,
|
||||
finger: finger,
|
||||
reference: this.reference,
|
||||
});
|
||||
},
|
||||
|
||||
cancelCapture: function () {
|
||||
if (!this.capturing || !this.socket) return;
|
||||
this.cancelling = true;
|
||||
this.socket.emit('fprint-enroll-stop', {});
|
||||
},
|
||||
|
||||
lookup: function () {
|
||||
var self = this;
|
||||
if (!this.canLookup) return;
|
||||
this.busy.lookup = true;
|
||||
axios.post(
|
||||
'/api/' + encodeURIComponent(this.domain) + '/staff/' + encodeURIComponent(this.reference),
|
||||
null,
|
||||
{ params: { otp: this.otpLookup } }
|
||||
).then(function (r) {
|
||||
if (!r.data.ok) {
|
||||
swal('Not found', 'Operation failed. ' + (r.data.message || '') + ' (reference ' + self.reference + ')', 'error');
|
||||
return;
|
||||
}
|
||||
self.staff = r.data.data;
|
||||
}).catch(function (err) {
|
||||
var msg = (err.response && err.response.data && err.response.data.message) || 'Could not reach the identity service.';
|
||||
swal('Lookup failed', msg, 'error');
|
||||
}).finally(function () {
|
||||
self.busy.lookup = false;
|
||||
});
|
||||
},
|
||||
|
||||
save: function () {
|
||||
var self = this;
|
||||
if (!this.canSave) return;
|
||||
this.busy.save = true;
|
||||
var fingerprints = Object.keys(this.fingers).map(function (finger) {
|
||||
return { finger: finger, fingerprint: self.fingers[finger].fingerprint };
|
||||
});
|
||||
axios.post(
|
||||
'/api/' + encodeURIComponent(this.domain) + '/staff/' + encodeURIComponent(this.reference) + '/fingerprints',
|
||||
{ fingerprints: fingerprints },
|
||||
{ params: { otp: this.otpSave } }
|
||||
).then(function (r) {
|
||||
if (r.data.ok) {
|
||||
swal('Saved', 'Fingerprints saved for ' + self.staff.name + ' (reference ' + self.staff.reference + ').', 'success');
|
||||
self.newEnrollment();
|
||||
} else {
|
||||
swal('Not saved', 'Operation failed. ' + (r.data.message || ''), 'error');
|
||||
}
|
||||
}).catch(function (err) {
|
||||
var msg = (err.response && err.response.data && err.response.data.message) || 'Could not reach the identity service.';
|
||||
swal('Save failed', msg, 'error');
|
||||
}).finally(function () {
|
||||
self.busy.save = false;
|
||||
});
|
||||
},
|
||||
|
||||
newEnrollment: function () {
|
||||
this.staff = null;
|
||||
this.reference = '';
|
||||
this.otpLookup = '';
|
||||
this.otpSave = '';
|
||||
this.fingers = { 'right-thumb': newFinger(), 'right-index-finger': newFinger() };
|
||||
this.capturing = null;
|
||||
this.cancelling = false;
|
||||
this.prevCapture = null;
|
||||
},
|
||||
|
||||
fingerBadge: function (finger) {
|
||||
switch (this.fingers[finger].status) {
|
||||
case 'scanning': return { cls: 'badge-brand', text: 'Scanning' };
|
||||
case 'done': return { cls: 'badge-ok', text: 'Captured' };
|
||||
case 'failed': return { cls: 'badge-err', text: 'Failed' };
|
||||
default: return { cls: 'badge-idle', text: 'Pending' };
|
||||
}
|
||||
},
|
||||
|
||||
progressPct: function (stage) {
|
||||
return Math.round((Math.min(stage, MAX_STAGE) / MAX_STAGE) * 100) + '%';
|
||||
},
|
||||
},
|
||||
});
|
||||
})();
|
||||
@@ -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>
|
||||
@@ -0,0 +1,188 @@
|
||||
/* YOUreka Tools — shared styling (Bootstrap 4 base + this overlay) */
|
||||
:root {
|
||||
--ink: #1a2340;
|
||||
--muted: #64748b;
|
||||
--faint: #94a3b8;
|
||||
--line: #e4e8f1;
|
||||
--bg: #f4f6fb;
|
||||
--surface: #ffffff;
|
||||
--brand: #3b4fd8;
|
||||
--brand-dark: #2f3eb0;
|
||||
--brand-soft: #eef1fe;
|
||||
--ok: #15803d;
|
||||
--ok-soft: #e8f7ee;
|
||||
--warn: #b45309;
|
||||
--warn-soft: #fdf3e3;
|
||||
--err: #b91c1c;
|
||||
--err-soft: #fdeaea;
|
||||
--radius: 14px;
|
||||
--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.12);
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
body.app {
|
||||
background:
|
||||
radial-gradient(1200px 400px at 80% -10%, rgba(59, 79, 216, 0.08), transparent 60%),
|
||||
var(--bg);
|
||||
color: var(--ink);
|
||||
font-size: 14.5px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
[v-cloak] { display: none; }
|
||||
|
||||
/* ── navbar ─────────────────────────────────────────────── */
|
||||
.nav {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 0.65rem 0;
|
||||
}
|
||||
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
|
||||
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink); text-decoration: none; }
|
||||
.brand:hover { text-decoration: none; color: var(--ink); }
|
||||
.brand-mark {
|
||||
width: 32px; height: 32px; border-radius: 9px;
|
||||
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
|
||||
color: #fff; display: inline-flex; align-items: center; justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.brand-mark svg { width: 18px; height: 18px; }
|
||||
.brand small { color: var(--muted); font-weight: 500; }
|
||||
.nav-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
|
||||
.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); }
|
||||
.user-chip .avatar {
|
||||
width: 26px; height: 26px; border-radius: 50%;
|
||||
background: var(--brand-soft); color: var(--brand);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── layout ─────────────────────────────────────────────── */
|
||||
main.container { flex: 1 0 auto; }
|
||||
.narrow { max-width: 560px; }
|
||||
.center-v { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; }
|
||||
.page-head { margin: 2.2rem 0 1.4rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||
.page-head h1 { font-size: 1.45rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
|
||||
.page-head .sub { color: var(--muted); margin: 0.25rem 0 0; }
|
||||
|
||||
/* ── cards ──────────────────────────────────────────────── */
|
||||
.card, .tool-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.panel { padding: 1.35rem 1.5rem; margin-bottom: 1.25rem; }
|
||||
.panel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
|
||||
.step-chip {
|
||||
width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
|
||||
background: var(--brand-soft); color: var(--brand);
|
||||
font-size: 12.5px; font-weight: 700;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.panel-head h2 { font-size: 1.02rem; font-weight: 700; margin: 0; }
|
||||
.panel-head .hint { color: var(--faint); font-size: 12.5px; margin-left: auto; }
|
||||
|
||||
/* landing tool cards */
|
||||
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
|
||||
.tool-card { display: flex; flex-direction: column; padding: 1.5rem; color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
|
||||
.tool-card:hover { text-decoration: none; color: inherit; border-color: var(--brand); transform: translateY(-2px); }
|
||||
.tool-icon {
|
||||
width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.9rem;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: var(--brand-soft); color: var(--brand);
|
||||
}
|
||||
.tool-icon svg { width: 22px; height: 22px; }
|
||||
.tool-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.3rem; }
|
||||
.tool-card p { color: var(--muted); margin: 0 0 1rem; }
|
||||
.tool-card .go { margin-top: auto; color: var(--brand); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
|
||||
/* hero */
|
||||
.hero { padding: 3.2rem 0 2.2rem; }
|
||||
.hero h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
|
||||
.hero p { color: var(--muted); max-width: 560px; margin: 0; }
|
||||
|
||||
/* ── forms ──────────────────────────────────────────────── */
|
||||
label { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 0.3rem; }
|
||||
.form-control {
|
||||
border-color: var(--line); border-radius: 10px; height: 42px;
|
||||
box-shadow: none; font-size: 14.5px; color: var(--ink);
|
||||
}
|
||||
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59, 79, 216, 0.12); }
|
||||
select.form-control { appearance: auto; }
|
||||
|
||||
/* ── buttons ────────────────────────────────────────────── */
|
||||
.btn { border-radius: 10px; font-weight: 600; font-size: 14px; padding: 0.55rem 1.1rem; border: 1px solid transparent; }
|
||||
.btn:focus { box-shadow: 0 0 0 3px rgba(59, 79, 216, 0.18); }
|
||||
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||||
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
|
||||
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
|
||||
.btn-ghost:hover { background: var(--bg); border-color: var(--faint); color: var(--ink); }
|
||||
.btn-danger-ghost { background: transparent; border-color: #f3c6c6; color: var(--err); }
|
||||
.btn-danger-ghost:hover { background: var(--err-soft); border-color: var(--err); color: var(--err); }
|
||||
.btn[disabled], .btn.disabled { opacity: 0.55; pointer-events: none; }
|
||||
.btn-block { display: flex; width: 100%; align-items: center; justify-content: center; }
|
||||
.linklike { background: none; border: none; padding: 0; color: var(--brand); font-weight: 600; cursor: pointer; font-size: 13px; }
|
||||
.linklike[disabled] { color: var(--faint); cursor: default; }
|
||||
|
||||
/* ── badges & status ────────────────────────────────────── */
|
||||
.badge-soft {
|
||||
display: inline-flex; align-items: center; gap: 0.35rem;
|
||||
border-radius: 999px; padding: 0.2rem 0.65rem;
|
||||
font-size: 12px; font-weight: 600; line-height: 1.4;
|
||||
}
|
||||
.badge-soft .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
|
||||
.badge-ok { background: var(--ok-soft); color: var(--ok); }
|
||||
.badge-warn { background: var(--warn-soft); color: var(--warn); }
|
||||
.badge-err { background: var(--err-soft); color: var(--err); }
|
||||
.badge-idle { background: #eef2f7; color: var(--muted); }
|
||||
.badge-brand { background: var(--brand-soft); color: var(--brand); }
|
||||
.badge-live .dot { animation: pulse 1.6s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
|
||||
|
||||
/* ── details grid ───────────────────────────────────────── */
|
||||
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem 1.4rem; margin: 0; }
|
||||
.details > div { min-width: 0; }
|
||||
.details dt { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.details dd { margin: 0.15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
|
||||
|
||||
/* ── finger capture panels ──────────────────────────────── */
|
||||
.finger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
|
||||
@media (max-width: 720px) { .finger-grid { grid-template-columns: 1fr; } }
|
||||
.finger { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
|
||||
.finger.capturing { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59, 79, 216, 0.10); }
|
||||
.finger.done { border-color: #bfe3cd; background: #fbfefc; }
|
||||
.finger-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
|
||||
.finger-head h3 { font-size: 0.95rem; font-weight: 700; margin: 0; }
|
||||
.finger .meta { color: var(--faint); font-size: 12.5px; margin-top: 0.6rem; overflow-wrap: anywhere; }
|
||||
|
||||
.progress { height: 8px; border-radius: 999px; background: #edf0f7; overflow: hidden; }
|
||||
.progress-bar { background: var(--brand); border-radius: 999px; transition: width .25s ease; }
|
||||
.progress-bar.striped {
|
||||
background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent);
|
||||
background-size: 1rem 1rem;
|
||||
animation: stripes 0.9s linear infinite;
|
||||
}
|
||||
@keyframes stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
|
||||
|
||||
/* ── alerts ─────────────────────────────────────────────── */
|
||||
.alert-soft { border-radius: 10px; border: 1px solid var(--err-soft); background: var(--err-soft); color: var(--err); font-size: 13.5px; padding: 0.6rem 0.9rem; }
|
||||
|
||||
/* ── footer ─────────────────────────────────────────────── */
|
||||
footer.foot { flex-shrink: 0; padding: 1.4rem 0 1.8rem; color: var(--faint); font-size: 12.5px; }
|
||||
footer.foot .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||
footer.foot a { color: var(--muted); }
|
||||
|
||||
/* ── message card (auth errors) ─────────────────────────── */
|
||||
.message-card { padding: 2.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
|
||||
.message-card h1 { font-size: 1.2rem; font-weight: 700; margin: 0; }
|
||||
.message-icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.message-icon.error { background: var(--err-soft); color: var(--err); }
|
||||
.message-card .btn { margin-top: 0.5rem; min-width: 180px; }
|
||||
|
||||
.muted { color: var(--muted); }
|
||||
.faint { color: var(--faint); font-size: 12.5px; }
|
||||
.mt-1 { margin-top: 0.75rem; }
|
||||
.mt-2 { margin-top: 1.25rem; }
|
||||
.row-gap { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
|
||||
Reference in New Issue
Block a user