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

feat(ui): auth-gate the landing, add Help page and Home nav

Browse Source 
- 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).
This commit is contained in:
adebisi-fa
2026-10-01 14:39:50 +01:00
parent 134edb6ebd
commit a218835a1c
5 changed files with 289 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/public/assets/help.html
+72
View File
@@ -0,0 +1,72 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help · YOUreka Tools</title>
<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" type="image/png" href="/assets/youreka-favicon.png">
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/ui-shell.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/modal.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/accordion.min.js"></script>
</head>
<body class="app cds--g100">
<!--app-header-->
<main class="container">
<div class="page-head">
<div>
<h1>Help</h1>
<p class="sub">How to use the YOUreka Tools</p>
</div>
</div>
<p class="help-intro">
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 &mdash; 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.
</p>
<cds-accordion>
<cds-accordion-item title="Image Cropper">
<p>Review, crop and save identity photos submitted for YOUreka ID domain profiles.</p>
<ol class="help-steps">
<li>Open <strong>Image Cropper</strong> from the landing page or the menu.</li>
<li>Load a picture with <strong>Load next queued</strong>, or paste a queue item with <strong>Load by upload ID</strong>.</li>
<li>Check the details (phone, domain, agent) and crop the photo in the editor.</li>
<li>If the background needs cleaning, choose <strong>Requires cleaning? &rarr; Yes</strong>, then click <strong>Clean background</strong>.</li>
<li>To keep it, click <strong>Accept picture</strong>, then <strong>Crop and upload picture</strong>. To reject it, click <strong>Reject picture</strong>, tick the reasons (and fill in <em>Others</em> if asked), then <strong>Send review</strong>.</li>
</ol>
<p class="help-note">The cropper requires the <em>crop_image</em> permission. If you see &ldquo;No access&rdquo;, ask a domain administrator to grant it.</p>
</cds-accordion-item>
<cds-accordion-item title="Fingerprint Agent">
<p>Enroll staff fingerprints with the scanner attached to this laptop. Captures are authorized per domain.</p>
<ol class="help-steps">
<li>Open <strong>Fingerprint Agent</strong> from the landing page or the menu.</li>
<li>Choose the domain, enter the staff reference and the OTP, then look up the profile.</li>
<li>Confirm the profile is the right person.</li>
<li>Follow the on-screen prompts and place each finger on the attached scanner when asked.</li>
<li>Review the captured prints and save.</li>
</ol>
<p class="help-note">The scanner runs locally through the <em>fpagent</em> service; scans never leave this machine. Domain permissions are re-checked periodically and cached for a few minutes.</p>
</cds-accordion-item>
</cds-accordion>
<p class="help-note">
Your session lasts 30 days. Use <strong>Sign out</strong> in the menu to end it early.
</p>
</main>
<footer class="foot">
<div class="container">
<span>YOUreka Tools &middot; Help</span>
<span>Need more detail? Ask your YOUreka ID administrator.</span>
</div>
</footer>
</body>
</html>
tools/public/assets/style.css
+19 -7
View File
@@ -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; }
tools/public/index.html
+2 -28
View File
@@ -22,36 +22,10 @@
<main class="container">
<div class="hero">
<h1>YOUreka Tools</h1>
<p>Field utilities for YOUreka ID Domains. Sign in with your YOUreka account to use the tools that require it.</p>
<p>Field utilities for YOUreka ID Domains.</p>
</div>
<div class="tool-grid">
<cds-clickable-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-clickable-tile>
<cds-clickable-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-clickable-tile>
</div>
<!--landing-view-->
</main>
<footer class="foot">