YOUreka/tools-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): rebuild all tools pages on Carbon Design System web components

Browse Source 
- @carbon/web-components v2.50.0 via the IBM CDN (version-pinned);
  @carbon/styles CSS + IBM Plex Sans for tokens/typography
- landing: Carbon header + cds-tile tool cards
- fingerprint wizard: Carbon-styled form controls, cds-progress-bar scan
  progress, cds-tag badges, cds-inline-notification replacing swal
- cropper: cds-toast replacing toastr, cds-checkbox review reasons,
  cds-tag process badge; vue-croppa pad kept in the Carbon layout
- Bootstrap 4, swal, toastr and jQuery removed from all pages
- behavior frozen: same flows, endpoints, validation and copy
This commit is contained in:
adebisi-fa
2026-10-01 02:03:07 +01:00
parent 22d9ba40e3
commit 930af97f05
12 changed files with 522 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/public/assets/fp/app.js
+42 -23
View File
@@ -1,6 +1,8 @@
/* 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 */
/* global Vue, axios, io, customElements */
Vue.config.ignoredElements = [/^cds-/];
(function () {
'use strict';
@@ -25,7 +27,8 @@
staff: null,
busy: { lookup: false, save: false },
refreshing: false,
pageError: '',
notif: { show: false, kind: 'info', title: '', subtitle: '' },
notifTimer: null,
fingers: {
'right-thumb': newFinger(),
'right-index-finger': newFinger(),
@@ -78,9 +81,26 @@
})
.catch(function () { /* loadSession redirects on 401 */ });
setInterval(function () { self.tick = Date.now(); }, 1000);
// web components upgrade after first render — re-apply reactive bindings
Promise.all(
['cds-button', 'cds-tag', 'cds-progress-bar', 'cds-inline-notification'].map(function (n) {
return customElements.whenDefined(n).catch(function () {});
})
).then(function () {
self.$forceUpdate();
});
},
methods: {
showNotif: function (kind, title, subtitle, sticky) {
var self = this;
this.notif = { show: true, kind: kind, title: title, subtitle: subtitle || '' };
if (this.notifTimer) clearTimeout(this.notifTimer);
if (!sticky) {
this.notifTimer = setTimeout(function () { self.notif.show = false; }, 6000);
}
},
loadSession: function () {
var self = this;
return axios.get('/auth/session').then(function (r) {
@@ -93,7 +113,7 @@
return;
}
self.loading = false;
self.pageError = 'Could not load your session. Please refresh the page.';
self.showNotif('error', 'Session error', 'Could not load your session. Please refresh the page.', true);
});
},
@@ -108,12 +128,13 @@
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');
self.showNotif('warning', 'No permitted domains',
'You are not permitted to capture fingerprints for any domain.', true);
}
}).catch(function (err) {
var msg = (err.response && err.response.data && err.response.data.message) ||
'Could not refresh domain permissions.';
swal('Refresh failed', msg, 'error');
self.showNotif('error', 'Refresh failed', msg);
}).finally(function () {
self.refreshing = false;
});
@@ -174,12 +195,13 @@
f.status = 'failed';
f.stage = 0;
}
swal(
self.showNotif(
wasCancelling ? 'info' : 'error',
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'
? (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.')
);
});
},
@@ -220,13 +242,13 @@
{ params: { otp: this.otpLookup } }
).then(function (r) {
if (!r.data.ok) {
swal('Not found', 'Operation failed. ' + (r.data.message || '') + ' (reference ' + self.reference + ')', 'error');
self.showNotif('error', 'Not found', 'Operation failed. ' + (r.data.message || '') + ' (reference ' + self.reference + ')');
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');
self.showNotif('error', 'Lookup failed', msg);
}).finally(function () {
self.busy.lookup = false;
});
@@ -245,14 +267,15 @@
{ 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.showNotif('success', 'Enrollment saved',
'Fingerprints saved for ' + self.staff.name + ' (reference ' + self.staff.reference + ').');
self.newEnrollment();
} else {
swal('Not saved', 'Operation failed. ' + (r.data.message || ''), 'error');
self.showNotif('error', 'Not saved', 'Operation failed. ' + (r.data.message || ''));
}
}).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');
self.showNotif('error', 'Save failed', msg);
}).finally(function () {
self.busy.save = false;
});
@@ -269,18 +292,14 @@
this.prevCapture = null;
},
fingerBadge: function (finger) {
fingerTag: 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' };
case 'scanning': return { type: 'blue', text: 'Scanning' };
case 'done': return { type: 'green', text: 'Captured' };
case 'failed': return { type: 'red', text: 'Failed' };
default: return { type: 'gray', text: 'Pending' };
}
},
progressPct: function (stage) {
return Math.round((Math.min(stage, MAX_STAGE) / MAX_STAGE) * 100) + '%';
},
},
});
})();
tools/public/assets/fp/index.html
+46 -41
View File
@@ -4,10 +4,15 @@
<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="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@carbon/styles@1.69.0/css/styles.min.css">
<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>">
<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='4' fill='%230f62fe'/><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>">
<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/button.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/notification.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/progress-bar.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/tag.min.js"></script>
</head>
<body class="app">
<div id="app">
@@ -20,9 +25,8 @@
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>
<cds-tag v-bind:type="agent.connected ? 'green' : 'red'"
v-bind:title="agent.version ? 'fpagent ' + agent.version : ''">{{ agent.connected ? 'Agent connected' : 'Agent offline' }}</cds-tag>
<span class="user-chip">
<span class="avatar">{{ initials }}</span>
{{ session.firstName || session.phone }}
@@ -43,9 +47,11 @@
</div>
</div>
<div class="alert-soft" v-if="pageError">{{ pageError }}</div>
<cds-inline-notification v-if="notif.show" v-bind:kind="notif.kind" v-bind:title="notif.title"
v-bind:subtitle="notif.subtitle" hide-close-button style="margin-bottom: 1rem;">
</cds-inline-notification>
<!-- Step 1 · locate profile -->
<!-- 1 · locate profile -->
<section class="card panel">
<div class="panel-head">
<span class="step-chip">1</span>
@@ -55,36 +61,36 @@
<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">
<label class="cds--label" for="domain">Domain</label>
<select id="domain" class="cds--select-input" 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">
<label class="cds--label" for="reference">Staff reference</label>
<input id="reference" class="cds--text-input" 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">
<label class="cds--label" for="otpLookup">OTP</label>
<input id="otpLookup" class="cds--text-input" 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">
<cds-button v-bind:disabled="!canLookup" v-on:click="lookup">
<span v-if="!busy.lookup">Get details</span>
<span v-else>Checking&hellip;</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">
</cds-button>
<cds-button kind="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&hellip;</span>
</button>
</cds-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>
<cds-inline-notification v-if="!session.domains.length" kind="warning" title="No permitted domains" hide-close-button class="mt-1"
subtitle="You are not permitted to capture fingerprints for any domain. Contact your domain administrator if you believe this is a mistake.">
</cds-inline-notification>
</section>
<!-- Step 2 · capture -->
<!-- 2 · capture -->
<section class="card panel" v-if="staff">
<div class="panel-head">
<span class="step-chip">2</span>
@@ -105,29 +111,29 @@
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>
<cds-tag v-bind:type="fingerTag(finger).type">{{ fingerTag(finger).text }}</cds-tag>
</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 }} &mdash; place the {{ label.toLowerCase() }} on the scanner.</p>
<cds-progress-bar v-if="fingers[finger].status === 'scanning'" v-bind:value="Math.min(fingers[finger].stage, maxStage)"
v-bind:max="maxStage" v-bind:label="'Scan ' + Math.min(fingers[finger].stage, maxStage) + ' of ' + maxStage">
</cds-progress-bar>
<p class="meta" v-if="fingers[finger].status === 'scanning'">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)">
<cds-button 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)">
</cds-button>
<cds-button kind="secondary" 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>
</cds-button>
<cds-button kind="danger" v-if="capturing === finger" v-on:click="cancelCapture">Cancel</cds-button>
</div>
</div>
</div>
</section>
<!-- Step 3 · save -->
<!-- 3 · save -->
<section class="card panel" v-if="bothCaptured">
<div class="panel-head">
<span class="step-chip">3</span>
@@ -135,14 +141,14 @@
<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 style="min-width:150px; max-width:200px;">
<label class="cds--label" for="otpSave">OTP</label>
<input id="otpSave" class="cds--text-input" 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>
<cds-button v-bind:disabled="!canSave" v-on:click="save">
<span v-if="!busy.save">Save enrollment</span>
<span v-else>Saving&hellip;</span>
</button>
</cds-button>
</div>
</section>
</main>
@@ -162,7 +168,6 @@
<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>