feat(ui): improve UX with password toggle, accessibility, and inline style cleanup#131
Merged
feat(ui): improve UX with password toggle, accessibility, and inline style cleanup#131
Conversation
…style cleanup - Add password visibility toggle on login page - Replace emoji icon with SVG on OAuth authorization page - Replace hamburger text character with SVG icon in navbar - Make error page retry link dynamic via RetryURL prop - Replace inline styles with CSS classes across multiple templates - Add button loading state with spinner to prevent double-submit - Display human-readable event types in audit logs - Add relative time display for sessions and audit timestamps - Add search input clear button via JS initialization - Deduplicate CSS keyframe animations from login.css - Add aria-live and role attributes to alert component - Add table captions for screen reader accessibility - Fix Regenerate Secret button sizing with display:contents on parent form Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates AuthGate’s UI templates, shared CSS/JS, and page props to improve usability and accessibility across login, authorization, admin tables, and sessions/audit views.
Changes:
- Add password visibility toggle and replace emoji/text icons with SVGs in key templates.
- Add shared JS enhancements (relative timestamps, search clear button, and submit loading state) plus supporting CSS utilities.
- Improve accessibility via
sr-onlytable captions and enhanced alert ARIA attributes; reduce inline styling via new CSS classes.
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| internal/templates/user_app_detail.templ | Switch regenerate-secret form to shared form-inline class. |
| internal/templates/static/js/utils.js | Add relative time + search clear initializers; add global submit loading-state handler. |
| internal/templates/static/css/pages/login.css | Add password toggle styling; remove duplicate keyframes (now in base). |
| internal/templates/static/css/pages/admin-forms.css | Ensure forms in .admin-action-buttons participate in flex layout (via display: contents). |
| internal/templates/static/css/pages/admin-clients.css | Add styles for status filter tabs and client-type badges. |
| internal/templates/static/css/pages/admin-audit-logs.css | Add styling for relative timestamp line. |
| internal/templates/static/css/pages/account-sessions.css | Add styling for relative timestamp line in sessions table. |
| internal/templates/static/css/components/search.css | Add styles for the new search clear (X) button. |
| internal/templates/static/css/components/navbar.css | Add dropdown badge layout classes. |
| internal/templates/static/css/components/forms.css | Add form-inline utility and .btn-loading spinner styling. |
| internal/templates/static/css/base.css | Add text-tertiary utility class. |
| internal/templates/props.go | Add RetryURL to ErrorPageProps. |
| internal/templates/navbar_component.templ | Replace hamburger text glyph with SVG; move dropdown badge inline styles to CSS classes. |
| internal/templates/login_page.templ | Add password input wrapper + toggle button with inline click handler. |
| internal/templates/error_page.templ | Add helper to default retry URL and make retry link dynamic via props. |
| internal/templates/authorize.templ | Replace lock emoji with SVG; replace inline form styles with form-inline. |
| internal/templates/alert_component.templ | Add role="alert" and conditional aria-live behavior. |
| internal/templates/admin_clients.templ | Replace inline styles with classes; add table caption; convert client type styling to CSS classes; switch action forms to form-inline. |
| internal/templates/admin_client_detail.templ | Switch regenerate-secret form to form-inline. |
| internal/templates/admin_audit_logs.templ | Add human-readable event type labels + relative time rendering hooks. |
| internal/templates/account_sessions.templ | Add table caption, relative timestamps, and replace inline tertiary text color with utility class; switch forms to form-inline. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Use model constants in humanReadableEventType() instead of raw strings - Fix wrong event type names (AUTHORIZATION_GRANTED → USER_AUTHORIZATION_GRANTED, etc.) - Add missing event types (RefreshTokenIssued, AuthorizationCode*, ClientCredentials, etc.) - Remove dead ALL_SESSIONS_REVOKED case (no such constant exists) - Fix aria conflict: use role="status" for non-error alerts instead of role="alert" + aria-live="polite" which contradicts implicit assertive - Replace password toggle inline style.display with CSS class toggle - Remove duplicate inline toggleDescription script (already in admin.js) - Convert remaining style="margin:0;" forms to class="form-inline" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add dark mode overrides for client-type badge CSS classes - Fix btn-loading to use color:transparent instead of child visibility - Skip loading state on forms with data-confirm-* modal triggers - Add right padding to search input to prevent text/clear button overlap Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 23 out of 23 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
RetryURLprop instead of hardcoded/deviceAUTHENTICATION_SUCCESS→ "Login Success")fadeInUp,slideDown,fadeIn) fromlogin.cssaria-liveandrole="alert"to alert component for screen reader accessibility<caption class="sr-only">to all data tables for accessibilitydisplay: contentson parent form so button matches siblings in flex layoutTest plan
/by default🤖 Generated with Claude Code