Skip to content

Client #128: UX hardening — errors, toasts, validation, and loading states #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
raphael-frank merged 14 commits into from
Jul 15, 2026
Merged

Client #128: UX hardening — errors, toasts, validation, and loading states #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a8f1b2d
feat: add a single client error adapter and shared field-validation h…
FadyGergesRezk Jul 14, 2026
f790d95
feat: add toast, pending-button and inline error primitives for mutat…
FadyGergesRezk Jul 14, 2026
37f7edf
refactor: centralise query keys and settle mutation cache effects in …
FadyGergesRezk Jul 14, 2026
b518f24
fix: fan out keycloak token refreshes to every subscriber and time ou…
FadyGergesRezk Jul 14, 2026
3908c2c
feat: catch route render crashes inside the app shell
FadyGergesRezk Jul 14, 2026
7477f29
refactor: extract dialog form state and validation into testable edit…
FadyGergesRezk Jul 14, 2026
4d30b62
style: add phone and password inputs and align primitives with the theme
FadyGergesRezk Jul 14, 2026
cf94d6c
feat: route query and mutation failures through the shared feedback p…
FadyGergesRezk Jul 14, 2026
b2ad27e
style: align the keycloak login theme with the app
FadyGergesRezk Jul 14, 2026
14140b7
test: serve e2e from a built bundle and cap workers
FadyGergesRezk Jul 14, 2026
d9f2f51
test: add cache consistency specs and extend e2e mock server coverage
FadyGergesRezk Jul 14, 2026
347179d
refactor: trim redundant comments across the web client
FadyGergesRezk Jul 14, 2026
d280e13
docs: rewrite the web-client readme to match the current app
FadyGergesRezk Jul 14, 2026
c5c2f7c
Merge remote-tracking branch 'origin/main' into client/128-ux-hardening
raphael-frank Jul 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 123 additions & 5 deletions infra/keycloak/themes/roost/login/resources/css/roost.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@
--roost-border: oklch(0.92 0.004 286.32);
--roost-input-bg: oklch(1 0 0);
--roost-destructive: oklch(0.577 0.245 27.325);
--roost-warning: oklch(0.72 0.16 78);
--roost-success: var(--roost-primary);
--roost-radius: 0;

