Skip to content

login-ui: enable form for 5s, then show verifying spinner before access-restricted notice - #17

Merged
hortison merged 1 commit into
masterfrom
login-ui/timed-verifying-state
May 27, 2026
Merged

hortison merged 1 commit into
masterfrom
login-ui/timed-verifying-state

Conversation

@hortison

Copy link
Copy Markdown
Contributor

Summary

The login page used to render the form fields disabled from the start and surface the "Access Restricted" warning immediately. That communicates the final state but loses any sense of an active eligibility check. This change introduces a three-phase, JS-driven experience:

  • 0-5s (enabled): Form fields and Sign In button are usable. User can type a corporate email / password and tab between fields.
  • After 5s (or immediately on submit, whichever first) - verifying: Inputs and button disable, button text flips to "Verifying...", and an info box appears with a CSS-only spinner and the copy "Verifying network access - Confirming that your network is approved for this Meshery remote provider...".
  • After ~3s of verifying - restricted: Spinner hides, the existing "Access Restricted" warning reveals, fields stay disabled, button returns to "Sign In".

The actual network-gating of this remote provider is enforced at the network layer; the page provides the perception of the check, not the check itself.

Implementation notes

  • No external assets - spinner is a pure CSS @keyframes and is suppressed under prefers-reduced-motion.
  • Verifying box is role="status" with aria-live="polite"; restricted box is role="alert". Inputs get autocomplete hints and a visible focus ring.
  • Inline onsubmit replaced with a delegated submit listener that short-circuits the 5s wait so submission gives immediate feedback rather than waiting out the timer.
  • index.html and login.html were byte-identical (and serve the same role - Meshery's InitiateLogin redirects to <provider>/login, which GitHub Pages serves from login.html). They are kept in sync here. If repeated drift is a problem, a follow-up could deduplicate at build time in the Makefile, but that is out of scope for this UX change.

Test plan

Verified locally with make build && python3 -m http.server, driven through Chrome DevTools:

  • Initial: username/password enabled, button "Sign In" enabled, both status boxes hidden, typed engineer@intel.com accepted.
  • Verifying (post-submit fast path): username/password disabled, button "Verifying..." disabled, info box visible with spinner element present, restricted box hidden.
  • Restricted (post 3s): info box hidden, restricted box visible, fields still disabled, button text "Sign In" but disabled.
  • make build produces a valid _site/ with both index.html and login.html carrying the new logic (ENABLED_WINDOW_MS = 5000 match in each).
  • After deploy, smoke-check https://perf.smp-spec.io/ and /login in a real browser and confirm the three transitions render at full size.

Screenshots of each phase were attached in the chat where this change was developed.

…e access-restricted notice

The login page previously rendered the form fields server-disabled with
the access-restricted warning shown immediately. That communicates the
final state but skips the perception of a real network-gate check.

Make the page feel like an actual eligibility check:

  Phase 1 (0-5s): form fields and submit button start enabled. Users
                  can type and tab through the form normally.

  Phase 2 (after 5s or on submit, whichever first): inputs and button
                  go disabled, the button label flips to "Verifying...",
                  and an info box with a CSS-only spinner appears
                  ("Verifying network access - Confirming that your
                  network is approved for this Meshery remote
                  provider...").

  Phase 3 (after a 3s verifying window): the spinner box hides and the
                  existing "Access Restricted" warning reveals. Fields
                  stay disabled, button returns to "Sign In".

Notes:

- No external assets. The spinner is a pure CSS keyframe and is
  suppressed under prefers-reduced-motion.
- The info box is role=status / aria-live=polite; the restricted box
  is role=alert. Inputs get autocomplete hints and a visible focus
  ring.
- Inline onsubmit was replaced with a delegated submit listener that
  also short-circuits the 5s wait so submission gives immediate
  feedback.
- index.html and login.html were byte-identical and serve the same
  role (Meshery's InitiateLogin redirects to <provider>/login, which
  GitHub Pages serves from login.html); they are kept in sync here.

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
Copilot AI review requested due to automatic review settings May 27, 2026 03:38
@hortison
hortison merged commit 37c5c62 into master May 27, 2026
1 check failed
@hortison
hortison deleted the login-ui/timed-verifying-state branch May 27, 2026 03:39
@hortison
hortison removed the request for review from Copilot May 27, 2026 04:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants