feat(ui): rebuild all tools pages on Carbon Design System web components
- @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:
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
created: 2026-10-01
|
||||
@@ -0,0 +1,60 @@
|
||||
# Design
|
||||
|
||||
## Context
|
||||
|
||||
Pages are Vue 2 + Bootstrap 4 via CDN with swal/toastr dialogs; behavior and
|
||||
endpoints are frozen for this change (see proposal.md). Carbon web components
|
||||
v2.50.0 are available as bundled per-component `.min.js` artifacts on IBM's CDN
|
||||
(verified: button, text-input, dropdown, notification [inline-notification +
|
||||
toast], progress-bar, tag, checkbox, textarea, tile, ui-shell, modal, loading);
|
||||
`@carbon/styles` CSS (jsdelivr) provides tokens + Carbon-styled native
|
||||
controls; IBM Plex Sans comes from Google Fonts.
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:** Carbon look across landing + both tools with zero build step;
|
||||
Vue 2 kept as the thin state layer; server untouched.
|
||||
|
||||
**Non-Goals:** Framework rewrite; UX/flow changes; self-hosting assets;
|
||||
replacing vue-croppa.
|
||||
|
||||
## Decisions
|
||||
|
||||
1. **CDN delivery, version-pinned (v2.50.0)** — same pattern as the existing
|
||||
Vue/axios CDNs; zero tooling. Self-hosting is the fallback if CDN
|
||||
availability becomes a field problem.
|
||||
2. **Hybrid controls** — true web components where Vue interacts lightly
|
||||
(cds-button click, cds-tag, cds-inline-notification, cds-toast,
|
||||
cds-progress-bar, cds-tile); Carbon-styled native controls where v-model
|
||||
matters (text inputs, selects, checkboxes, textarea use
|
||||
`cds--text-input`/`cds--select-input`/`cds--checkbox` classes from
|
||||
@carbon/styles CSS). Avoids value/event adapter friction with shadow-DOM
|
||||
inputs.
|
||||
3. **Notification models replace dialogs** — wizard: one inline-notification
|
||||
slot (`notif` state, auto-dismiss on success); cropper: a fixed
|
||||
`cds-toast` viewport fed by a `toasts` array with timed removal. Native
|
||||
`confirm()` stays for dequeue (behavior frozen).
|
||||
4. **`Vue.config.ignoredElements = [/^cds-/]`** plus a
|
||||
`customElements.whenDefined('cds-button').then($forceUpdate)` so
|
||||
pre-upgrade property bindings (disabled, progress value) re-apply after
|
||||
upgrade.
|
||||
5. **style.css rewritten on Carbon tokens** (layout helpers kept: grid, gaps,
|
||||
details grid, editor grid, croppa pad, footer).
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
- [Shadow-DOM inputs would fight Vue v-model] → native controls for fields;
|
||||
web components only for click/display surfaces.
|
||||
- [IBM CDN availability] → pinned version; self-hosting is a drop-in swap of
|
||||
the script/link URLs.
|
||||
- [Lit property set before upgrade] → forceUpdate after whenDefined; disabled
|
||||
states verified in the visual harness.
|
||||
|
||||
## Migration Plan
|
||||
|
||||
Rewrite pages/styles → visual harness screenshots (landing, wizard, cropper at
|
||||
390/768/1280) → unit tests (server untouched) → docker smoke → walkthrough.
|
||||
|
||||
## Open Questions
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,42 @@
|
||||
# Proposal: carbon-ui-redesign
|
||||
|
||||
## Why
|
||||
|
||||
The tools pages are styled with ad-hoc Bootstrap 4 overrides and ad-hoc dialogs
|
||||
(swal/toastr). Adopting the Carbon Design System gives the two tools a single
|
||||
professional design language (IBM Plex typography, Carbon components, Carbon
|
||||
tokens) consistent with the wider YOUreka ecosystem.
|
||||
|
||||
## What Changes
|
||||
|
||||
- **BREAKING (visual only)**: All three surfaces — landing, `/fingerprint`
|
||||
wizard, `/cropper` — are rebuilt on Carbon Design System web components
|
||||
(`@carbon/web-components` v2.50.0 via the IBM CDN, version-pinned) with IBM
|
||||
Plex Sans typography and Carbon tokens for layout/colors.
|
||||
- Bootstrap 4, swal, toastr and jQuery are removed from the pages; errors and
|
||||
confirmations surface as Carbon inline notifications and toasts.
|
||||
- Form fields use Carbon-styled native controls (text input, select, checkbox,
|
||||
textarea) so Vue state bindings are unchanged; buttons, tags, notifications,
|
||||
toasts, progress bar and tiles are Carbon web components.
|
||||
- **Behavior is frozen**: flows, endpoints, validation and copy stay exactly as
|
||||
they are. The vue-croppa crop pad is kept (no Carbon equivalent), framed in a
|
||||
Carbon tile/panel.
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
|
||||
(none)
|
||||
|
||||
### Modified Capabilities
|
||||
|
||||
- `tools-app`: adds a requirement that the tools UI is built on Carbon Design
|
||||
System web components with Carbon notifications.
|
||||
|
||||
## Impact
|
||||
|
||||
- Pages and `style.css` rewritten; `app.js` files adapted (notification/toast
|
||||
models replace swal/toastr calls; `Vue.config.ignoredElements` for cds-*).
|
||||
- No server-side changes; no new npm dependencies; component JS + Plex font +
|
||||
Carbon CSS delivered via CDN (IBM CDN for components, jsdelivr for
|
||||
@carbon/styles, Google Fonts for Plex).
|
||||
@@ -0,0 +1,16 @@
|
||||
# Spec Delta: tools-app
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Carbon Design System UI
|
||||
The tools pages SHALL be built on the Carbon Design System: Carbon web
|
||||
components (version-pinned via CDN) for buttons, notifications, toasts, tags,
|
||||
progress and tiles; Carbon-styled native form controls; IBM Plex Sans
|
||||
typography and Carbon color tokens for layout. Errors, confirmations and
|
||||
successes SHALL surface as Carbon notifications rather than ad-hoc alert
|
||||
dialogs.
|
||||
|
||||
#### Scenario: Pages render with Carbon components
|
||||
- **WHEN** any tools page is opened
|
||||
- **THEN** its interactive controls are Carbon components (or Carbon-styled
|
||||
native controls) and its notifications render as Carbon notifications
|
||||
@@ -0,0 +1,13 @@
|
||||
# Tasks
|
||||
|
||||
- [x] 1. Retheme `style.css` on Carbon tokens (Plex, dark header, layers,
|
||||
sharp corners); drop Bootstrap/swal/toastr/jQuery from all pages; load
|
||||
pinned Carbon CDN artifacts + Plex + @carbon/styles CSS.
|
||||
- [x] 2. Rebuild the landing page (Carbon header + cds-tile tool cards).
|
||||
- [x] 3. Rebuild the fingerprint wizard with Carbon components (inputs,
|
||||
dropdown, cds-progress-bar scan progress, cds-tag badges,
|
||||
cds-inline-notification replacing swal); verify at 390/768/1280 via the
|
||||
visual harness.
|
||||
- [x] 4. Rebuild the cropper page with Carbon components (cds-toast replacing
|
||||
toastr, cds-checkbox reasons, cds-tag); verify at 390/768/1280.
|
||||
- [x] 5. Run unit tests + docker smoke; sync/archive the change and commit.
|
||||
@@ -132,4 +132,17 @@ environment variables and SHALL NOT be stored in source.
|
||||
#### Scenario: Cropper credentials from the environment
|
||||
- **WHEN** the cropper credentials are supplied as environment variables
|
||||
- **THEN** the cropper routes use them without any change to the hardcoded
|
||||
URL/port configuration
|
||||
URL/port configuration
|
||||
|
||||
### Requirement: Carbon Design System UI
|
||||
The tools pages SHALL be built on the Carbon Design System: Carbon web
|
||||
components (version-pinned via CDN) for buttons, notifications, toasts, tags,
|
||||
progress and tiles; Carbon-styled native form controls; IBM Plex Sans
|
||||
typography and Carbon color tokens for layout. Errors, confirmations and
|
||||
successes SHALL surface as Carbon notifications rather than ad-hoc alert
|
||||
dialogs.
|
||||
|
||||
#### Scenario: Pages render with Carbon components
|
||||
- **WHEN** any tools page is opened
|
||||
- **THEN** its interactive controls are Carbon components (or Carbon-styled
|
||||
native controls) and its notifications render as Carbon notifications
|
||||
|
||||
@@ -1,32 +1,13 @@
|
||||
/* Image Cropper — review, crop, clean and save identity photos.
|
||||
Identity comes from the YOUreka session; the only operator credential is
|
||||
the save-time OTP (required by a2loft). */
|
||||
/* global Vue, axios, toastr, Croppa */
|
||||
Vue.use(Croppa);
|
||||
the save-time OTP (required by a2loft). Notifications are Carbon toasts. */
|
||||
/* global Vue, axios, Croppa, customElements */
|
||||
Vue.config.ignoredElements = [/^cds-/];
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var REVIEW_OPTIONS = [
|
||||
'IMAGE: Not in the midline of the photo frame (aligned to the left or right)',
|
||||
'IMAGE: Taken too close-up (Only head is visible, shoulders barely visible)',
|
||||
'IMAGE: Blurry ',
|
||||
'IMAGE: Improper lighting ',
|
||||
'IMAGE: Not coloured.',
|
||||
'IMAGE: Scanned photo',
|
||||
'IMAGE: Has no adequate space to allow for proper cropping ',
|
||||
'IMAGE: Not taken on a recommended background.',
|
||||
'IMAGE: Photo is a selfie',
|
||||
'DRESSING: Unacceptable dress. ',
|
||||
'HEAD: Skewed (leaning away from the midline - vertically or horizontally)',
|
||||
'EYES: Not looking into the camera (looking downward, upward, or sideward)',
|
||||
'EYES: Not properly opened',
|
||||
'EARS: Not visible ',
|
||||
'EARS: Both ears are not equally visible (face not aligned central)',
|
||||
'FACIAL EXPRESSION: NOT neutral (subject has a facial expression)',
|
||||
'GLASSES: Subject is wearing glasses ',
|
||||
'JUST WRING: Goes against almost all acceptable passport criteria.',
|
||||
'Others not specified.',
|
||||
];
|
||||
var toastSeq = 0;
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
@@ -43,12 +24,31 @@ Vue.use(Croppa);
|
||||
cleanedImage: null,
|
||||
requiresCleaning: '',
|
||||
otp: '',
|
||||
reviewOptions: REVIEW_OPTIONS.map(function (name, index) {
|
||||
return { index: index + 1, name: name };
|
||||
}),
|
||||
reviewOptions: [
|
||||
'IMAGE: Not in the midline of the photo frame (aligned to the left or right)',
|
||||
'IMAGE: Taken too close-up (Only head is visible, shoulders barely visible)',
|
||||
'IMAGE: Blurry ',
|
||||
'IMAGE: Improper lighting ',
|
||||
'IMAGE: Not coloured.',
|
||||
'IMAGE: Scanned photo',
|
||||
'IMAGE: Has no adequate space to allow for proper cropping ',
|
||||
'IMAGE: Not taken on a recommended background.',
|
||||
'IMAGE: Photo is a selfie',
|
||||
'DRESSING: Unacceptable dress. ',
|
||||
'HEAD: Skewed (leaning away from the midline - vertically or horizontally)',
|
||||
'EYES: Not looking into the camera (looking downward, upward, or sideward)',
|
||||
'EYES: Not properly opened',
|
||||
'EARS: Not visible ',
|
||||
'EARS: Both ears are not equally visible (face not aligned central)',
|
||||
'FACIAL EXPRESSION: NOT neutral (subject has a facial expression)',
|
||||
'GLASSES: Subject is wearing glasses ',
|
||||
'JUST WRING: Goes against almost all acceptable passport criteria.',
|
||||
'Others not specified.',
|
||||
].map(function (name, index) { return { index: index + 1, name: name }; }),
|
||||
selectedReviewOptions: [],
|
||||
otherReviewOption: '',
|
||||
busy: { load: false, clean: false, review: false, save: false },
|
||||
toasts: [],
|
||||
myCroppa: {},
|
||||
},
|
||||
|
||||
@@ -78,11 +78,31 @@ Vue.use(Croppa);
|
||||
return;
|
||||
}
|
||||
self.loading = false;
|
||||
toastr.error('Could not load your session. Please refresh the page.', 'Oops!');
|
||||
self.toast('error', 'Session error', 'Could not load your session. Please refresh the page.');
|
||||
});
|
||||
Promise.all(
|
||||
['cds-button', 'cds-toast', 'cds-toast-item', 'cds-tag'].map(function (n) {
|
||||
return customElements.whenDefined(n).catch(function () {});
|
||||
})
|
||||
).then(function () {
|
||||
self.$forceUpdate();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
toast: function (kind, title, caption) {
|
||||
var self = this;
|
||||
var id = ++toastSeq;
|
||||
this.toasts.push({ id: id, kind: kind, title: title, caption: caption || '' });
|
||||
setTimeout(function () {
|
||||
self.removeToast(id);
|
||||
}, 6000);
|
||||
},
|
||||
|
||||
removeToast: function (id) {
|
||||
this.toasts = this.toasts.filter(function (t) { return t.id !== id; });
|
||||
},
|
||||
|
||||
reset: function () {
|
||||
this.message = { message: { caption: null, file_url: null, domain: '' } };
|
||||
this.agent = null;
|
||||
@@ -110,7 +130,7 @@ Vue.use(Croppa);
|
||||
);
|
||||
if (!data.ok) {
|
||||
this.reset(); // nothing (more) to review — back to the load state
|
||||
toastr.error(data.message, 'Oops!');
|
||||
this.toast('info', 'No picture', data.message || 'Nothing to load.');
|
||||
return;
|
||||
}
|
||||
this.message = data.data;
|
||||
@@ -119,7 +139,7 @@ Vue.use(Croppa);
|
||||
);
|
||||
if (!image.data.ok) {
|
||||
this.reset();
|
||||
toastr.error("Couldn't load the attached image. Please try again.", 'Oops!');
|
||||
this.toast('error', 'Load failed', "Couldn't load the attached image. Please try again.");
|
||||
return;
|
||||
}
|
||||
this.message.message.file_url = image.data.data;
|
||||
@@ -133,14 +153,8 @@ Vue.use(Croppa);
|
||||
this.agent = review.data.ok ? review.data.data : null;
|
||||
}
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Operation Failed');
|
||||
this.toast('error', 'Operation Failed', message);
|
||||
} finally {
|
||||
this.reviewed = false;
|
||||
this.accepted = false;
|
||||
this.selectedReviewOptions = [];
|
||||
this.otherReviewOption = '';
|
||||
this.requiresCleaning = '';
|
||||
this.otp = '';
|
||||
this.busy.load = false;
|
||||
}
|
||||
},
|
||||
@@ -168,7 +182,7 @@ Vue.use(Croppa);
|
||||
fr.onload = function () { self.cleanedImage = fr.result; };
|
||||
fr.readAsDataURL(blob);
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Image Cleanup Failed');
|
||||
this.toast('error', 'Image Cleanup Failed', message);
|
||||
} finally {
|
||||
this.busy.clean = false;
|
||||
}
|
||||
@@ -178,7 +192,7 @@ Vue.use(Croppa);
|
||||
var self = this;
|
||||
if (!this.canReview) return;
|
||||
if (!this.accepted && this.selectedReviewOptions.length === 0 && !this.otherReviewOption) {
|
||||
toastr.error('Please indicate why this image is not good enough.', 'Operation Failed');
|
||||
this.toast('error', 'Operation Failed', 'Please indicate why this image is not good enough.');
|
||||
return;
|
||||
}
|
||||
this.busy.review = true;
|
||||
@@ -206,15 +220,15 @@ Vue.use(Croppa);
|
||||
...data,
|
||||
});
|
||||
if (!result.ok) {
|
||||
toastr.error(result.message, 'Operation Failed');
|
||||
this.toast('error', 'Operation Failed', result.message || 'Review failed.');
|
||||
return;
|
||||
}
|
||||
if (reviewMessage) {
|
||||
toastr.success('Profile owner has been notified of the review.', 'Review Sent');
|
||||
this.toast('success', 'Review Sent', 'Profile owner has been notified of the review.');
|
||||
}
|
||||
this.reset();
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Operation Failed');
|
||||
this.toast('error', 'Operation Failed', message);
|
||||
} finally {
|
||||
this.busy.review = false;
|
||||
}
|
||||
@@ -227,21 +241,19 @@ Vue.use(Croppa);
|
||||
try {
|
||||
var { data } = await axios.post('/cropper/dequeue', { message: this.message });
|
||||
if (!data.ok) {
|
||||
toastr.error(data.message, 'Not Removed');
|
||||
this.toast('error', 'Not Removed', data.message || 'Removal failed.');
|
||||
return;
|
||||
}
|
||||
toastr.success(data.message, 'Removed!');
|
||||
this.toast('success', 'Removed!', data.message || '');
|
||||
this.reset();
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Not Removed');
|
||||
this.toast('error', 'Not Removed', message);
|
||||
} finally {
|
||||
this.busy.review = false;
|
||||
}
|
||||
},
|
||||
|
||||
saveChanges: async function () {
|
||||
var self = this;
|
||||
if (!this.canSave) return;
|
||||
this.busy.save = true;
|
||||
try {
|
||||
var { data } = await axios.post(
|
||||
@@ -254,13 +266,13 @@ Vue.use(Croppa);
|
||||
}
|
||||
);
|
||||
if (!data.ok) {
|
||||
toastr.error(data.message, 'Not Saved');
|
||||
this.toast('error', 'Not Saved', data.message || 'Save failed.');
|
||||
return;
|
||||
}
|
||||
toastr.success('Picture saved for ' + this.message.message.caption, 'Saved');
|
||||
this.toast('success', 'Saved', 'Picture saved for ' + this.message.message.caption);
|
||||
this.reset();
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Not Saved');
|
||||
this.toast('error', 'Not Saved', message);
|
||||
} finally {
|
||||
this.busy.save = false;
|
||||
}
|
||||
|
||||
@@ -4,13 +4,19 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Image Cropper · YOUreka Tools</title>
|
||||
<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='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.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.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>">
|
||||
<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/tag.min.js"></script>
|
||||
<style>
|
||||
.croppa-pad { border: 1px dashed var(--faint); border-radius: 12px; width: 252px; height: 270px; overflow: hidden; background: #fafbfe; }
|
||||
.croppa-pad { border: 1px solid var(--cds-border-strong, #8d8d8d); width: 252px; height: 270px; overflow: hidden; background: var(--cds-field, #f4f4f4); }
|
||||
.croppa-pad img { width: 250px; display: block; }
|
||||
.review-options .form-check { margin-bottom: 0.35rem; }
|
||||
</style>
|
||||
@@ -43,20 +49,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- notifications -->
|
||||
<div class="toast-viewport" aria-live="polite">
|
||||
<cds-toast>
|
||||
<cds-toast-item v-for="t in toasts" v-bind:key="t.id" v-bind:kind="t.kind"
|
||||
v-bind:title="t.title" v-bind:caption="t.caption" timeout="6000"></cds-toast-item>
|
||||
</cds-toast>
|
||||
</div>
|
||||
|
||||
<!-- 1 · load -->
|
||||
<section class="card panel">
|
||||
<div class="panel-head">
|
||||
<span class="step-chip">1</span>
|
||||
<h2>Load a picture</h2>
|
||||
<span class="hint" v-if="message && message.message">Working on {{ message.message.caption }} · {{ message.message.domain }}</span>
|
||||
<span class="hint" v-if="message && message.message">Working on {{ message.message.caption || '(no caption)' }} · {{ message.message.domain }}</span>
|
||||
</div>
|
||||
<div class="row-gap">
|
||||
<button class="btn btn-primary" v-bind:disabled="busy.load" v-on:click="loadPicture('next')">
|
||||
<cds-button v-bind:disabled="busy.load" v-on:click="loadPicture('next')">
|
||||
<span v-if="!busy.load">Load next queued</span>
|
||||
<span v-else>Loading…</span>
|
||||
</button>
|
||||
<button class="btn btn-ghost" v-bind:disabled="busy.load" v-on:click="loadPicture('by-id')">Load by upload ID</button>
|
||||
<button class="btn btn-ghost" v-if="message && message.message" v-on:click="reset">Clear</button>
|
||||
</cds-button>
|
||||
<cds-button kind="secondary" v-bind:disabled="busy.load" v-on:click="loadPicture('by-id')">Load by upload ID</cds-button>
|
||||
<cds-button kind="ghost" v-if="message && message.message" v-on:click="reset">Clear</cds-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -69,88 +83,88 @@
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<div><dt>Phone</dt><dd>{{ message.message.caption }}</dd></div>
|
||||
<div><dt>Phone</dt><dd>{{ message.message.caption || '—' }}</dd></div>
|
||||
<div><dt>Domain</dt><dd>{{ message.message.domain }}</dd></div>
|
||||
<div v-if="agent"><dt>Agent</dt><dd>{{ agent.name }} <span class="faint">{{ agent.phone }}</span></dd></div>
|
||||
<div v-if="message.message.process">
|
||||
<dt>Process</dt>
|
||||
<dd>{{ message.message.process.variables.name }} <span class="badge-soft badge-brand">{{ message.message.process.variables.environment }}</span></dd>
|
||||
<dd>{{ message.message.process.variables.name }} <cds-tag type="blue">{{ message.message.process.variables.environment }}</cds-tag></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="editor-grid mt-2">
|
||||
<div class="editor-media">
|
||||
<label>Original — crop it</label>
|
||||
<label class="cds--label">Original — crop it</label>
|
||||
<div class="croppa-pad mt-1">
|
||||
<croppa v-model="myCroppa" :show-remove-button="false" :width="250" :height="267.44" :quality="2">
|
||||
<img slot="initial" crossOrigin="anonymous" :src="message.message.file_url" style="width: 300px">
|
||||
</croppa>
|
||||
</div>
|
||||
<template v-if="cleanedImage">
|
||||
<label style="display:block;" class="mt-2">Cleaned preview</label>
|
||||
<label class="cds--label mt-2" style="display:block;">Cleaned preview</label>
|
||||
<div class="croppa-pad mt-1">
|
||||
<img :src="cleanedImage" alt="cleaned preview">
|
||||
</div>
|
||||
<button class="btn btn-danger-ghost mt-1" v-on:click="cleanedImage = null">Remove cleaned image</button>
|
||||
<cds-button kind="ghost" class="mt-1" v-on:click="cleanedImage = null">Remove cleaned image</cds-button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="editor-controls">
|
||||
<div class="row-gap" style="align-items:flex-end;">
|
||||
<div style="min-width:200px;">
|
||||
<label for="requiresCleaning">Requires cleaning?</label>
|
||||
<select id="requiresCleaning" class="form-control" v-model="requiresCleaning">
|
||||
<label class="cds--label" for="requiresCleaning">Requires cleaning?</label>
|
||||
<select id="requiresCleaning" class="cds--select-input" v-model="requiresCleaning">
|
||||
<option value="">--Choose--</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" v-if="requiresCleaning === 'Yes'" v-bind:disabled="busy.clean" v-on:click="cleanImage">
|
||||
<cds-button v-if="requiresCleaning === 'Yes'" v-bind:disabled="busy.clean" v-on:click="cleanImage">
|
||||
<span v-if="!busy.clean">Clean background</span>
|
||||
<span v-else>Cleaning…</span>
|
||||
</button>
|
||||
</cds-button>
|
||||
</div>
|
||||
|
||||
<hr class="mt-2">
|
||||
|
||||
<div class="row-gap" v-if="!reviewed">
|
||||
<div class="btn btn-success" style="border-radius:10px; padding:0.55rem 1.1rem; font-weight:600; cursor:pointer;" v-on:click="reviewed = true; accepted = true">Accept picture</div>
|
||||
<div class="btn btn-danger" style="border-radius:10px; padding:0.55rem 1.1rem; font-weight:600; cursor:pointer;" v-on:click="reviewed = true; accepted = false">Reject picture</div>
|
||||
<cds-button v-on:click="reviewed = true; accepted = true">Accept picture</cds-button>
|
||||
<cds-button kind="danger" v-on:click="reviewed = true; accepted = false">Reject picture</cds-button>
|
||||
</div>
|
||||
|
||||
<div v-if="reviewed && accepted" class="mt-2">
|
||||
<div class="row-gap" style="align-items:flex-end;">
|
||||
<div style="min-width:150px; max-width:200px;">
|
||||
<label for="otpSave">OTP</label>
|
||||
<input id="otpSave" class="form-control" v-model.trim="otp" autocomplete="one-time-code">
|
||||
<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="saveChanges">
|
||||
<cds-button v-bind:disabled="!canSave" v-on:click="saveChanges">
|
||||
<span v-if="!busy.save">Crop and upload picture</span>
|
||||
<span v-else>Saving…</span>
|
||||
</button>
|
||||
<button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
|
||||
</cds-button>
|
||||
<cds-button kind="ghost" v-on:click="reviewed = false">Change review</cds-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="reviewed && !accepted" class="mt-2">
|
||||
<label>Please state why this picture is not good enough.</label>
|
||||
<label class="cds--label">Please state why this picture is not good enough.</label>
|
||||
<div class="review-options mt-1">
|
||||
<div class="form-check" v-for="item in reviewOptions" v-bind:key="item.index">
|
||||
<input class="form-check-input" type="checkbox" v-model="selectedReviewOptions" v-bind:id="'reason-' + item.index" v-bind:value="item.name">
|
||||
<label class="form-check-label" v-bind:for="'reason-' + item.index">{{ item.name }}</label>
|
||||
<div v-for="item in reviewOptions" v-bind:key="item.index" style="display:flex; align-items:center; gap:0.5rem; margin-bottom:0.35rem;">
|
||||
<input type="checkbox" class="cds--checkbox" v-bind:id="'reason-' + item.index" v-bind:value="item.name" v-model="selectedReviewOptions">
|
||||
<label v-bind:for="'reason-' + item.index" style="margin:0;" v-on:click.prevent>{{ item.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1" style="max-width:480px;">
|
||||
<label for="otherReviewOption">Others (please specify).</label>
|
||||
<textarea id="otherReviewOption" rows="3" class="form-control" v-model="otherReviewOption"></textarea>
|
||||
<label class="cds--label" for="otherReviewOption">Others (please specify).</label>
|
||||
<textarea id="otherReviewOption" rows="3" class="cds--text-area" v-model="otherReviewOption"></textarea>
|
||||
</div>
|
||||
<div class="row-gap mt-2">
|
||||
<button class="btn btn-primary" v-bind:disabled="!canReview" v-on:click="reviewPicture()">
|
||||
<cds-button kind="danger" v-bind:disabled="!canReview" v-on:click="reviewPicture()">
|
||||
<span v-if="!busy.review">Send review</span>
|
||||
<span v-else>Sending…</span>
|
||||
</button>
|
||||
<button class="btn btn-danger-ghost" v-if="!message.message.process" v-bind:disabled="!canReview" v-on:click="removeFromQueue">Dequeue only</button>
|
||||
<button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
|
||||
</cds-button>
|
||||
<cds-button kind="ghost" v-if="!message.message.process" v-bind:disabled="!canReview" v-on:click="removeFromQueue">Dequeue only</cds-button>
|
||||
<cds-button kind="ghost" v-on:click="reviewed = false">Change review</cds-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,11 +185,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
|
||||
<script src="/assets/cropper/app.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -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) + '%';
|
||||
},
|
||||
},
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -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…</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…</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 }} — 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…</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>
|
||||
|
||||
+145
-166
@@ -1,202 +1,181 @@
|
||||
/* 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);
|
||||
}
|
||||
/* YOUreka Tools — Carbon Design System styling.
|
||||
Depends on: @carbon/styles CSS (tokens + Carbon-styled native controls),
|
||||
IBM Plex Sans, and @carbon/web-components v2.50.0 (IBM CDN). */
|
||||
|
||||
/* ── base ───────────────────────────────────────────────────────────────── */
|
||||
[v-cloak] { display: none; }
|
||||
a { text-decoration: none; }
|
||||
|
||||
html, body { height: 100%; }
|
||||
body.app {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
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;
|
||||
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: var(--cds-background, #f4f4f4);
|
||||
color: var(--cds-text-primary, #161616);
|
||||
font-size: 14px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
[v-cloak] { display: none; }
|
||||
a { text-decoration: none; }
|
||||
|
||||
/* ── navbar ─────────────────────────────────────────────── */
|
||||
.nav {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 0.65rem 0;
|
||||
/* prevent FOUC on web components */
|
||||
cds-button:not(:defined), cds-tag:not(:defined), cds-tile:not(:defined),
|
||||
cds-inline-notification:not(:defined), cds-toast:not(:defined),
|
||||
cds-toast-item:not(:defined), cds-progress-bar:not(:defined) {
|
||||
visibility: hidden;
|
||||
}
|
||||
.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); }
|
||||
|
||||
/* ── header (Carbon ui-shell look) ──────────────────────────────────────── */
|
||||
.nav {
|
||||
background: #161616;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
}
|
||||
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; max-width: none; padding: 0 1rem; }
|
||||
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: #f4f4f4; font-size: 14px; }
|
||||
.brand:hover { color: #f4f4f4; }
|
||||
.brand small { color: #c6c6c6; font-weight: 400; }
|
||||
.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;
|
||||
width: 28px; height: 28px; border-radius: 4px;
|
||||
background: #0f62fe; 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); }
|
||||
.brand-mark svg { width: 16px; height: 16px; }
|
||||
.nav-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
|
||||
.nav-right .linklike { color: #c6c6c6; font-size: 13px; padding: 0.4rem 0.6rem; }
|
||||
.nav-right .linklike:hover { color: #f4f4f4; background: #353535; }
|
||||
.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; color: #c6c6c6; font-size: 13px; }
|
||||
.user-chip .avatar {
|
||||
width: 26px; height: 26px; border-radius: 50%;
|
||||
background: var(--brand-soft); color: var(--brand);
|
||||
background: #0f62fe; color: #fff;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700;
|
||||
font-size: 11px; font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── layout ─────────────────────────────────────────────── */
|
||||
main.container { flex: 1 0 auto; }
|
||||
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
|
||||
/* ── layout ─────────────────────────────────────────────────────────────── */
|
||||
main.container { flex: 1 0 auto; max-width: none; padding: 0 1rem; width: 100%; }
|
||||
main.container > * { max-width: 1136px; margin-left: auto; margin-right: auto; }
|
||||
main.container > .narrow { max-width: 560px; }
|
||||
.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; }
|
||||
.page-head { margin: 2rem auto 1.25rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||
.page-head h1 { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: 0; }
|
||||
.page-head .sub { color: var(--cds-text-secondary, #525252); margin: 0.25rem 0 0; font-size: 14px; }
|
||||
|
||||
/* ── cards ──────────────────────────────────────────────── */
|
||||
.card, .tool-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
/* ── panels (Carbon layer) ──────────────────────────────────────────────── */
|
||||
.card, .panel, .tool-card, .message-card {
|
||||
background: var(--cds-layer, #f4f4f4);
|
||||
border: 1px solid var(--cds-border-subtle, #c6c6c6);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.panel { padding: 1.35rem 1.5rem; margin-bottom: 1.25rem; }
|
||||
.panel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
|
||||
.panel { padding: 1.25rem 1.5rem 1.5rem; margin-bottom: 1rem; }
|
||||
.panel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
|
||||
.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;
|
||||
width: 22px; height: 22px; border-radius: 2px; flex: 0 0 auto;
|
||||
background: var(--cds-layer-selected-inverse, #161616); color: #f4f4f4;
|
||||
font-size: 12px; font-weight: 600;
|
||||
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; }
|
||||
.panel-head h2 { font-size: 1rem; font-weight: 600; margin: 0; }
|
||||
.panel-head .hint { color: var(--cds-text-helper, #6f6f6f); font-size: 12px; }
|
||||
|
||||
/* 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); }
|
||||
/* ── hero + landing ─────────────────────────────────────────────────────── */
|
||||
.hero { padding: 2.5rem 0 1.75rem; }
|
||||
.hero h1 { font-size: 1.75rem; font-weight: 600; margin: 0 0 0.35rem; }
|
||||
.hero p { color: var(--cds-text-secondary, #525252); max-width: 560px; margin: 0; font-size: 14px; }
|
||||
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; max-width: 960px; }
|
||||
.tool-grid cds-tile { height: 100%; }
|
||||
.tool-card { display: flex; flex-direction: column; padding: 1.25rem; }
|
||||
.tool-card h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.3rem; }
|
||||
.tool-card p { color: var(--cds-text-secondary, #525252); margin: 0 0 1rem; font-size: 14px; }
|
||||
.tool-icon {
|
||||
width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.9rem;
|
||||
width: 40px; height: 40px; border-radius: 4px; margin: 0;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: var(--brand-soft); color: var(--brand);
|
||||
background: var(--cds-layer-selected-inverse, #161616); color: #fff;
|
||||
}
|
||||
.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; }
|
||||
.tool-icon svg { width: 20px; height: 20px; }
|
||||
.tool-card .go { margin-top: auto; color: var(--cds-link, #0f62fe); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.tool-card .go svg { width: 14px; height: 14px; }
|
||||
|
||||
/* 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; }
|
||||
/* ── forms (Carbon-styled native controls) ──────────────────────────────── */
|
||||
label { font-weight: 400; font-size: 12px; color: var(--cds-text-secondary, #525252); margin-bottom: 0.25rem; display: block; }
|
||||
.form-control {
|
||||
border-color: var(--line); border-radius: 10px; height: 42px;
|
||||
box-shadow: none; font-size: 14.5px; color: var(--ink);
|
||||
border: none; border-bottom: 1px solid var(--cds-border-strong, #8d8d8d);
|
||||
border-radius: 0; height: 40px; box-shadow: none;
|
||||
font-size: 14px; color: var(--cds-text-primary, #161616);
|
||||
background: var(--cds-field, #f4f4f4); padding: 0 0.75rem; width: 100%;
|
||||
appearance: auto;
|
||||
}
|
||||
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59, 79, 216, 0.12); }
|
||||
select.form-control { appearance: auto; }
|
||||
select.form-control { padding-right: 2rem; }
|
||||
.form-control:focus { outline: 2px solid var(--cds-focus, #0f62fe); outline-offset: -2px; border-bottom-color: transparent; background: var(--cds-field, #f4f4f4); }
|
||||
textarea.form-control { height: auto; padding: 0.6rem 0.75rem; }
|
||||
|
||||
/* ── buttons ────────────────────────────────────────────── */
|
||||
.btn { border-radius: 10px; font-weight: 600; font-size: 14px; padding: 0.55rem 1.1rem; border: 1px solid transparent; text-decoration: none; }
|
||||
a.btn:hover, a.btn:focus { text-decoration: none; }
|
||||
.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; }
|
||||
/* ── buttons (cds-button handles tool pages; these serve server pages) ──── */
|
||||
.btn {
|
||||
border-radius: 0; font-weight: 400; font-size: 14px;
|
||||
padding: 0.65rem 0.95rem; border: 1px solid transparent;
|
||||
text-decoration: none; display: inline-block; cursor: pointer;
|
||||
font-family: inherit; line-height: 1.2; text-align: center;
|
||||
}
|
||||
.btn-primary { background: var(--cds-button-primary, #0f62fe); border-color: var(--cds-button-primary, #0f62fe); color: #fff; }
|
||||
.btn-primary:hover, .btn-primary:focus { background: #0353e9; border-color: #0353e9; color: #fff; }
|
||||
.btn-ghost { background: transparent; border-color: var(--cds-border-strong, #8d8d8d); color: var(--cds-text-primary, #161616); }
|
||||
.btn-ghost:hover { background: var(--cds-layer-hover, #e8e8e8); color: var(--cds-text-primary, #161616); }
|
||||
.btn-danger { background: var(--cds-button-danger-primary, #da1e28); border-color: var(--cds-button-danger-primary, #da1e28); color: #fff; }
|
||||
.btn-danger-ghost { background: transparent; border: none; color: var(--cds-button-danger-primary, #da1e28); }
|
||||
.btn[disabled], .btn.disabled { opacity: 0.5; 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; }
|
||||
.linklike { background: none; border: none; padding: 0; color: var(--cds-link, #0f62fe); font-weight: 400; cursor: pointer; font-size: 13px; font-family: inherit; }
|
||||
.linklike[disabled] { color: var(--cds-text-disabled, #c6c6c6); 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; } }
|
||||
/* cds-button inside flex rows */
|
||||
cds-button { min-width: 0; }
|
||||
cds-button::part(button) { font-size: 14px; }
|
||||
|
||||
/* ── 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; }
|
||||
|
||||
/* ── editor grid (cropper) ──────────────────────────────── */
|
||||
.editor-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
|
||||
@media (min-width: 900px) {
|
||||
.editor-grid { grid-template-columns: 300px 1fr; align-items: start; }
|
||||
}
|
||||
.panel-head { flex-wrap: wrap; }
|
||||
.panel-head .hint { flex-basis: 100%; margin-left: 0; }
|
||||
@media (min-width: 720px) {
|
||||
.panel-head .hint { flex-basis: auto; margin-left: auto; }
|
||||
}
|
||||
|
||||
/* ── 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; }
|
||||
/* ── badges → cds-tag; helper text ──────────────────────────────────────── */
|
||||
.faint { color: var(--cds-text-helper, #6f6f6f); font-size: 12px; }
|
||||
.muted { color: var(--cds-text-secondary, #525252); }
|
||||
.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; }
|
||||
.flex-fill { flex: 1 1 auto; }
|
||||
|
||||
/* ── details grid ───────────────────────────────────────────────────────── */
|
||||
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem 1.4rem; margin: 0 0 0.25rem; }
|
||||
.details > div { min-width: 0; }
|
||||
.details dt { font-size: 12px; font-weight: 400; color: var(--cds-text-helper, #6f6f6f); }
|
||||
.details dd { margin: 0.15rem 0 0; font-weight: 400; font-size: 14px; overflow-wrap: anywhere; }
|
||||
|
||||
/* ── wizard finger panels ───────────────────────────────────────────────── */
|
||||
.finger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
@media (max-width: 720px) { .finger-grid { grid-template-columns: 1fr; } }
|
||||
.finger { background: var(--cds-layer, #f4f4f4); border: 1px solid var(--cds-border-subtle, #c6c6c6); padding: 1rem 1.1rem 1.1rem; }
|
||||
.finger.capturing { border-color: var(--cds-border-interactive, #0f62fe); box-shadow: inset 0 0 0 1px var(--cds-border-interactive, #0f62fe); }
|
||||
.finger.done { background: var(--cds-layer, #f4f4f4); border-color: var(--cds-border-subtle, #c6c6c6); }
|
||||
.finger-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; gap: 0.5rem; }
|
||||
.finger-head h3 { font-size: 0.95rem; font-weight: 600; margin: 0; }
|
||||
.finger .meta { color: var(--cds-text-helper, #6f6f6f); font-size: 12.5px; margin-top: 0.6rem; overflow-wrap: anywhere; }
|
||||
|
||||
/* ── cropper editor ─────────────────────────────────────────────────────── */
|
||||
.editor-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
|
||||
@media (min-width: 900px) { .editor-grid { grid-template-columns: 300px 1fr; align-items: start; } }
|
||||
.croppa-pad {
|
||||
border: 1px solid var(--cds-border-strong, #8d8d8d);
|
||||
width: 252px; height: 270px; overflow: hidden; background: var(--cds-field, #f4f4f4);
|
||||
}
|
||||
.croppa-pad img { width: 250px; display: block; }
|
||||
.review-options .form-check { margin-bottom: 0.35rem; }
|
||||
|
||||
/* ── notifications viewport (cropper toasts) ────────────────────────────── */
|
||||
.toast-viewport { position: fixed; top: 3.5rem; right: 1rem; z-index: 1100; width: min(360px, calc(100vw - 2rem)); }
|
||||
|
||||
/* ── footer ─────────────────────────────────────────────────────────────── */
|
||||
footer.foot { flex-shrink: 0; padding: 1.1rem 0 1.3rem; color: var(--cds-text-helper, #6f6f6f); font-size: 12px; border-top: 1px solid var(--cds-border-subtle, #c6c6c6); }
|
||||
footer.foot .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||
footer.foot a { color: var(--cds-text-secondary, #525252); }
|
||||
|
||||
/* ── message card (server error page) ───────────────────────────────────── */
|
||||
.message-card { padding: 2.25rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
|
||||
.message-card h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
|
||||
.message-icon { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cds-support-error, #da1e28); color: #fff; margin-bottom: 0.4rem; }
|
||||
.message-icon.error svg { width: 24px; height: 24px; }
|
||||
.message-card .btn { margin-top: 0.6rem; min-width: 200px; }
|
||||
|
||||
+31
-22
@@ -4,9 +4,14 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>YOUreka Tools</title>
|
||||
<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 type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/tile.min.js"></script>
|
||||
<style>
|
||||
cds-tile:not(:defined) { visibility: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<nav class="nav">
|
||||
@@ -30,27 +35,31 @@
|
||||
</div>
|
||||
|
||||
<div class="tool-grid">
|
||||
<a class="tool-card" href="/cropper">
|
||||
<span class="tool-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>
|
||||
</span>
|
||||
<h3>Image Cropper</h3>
|
||||
<p>Review, crop and save identity photos submitted for YOUreka ID domain profiles.</p>
|
||||
<span class="go">Open Image Cropper
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</span>
|
||||
</a>
|
||||
<cds-tile href="/cropper">
|
||||
<div class="tool-card">
|
||||
<span class="tool-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>
|
||||
</span>
|
||||
<h3>Image Cropper</h3>
|
||||
<p>Review, crop and save identity photos submitted for YOUreka ID domain profiles.</p>
|
||||
<span class="go">Open Image Cropper
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
</cds-tile>
|
||||
|
||||
<a class="tool-card" href="/fingerprint">
|
||||
<span class="tool-icon">
|
||||
<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>
|
||||
<h3>Fingerprint Agent</h3>
|
||||
<p>Enroll staff fingerprints with the scanner attached to this laptop. Captures are authorized per domain.</p>
|
||||
<span class="go">Open Fingerprint Agent
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</span>
|
||||
</a>
|
||||
<cds-tile href="/fingerprint">
|
||||
<div class="tool-card">
|
||||
<span class="tool-icon">
|
||||
<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>
|
||||
<h3>Fingerprint Agent</h3>
|
||||
<p>Enroll staff fingerprints with the scanner attached to this laptop. Captures are authorized per domain.</p>
|
||||
<span class="go">Open Fingerprint Agent
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
</cds-tile>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user