/* Ambient gradient spots, straight from the web app. */
Expand All @@ -78,6 +80,9 @@
--roost-muted-foreground: oklch(0.705 0.015 286.067);
--roost-border: oklch(1 0 0 / 12%);
--roost-input-bg: oklch(0.18 0.005 285.8);
--roost-destructive: oklch(0.704 0.191 22.216);
--roost-warning: oklch(0.82 0.14 82);
--roost-success: var(--roost-primary);
--roost-glow-1: oklch(0.55 0.12 128 / 0.22);
--roost-glow-2: oklch(0.6 0.06 86 / 0.16);
}
Expand Down Expand Up @@ -270,7 +275,7 @@ textarea.pf-c-form-control {
height: 2.75rem;
border-radius: var(--roost-radius);
border: 1px solid var(--roost-border);
background: var(--roost-input-bg);
background-color: var(--roost-input-bg);
font-family: 'Poppins', sans-serif;
font-size: 0.9375rem;
color: var(--roost-foreground);
Expand All @@ -293,6 +298,18 @@ input[type='email']:focus {
box-shadow: 0 0 0 3px color-mix(in oklch, var(--roost-primary) 30%, transparent);
}

/* Keycloak/PatternFly adds validation icons as background images. The Roost
theme uses plain border + helper text errors, so remove those image
backgrounds to avoid tiled icons inside invalid fields. */
.pf-c-form-control[aria-invalid='true'],
.pf-v5-c-form-control[aria-invalid='true'],
input[aria-invalid='true'],
textarea[aria-invalid='true'] {
border-color: var(--roost-destructive);
background-color: var(--roost-input-bg);
background-image: none;
}

/* ---- Buttons (match the app Button: uppercase, tracked out, semibold) ---- */
.pf-c-button,
input[type='submit'],
Expand Down Expand Up @@ -399,23 +416,124 @@ a:hover {

/* ---- Alerts / errors ---- */
.pf-c-alert,
.pf-v5-c-alert,
.alert {
--roost-alert-accent: var(--roost-muted-foreground);
--roost-alert-background: color-mix(in oklch, var(--roost-muted-foreground) 8%, transparent);
--roost-alert-border: var(--roost-border);
--pf-c-alert--BoxShadow: none;
--pf-c-alert--BackgroundColor: var(--roost-alert-background);
--pf-c-alert--BorderTopWidth: 0;
--pf-c-alert--BorderTopColor: transparent;
--pf-c-alert__icon--Color: var(--roost-alert-accent);
--pf-c-alert__title--Color: var(--roost-alert-accent);
--pf-c-alert--m-inline--BackgroundColor: var(--roost-alert-background);
--pf-c-alert--m-inline--m-success--BackgroundColor: var(--roost-alert-background);
--pf-c-alert--m-inline--m-danger--BackgroundColor: var(--roost-alert-background);
--pf-c-alert--m-inline--m-warning--BackgroundColor: var(--roost-alert-background);
--pf-c-alert--m-inline--m-info--BackgroundColor: var(--roost-alert-background);
--pf-v5-c-alert--BoxShadow: none;
--pf-v5-c-alert--BackgroundColor: var(--roost-alert-background);
--pf-v5-c-alert--BorderTopWidth: 0;
--pf-v5-c-alert--BorderTopColor: transparent;
--pf-v5-c-alert__icon--Color: var(--roost-alert-accent);
--pf-v5-c-alert__title--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-inline--m-custom--BackgroundColor: var(--roost-alert-background);
--pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--roost-alert-background);
--pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--roost-alert-background);
--pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--roost-alert-background);
--pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--roost-alert-background);
border-radius: var(--roost-radius);
border: 1px solid var(--roost-alert-border);
border-left: 3px solid var(--roost-alert-accent);
border-top: 0;
border-block-start: 0;
box-shadow: none;
background: var(--roost-alert-background);
font-family: 'Poppins', sans-serif;
font-size: 0.875rem;
color: var(--roost-foreground);
margin-bottom: 1.25rem;
}

.pf-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-danger,
.alert-error {
border-radius: var(--roost-radius);
border-left: 3px solid var(--roost-destructive);
background: color-mix(in oklch, var(--roost-destructive) 10%, transparent);
--roost-alert-accent: var(--roost-destructive);
--roost-alert-background: color-mix(in oklch, var(--roost-destructive) 10%, transparent);
--roost-alert-border: color-mix(in oklch, var(--roost-destructive) 30%, transparent);
--pf-c-alert--m-danger--BorderTopColor: var(--roost-alert-accent);
--pf-c-alert--m-danger__icon--Color: var(--roost-alert-accent);
--pf-c-alert--m-danger__title--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-danger--BorderTopColor: var(--roost-alert-accent);
--pf-v5-c-alert--m-danger__icon--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-danger__title--Color: var(--roost-alert-accent);
}

.pf-c-alert.pf-m-warning,
.pf-v5-c-alert.pf-m-warning,
.alert-warning {
--roost-alert-accent: var(--roost-warning);
--roost-alert-background: color-mix(in oklch, var(--roost-warning) 10%, transparent);
--roost-alert-border: color-mix(in oklch, var(--roost-warning) 32%, transparent);
--pf-c-alert--m-warning--BorderTopColor: var(--roost-alert-accent);
--pf-c-alert--m-warning__icon--Color: var(--roost-alert-accent);
--pf-c-alert--m-warning__title--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-warning--BorderTopColor: var(--roost-alert-accent);
--pf-v5-c-alert--m-warning__icon--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-warning__title--Color: var(--roost-alert-accent);
}

