login-ui: enable form for 5s, then show verifying spinner before access-restricted notice - #17
Merged
Merged
Conversation
…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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
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
@keyframesand is suppressed underprefers-reduced-motion.role="status"witharia-live="polite"; restricted box isrole="alert". Inputs getautocompletehints and a visible focus ring.onsubmitreplaced with a delegatedsubmitlistener that short-circuits the 5s wait so submission gives immediate feedback rather than waiting out the timer.index.htmlandlogin.htmlwere byte-identical (and serve the same role - Meshery'sInitiateLoginredirects to<provider>/login, which GitHub Pages serves fromlogin.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:engineer@intel.comaccepted.make buildproduces a valid_site/with bothindex.htmlandlogin.htmlcarrying the new logic (ENABLED_WINDOW_MS = 5000match in each).https://perf.smp-spec.io/and/loginin 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.