[BACK-4437] Redesign login & email theme#54
Open
toddkazakov wants to merge 27 commits into
Open
Conversation
toddkazakov
force-pushed
the
tk-stack-7-cancelable-email-change
branch
from
June 18, 2026 08:41
4f6510a to
98c8425
Compare
toddkazakov
force-pushed
the
tk-stack-8-theme-redesign
branch
from
June 18, 2026 08:41
1266a9d to
f05dcba
Compare
Annotate each Tidepool override in login/ and email/html/ with the intent behind the divergence from the base keycloak v1 theme, so future maintainers can tell which changes are stylistic, which encode product decisions (e.g. disabling email edits during IdP linking, two-step username/password flow), and which are no-longer-needed historical artifacts. Also fixes identity-provider-link.ftl to use identityProviderDisplayName (matches upstream). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> (cherry picked from commit 2e727f6)
(cherry picked from commit 39aff03)
(cherry picked from commit f09cc08)
(cherry picked from commit aa7efd5)
(cherry picked from commit 38b1cf2)
(cherry picked from commit 30e2ac2)
(cherry picked from commit e80a2fd)
…ername on AIA re-auth (cherry picked from commit d68eaa8)
…ector (cherry picked from commit b0ba0f3)
Theme portion split from 3833f81 (the backend authenticator lives in the AIA PR); kept here so the TOTP page edits land with the rest of the login redesign.
…mplates
- Redesign update-email AIA form (one email field, logout-sessions
checkbox, 48px gap above actions, AIA-aware Cancel/Submit layout).
- Redesign update-password AIA form (new + confirm password fields with
eye toggles, logout-sessions checkbox, matching button rhythm).
- Update emailUpdateConfirmationSent copy ("A confirmation email has
been sent to {0}. You need to confirm via email to complete the
update and activate your new email address").
- Add emailUpdatedTitle/emailUpdated copy for the post-confirmation
success page.
- Rename "Back to Application" to "Take me back to the application"
everywhere it appears.
- Port the legacy Tidepool email/ directory so outgoing emails
(verification, password reset, etc.) match the legacy design. Add
Tidepool-branded wrappers for the Keycloak-26 email types that
legacy didn't have.
(cherry picked from commit 4e1e9b1)
Override the keycloak-home-idp-discovery plugin's hidpd-select-idp.ftl in tidepool-theme/login (instead of editing the upstream submodule) so the home-IDP selection page matches the authenticator-selection cards. - Render each provider as a .tp-idp-option card (icon + title) - Hide the read-only email / "Not you?" row on this page - Use a single Flaticon UIcons font glyph (subset, ~1.4KB woff2) for the card icon instead of inline provider SVGs (cherry picked from commit 52af16b)
Override login-idp-link-email.ftl in the new theme (previously fell back to base Keycloak). Reframe the copy so users understand the email check exists because they are linking accounts, show the verification target email as a read-only field, and replace the inline "click here" links with stacked block buttons — Continue (primary) over Resend email (secondary). Keep the page's warning banner. (cherry picked from commit ccdcf8b)
Override the home-idp-discovery selection label to "Select your identity provider" (kept in the theme, not the submodule), and tighten the idp-link-email instruction and helper copy. (cherry picked from commit f1d4677)
Override keycloak.v2's delete-credential.ftl (the AIA prompt for removing an OTP/2FA device): move the message into the title subtitle, add copy noting 2FA can be re-enabled later, and render side-by-side Cancel/Delete buttons via the shared .tp-totp-actions grid. (cherry picked from commit 5e31126)
Rework login-idp-link-email.ftl per the revised design: move the explanatory copy into the title subtitle, add a gold warning banner, show the verification address as a labelled read-only Email field, and lay the actions out as a side-by-side Resend Email / Next pair. Generalize the gold banner into a shared .tp-warning-banner component (renamed from .tp-recovery-warning) now used by both the recovery-codes and account-linking pages. (cherry picked from commit 72f140e)
Rework hidpd-select-idp.ftl per the design (Figma node 13885:30576): add a title + subtitle, render each provider as a radio-selectable card (reusing the select-authenticator card language with the building glyph and a selected-state check), and replace the direct-navigation links with a Next button that navigates to the chosen provider client-side. Add an adapted support disclaimer. Note: provider selection now requires JavaScript (the no-JS direct-link fallback is replaced by the select + Next interaction). (cherry picked from commit 97103d8)
Match the 2FA Figma (node 11639:28634): the centered title keeps the "Delete <device>" copy, and the explanatory message moves out of the centered subtitle slot into left-aligned body text above the action buttons. Adds .tp-delete-credential-message with a 48px bottom gap to match the design's body-to-buttons spacing. (cherry picked from commit 04ca70f)
Match the Figma (node 11691:48930): add a "Confirm details to continue" title, restyle the age selection as custom 14px indigo radios with weight-400 gray copy, render the terms acceptance via the shared .pf-v5-c-check skin (blue-60 label, indigo links), and replace the Decline/Accept pair with a single full-width "Next" button. terms.js now shows the toggled checkbox wrappers as flex (not block) so the .pf-v5-c-check layout survives the 13-17 reveal. (cherry picked from commit adcbb53)
Match the Figma (node 13831:31031): override keycloak.v2's login-idp-link-confirm.ftl with an IDP-named title, two blue-60 body paragraphs explaining the link, and a single full-width "Next" button (replacing the Review profile / Add-to-existing-account pair). Adds the .tp-idp-link-confirm styling and the confirmLinkIdp* message copy. (cherry picked from commit 0381c0a)
Consolidate repetition that accumulated across the redesign without changing any rendered output: - CSS: collapse the three near-identical radio-card components into a shared .tp-card-option* set (+ --role modifier); group the 3x custom checkbox skin, 4x body-copy paragraph, 2x arrow-link, and duplicate section-spacing / subtitle rules; add --tp-focus-ring and color tokens (blue-80, warning, counter, disabled-primary) to replace magic hexes; unify the two disabled-primary shades; fix a misplaced comment. Net ~240 fewer lines. - FTL: add tp-commons.ftl with checkIcon / otpDisclaimer macros and apply across the OTP, recovery, authenticator-select, IDP-select, and role-prompt templates (removes 4 inline disclaimer + 4 check-SVG copies). - terms.js: extract a show(id, visible, mode) helper. Verified IDP-select, role prompt, patient terms, OTP, select-authenticator, and recovery-input render unchanged on the local dev server. (cherry picked from commit aaf5f11)
- Restore the hand pointer on all PF buttons (base .pf-v5-c-button) - Tighten the 2FA device hint / code input to a 16px stack - Add the "no recovery codes left" warning banner to the 2FA prompt when no fallback authenticator is available - Give error/info .instruction text 500 weight at 16px/20px and a consistent 48px gap above .tp-back-to-app (cherry picked from commit ca8fdde)
- Hide any empty .pf-v5-c-login__main-footer wrapper (the loginFooter macro is a no-op and #kc-info is absent on most screens) so it never reserves layout space. Uses :not(:has(*)) since Freemarker leaves whitespace text nodes that defeat :empty. - Carry over the emailBoundToIdp message from the legacy theme (resolved by the keycloak-home-idp-discovery SPI for SSO-bound emails). (cherry picked from commit 19266e0)
hidpd-select-idp.ftl enables displayInfo (registration allowed) but defines no "info" section, so #kc-info rendered empty while keeping its 48px top margin — leaving a phantom gap at the bottom of the card. Capture the nested "info" output and only render the band when it has content. Verified on the dev server: the IDP-select footer reclaims 48px and the username page's "Sign Up" info still renders. (cherry picked from commit f81e944)
Theme portion split from b922d4d (the CancelableUpdateEmail required action lives in the cancel-email PR); kept here with the redesigned update-email page.
The key was added by the email-changed-notification work against the pre-redesign email theme; the redesign's directory restructure left it in tidepool-theme-legacy. Relocate it to the new tidepool-theme/email messages bundle.
toddkazakov
force-pushed
the
tk-stack-7-cancelable-email-change
branch
from
June 18, 2026 13:44
98c8425 to
2adb10e
Compare
toddkazakov
force-pushed
the
tk-stack-8-theme-redesign
branch
from
June 18, 2026 13:44
f05dcba to
1303d15
Compare
toddkazakov
changed the title
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
1 participant
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.
Full login + email theme redesign (PatternFly v5): username/password, signup, password reset, 2FA / recovery-code / credential selection, TOTP & recovery-code setup, trust-device, page-expired, home-IDP selection, account-linking, terms, and email templates, plus dedupe/polish passes.
📚 Stacked PR 8 of 8. Base branch:
tk-stack-7-cancelable-email-change— review/merge it first.Stack — review & merge bottom-up:
tk-stack-1-trusted-device-spi→mastertk-stack-2-attempted-username-fix→tk-stack-1-trusted-device-spitk-stack-3-aia-authenticator→tk-stack-2-attempted-username-fixtk-stack-4-2fa-cleanup-listeners→tk-stack-3-aia-authenticatortk-stack-5-login-activity-outbox→tk-stack-4-2fa-cleanup-listenerstk-stack-6-email-changed-notification→tk-stack-5-login-activity-outboxtk-stack-7-cancelable-email-change→tk-stack-6-email-changed-notificationtk-stack-8-theme-redesign→tk-stack-7-cancelable-email-changeBuilds green on JDK 21 (
./mvnw clean compile package); on the stack tip 42 admin + 35 home-idp tests pass.