.pf-c-alert.pf-m-success,
.pf-v5-c-alert.pf-m-success,
.alert-success {
--roost-alert-accent: var(--roost-success);
--roost-alert-background: color-mix(in oklch, var(--roost-success) 10%, transparent);
--roost-alert-border: color-mix(in oklch, var(--roost-success) 30%, transparent);
--pf-c-alert--m-success--BorderTopColor: var(--roost-alert-accent);
--pf-c-alert--m-success__icon--Color: var(--roost-alert-accent);
--pf-c-alert--m-success__title--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-success--BorderTopColor: var(--roost-alert-accent);
--pf-v5-c-alert--m-success__icon--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-success__title--Color: var(--roost-alert-accent);
}

.pf-c-alert.pf-m-info,
.pf-v5-c-alert.pf-m-info,
.alert-info {
--roost-alert-accent: var(--roost-muted-foreground);
--roost-alert-background: color-mix(in oklch, var(--roost-muted-foreground) 8%, transparent);
--roost-alert-border: var(--roost-border);
--pf-c-alert--m-info--BorderTopColor: var(--roost-alert-border);
--pf-c-alert--m-info__icon--Color: var(--roost-alert-accent);
--pf-c-alert--m-info__title--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-info--BorderTopColor: var(--roost-alert-border);
--pf-v5-c-alert--m-info__icon--Color: var(--roost-alert-accent);
--pf-v5-c-alert--m-info__title--Color: var(--roost-alert-accent);
}

.pf-c-alert__icon,
.pf-v5-c-alert__icon,
.pf-c-alert__title,
.pf-v5-c-alert__title,
.alert .kc-feedback-text {
color: var(--roost-alert-accent);
}

.pf-c-alert__title,
.pf-v5-c-alert__title {
font-family: 'Poppins', sans-serif;
}

.kc-feedback-text,
.pf-c-form__helper-text.pf-m-error {
.pf-c-form__helper-text.pf-m-error,
.pf-v5-c-form__helper-text.pf-m-error {
font-family: 'Poppins', sans-serif;
}

.kc-feedback-text:not(.pf-c-alert__title):not(.pf-v5-c-alert__title),
.pf-c-form__helper-text.pf-m-error,
.pf-v5-c-form__helper-text.pf-m-error {
color: var(--roost-destructive);
Comment on lines +419 to 537

@coderabbitai coderabbitai Bot Jul 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Fix stylelint violations flagged in the new alert block.

Static analysis flags two real issues in this new block: missing blank line before the border-radius declaration (line 446, separating the custom-property group from regular declarations), and quoted 'Poppins' font-family names at lines 453, 525, and 531 that the configured font-family-name-quotes rule disallows.

🎨 Proposed fix 
   --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--roost-alert-background);
+
   border-radius: var(--roost-radius);
   border: 1px solid var(--roost-alert-border);
   border-left: 3px solid var(--roost-alert-accent);
   border-top: 0;
   border-block-start: 0;
   box-shadow: none;
   background: var(--roost-alert-background);
-  font-family: 'Poppins', sans-serif;
+  font-family: Poppins, sans-serif;

Apply the same unquoted Poppins fix at lines 525 and 531.

🧰 Tools
🪛 Stylelint (17.14.0)

[error] 446-446: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

[error] 453-453: Expected no quotes around "Poppins" (font-family-name-quotes)

(font-family-name-quotes)

[error] 525-525: Expected no quotes around "Poppins" (font-family-name-quotes)

(font-family-name-quotes)

[error] 531-531: Expected no quotes around "Poppins" (font-family-name-quotes)

(font-family-name-quotes)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@infra/keycloak/themes/roost/login/resources/css/roost.css` around lines 419 -
537, Fix the stylelint violations in the alert CSS block: add a blank line
between the custom-property declarations and the regular declarations before
border-radius, and remove quotes from every Poppins font-family name in the
affected alert rules, including the declarations near the alert title and
feedback/helper text selectors.

Source: Linters/SAST tools

}

Expand Down
Loading
Loading