From a218835a1cdf9dbffe2a6f0b1c73743d7cff9a68 Mon Sep 17 00:00:00 2001 From: "Foluso ADEBISI (DevBox Aux)" Date: Thu, 1 Oct 2026 14:39:50 +0100 Subject: [PATCH] feat(ui): auth-gate the landing, add Help page and Home nav - Landing shows the tool tiles only when signed in and a sign-in card otherwise; the login callback now returns to /. - New public /help page: intro plus a per-tool Carbon accordion. - Nav restructured to Home, {services}, divider, Help, Sign In/Out in both the header and the side nav; the header right keeps only the identity chip. Side-nav logo enlarged, border removed, spacing equalised. Sign-out modal no longer flashes before it is defined. - Per-deploy asset versioning (?v=) with immutable asset caching and no-store HTML; help step lists show their numbers again. - Tests updated and extended (48 total). --- tools/public/assets/help.html | 72 ++++++++++++++++++ tools/public/assets/style.css | 26 +++++-- tools/public/index.html | 30 +------- tools/server.js | 135 ++++++++++++++++++++++++++++------ tools/test/server.test.js | 105 ++++++++++++++++++++------ 5 files changed, 289 insertions(+), 79 deletions(-) create mode 100644 tools/public/assets/help.html diff --git a/tools/public/assets/help.html b/tools/public/assets/help.html new file mode 100644 index 0000000..f4be394 --- /dev/null +++ b/tools/public/assets/help.html @@ -0,0 +1,72 @@ + + + + + + Help · YOUreka Tools + + + + + + + + + + + +
+
+
+

Help

+

How to use the YOUreka Tools

+
+
+ +

+ YOUreka Tools is a set of field utilities for YOUreka ID domains. Sign in + with your YOUreka account to use the Image Cropper and the Fingerprint + Agent. Everything runs on this machine — nothing is uploaded except + the artifacts you explicitly save. Permissions are per domain, so an + administrator must grant you access to the domains you work on. +

+ + + +

Review, crop and save identity photos submitted for YOUreka ID domain profiles.

+
    +
  1. Open Image Cropper from the landing page or the menu.
    2. +
  2. Load a picture with Load next queued, or paste a queue item with Load by upload ID.
    3. +
  3. Check the details (phone, domain, agent) and crop the photo in the editor.
    4. +
  4. If the background needs cleaning, choose Requires cleaning? → Yes, then click Clean background.
    5. +
  5. To keep it, click Accept picture, then Crop and upload picture. To reject it, click Reject picture, tick the reasons (and fill in Others if asked), then Send review.
    6. +
+

The cropper requires the crop_image permission. If you see “No access”, ask a domain administrator to grant it.

+ + + +

Enroll staff fingerprints with the scanner attached to this laptop. Captures are authorized per domain.

+
    +
  1. Open Fingerprint Agent from the landing page or the menu.
    2. +
  2. Choose the domain, enter the staff reference and the OTP, then look up the profile.
    3. +
  3. Confirm the profile is the right person.
    4. +
  4. Follow the on-screen prompts and place each finger on the attached scanner when asked.
    5. +
  5. Review the captured prints and save.
    6. +
+

The scanner runs locally through the fpagent service; scans never leave this machine. Domain permissions are re-checked periodically and cached for a few minutes.

+ + + +

+ Your session lasts 30 days. Use Sign out in the menu to end it early. +

+
+ + + + diff --git a/tools/public/assets/style.css b/tools/public/assets/style.css index 07a4ce4..3936734 100644 --- a/tools/public/assets/style.css +++ b/tools/public/assets/style.css @@ -26,11 +26,13 @@ cds-progress-bar:not(:defined) { /* Carbon styles the shadow anchor inside tiles, not the host — give the host a real box so grid columns and click targets work correctly. */ cds-tile, cds-clickable-tile { display: block; } +/* an undefined modal renders its header/body/footer inline — hide it until defined */ +cds-modal:not(:defined) { display: none; } /* ── header + side nav (Carbon ui-shell) ────────────────────────────────── */ cds-header:not(:defined), cds-side-nav:not(:defined) { visibility: hidden; } .brand-inner { display: inline-flex; align-items: center; gap: 0.5rem; } -.brand-logo { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cds-border-subtle, #e0e0e0); border-radius: 4px; padding: 2px; } +.brand-logo { display: inline-flex; align-items: center; justify-content: center; } .brand-logo img { display: block; } .brand-suffix { color: var(--cds-text-secondary, #525252); font-weight: 400; } @@ -61,13 +63,13 @@ cds-side-nav[expanded] { pointer-events: auto; } } .user-chip { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--cds-text-primary, #161616); font-size: 13px; } .user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: #0f62fe; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } -.linklike { background: none; border: none; padding: 0; color: var(--cds-link-primary, #0f62fe); font-weight: 400; cursor: pointer; font-size: 13px; font-family: inherit; } -.linklike:hover { color: var(--cds-link-primary-hover, #0043ce); text-decoration: underline; } -.linklike[disabled] { color: var(--cds-text-disabled, #c6c6c6); cursor: default; } /* logo above the mobile side-nav items */ -.side-nav-brand { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; color: var(--cds-text-primary, #161616); font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0); } -.side-nav-brand img { border: 1px solid var(--cds-border-subtle, #e0e0e0); border-radius: 6px; padding: 2px; display: block; } +.side-nav-brand { display: flex; align-items: center; gap: 0.75rem; padding: 2rem 1rem 1rem; color: var(--cds-text-primary, #161616); font-weight: 600; font-size: 14px; } +.side-nav-brand img { display: block; } + +/* separator between the service links and Help in the header nav */ +.header-nav-divider { width: 1px; align-self: stretch; margin: 0.7rem 0.25rem; background: var(--cds-border-subtle, #e0e0e0); } /* ── layout ─────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1136px; margin: 0 auto; padding: 0 1.5rem; } @@ -114,6 +116,14 @@ main.container { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 1.5rem; } .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; } +/* ── help page ──────────────────────────────────────────────────────────── */ +cds-accordion { display: block; max-width: 720px; } +.help-intro { max-width: 720px; color: var(--cds-text-secondary, #525252); margin: 0 0 1.5rem; font-size: 14px; } +.help-steps { list-style: decimal; padding-left: 1.25rem; margin: 0.5rem 0; } +.help-steps li { margin-bottom: 0.35rem; } +.help-steps li::marker { color: var(--cds-text-secondary, #525252); } +.help-note { color: var(--cds-text-secondary, #525252); font-size: 13px; max-width: 720px; } + /* ── 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 { @@ -131,9 +141,10 @@ textarea.form-control { height: auto; padding: 0.6rem 0.75rem; } .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; + text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; font-family: inherit; line-height: 1.2; text-align: center; } +.btn svg { width: 16px; height: 16px; flex-shrink: 0; } .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); } @@ -196,4 +207,5 @@ footer.foot a { color: var(--cds-text-secondary, #525252); } .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-icon.info { background: var(--cds-button-primary, #0f62fe); } .message-card .btn { margin-top: 0.6rem; min-width: 200px; } diff --git a/tools/public/index.html b/tools/public/index.html index 5700d93..c65c558 100644 --- a/tools/public/index.html +++ b/tools/public/index.html @@ -22,36 +22,10 @@

YOUreka Tools

-

Field utilities for YOUreka ID Domains. Sign in with your YOUreka account to use the tools that require it.

+

Field utilities for YOUreka ID Domains.

-
- -
- - - -

Image Cropper

-

Review, crop and save identity photos submitted for YOUreka ID domain profiles.

- Open Image Cropper - - -
- - - -
- - - -

Fingerprint Agent

-

Enroll staff fingerprints with the scanner attached to this laptop. Captures are authorized per domain.

- Open Fingerprint Agent - - -
- -
+