Skip to content
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.

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

Inline CSS for default login and logout page #15303

Merged

Conversation

Kehrlann
Copy link
Contributor

@Kehrlann Kehrlann commented Jun 25, 2024

Inline CSS for default login/logout pages

Context: gh-15302

Remove the dependency on Bootstrap CSS. Results in faster load times, no failures in air-gapped or offline scenarios, and no dependency on an external CDN that may go away some day.

Open questions / feedback / changes

  • While we're touching the CSS, if you would like to update the colors (e.g. Spring green or something), now is the time.
  • I have not introduced a feature flag, even to revert to the old page. Is that ok?

Design details

Goals:

  • Remove the dependency on Bootstrap
  • Keep existing general behavior
  • Keep the page structure: elements and IDs

Anti-goals:

  • Make a pixel-perfect copy of the current layout
  • Keep all the class names

Performance and accessibility benchmarks

Using Chrome's embedded Lighthouse test suites, configured for mobile.
This implementation shows stable performance, accessibility and best practices scores.
The time to First Contentful Paint improves a lot, and drops from 1.5s to 0.7s.

lighthouse

Before / after HTML pages:

If you want to see the HTML pages live, and check their usage in a browser, I have an export of the pages available ; those are not running Spring Boot apps but rather an HTML export.

Before / after screenshots:

Login page:

login

Login page, with error:

login-error

Login page, with logout message:

login-logout

Logout page:

logout

Login page in a "phone emulator":

iphone-login

- Remove the dependency on Bootstrap CSS. Results in faster load times, no failures
  in air-gapped or offline scenarios, and no dependency on an external CDN that may
  go away some day.
@spring-projects-issues spring-projects-issues added the status: waiting-for-triage An issue we've not yet triaged label Jun 25, 2024
@sjohnr sjohnr self-assigned this Jun 27, 2024
@sjohnr sjohnr added in: web An issue in web modules (web, webmvc) type: enhancement A general enhancement and removed status: waiting-for-triage An issue we've not yet triaged labels Jun 27, 2024
@rwinch rwinch merged commit bc8ba7f into spring-projects:main Aug 5, 2024
4 checks passed
@rwinch rwinch added this to the 6.4.0-M2 milestone Aug 5, 2024
@rwinch rwinch assigned rwinch and unassigned sjohnr Aug 5, 2024
@Kehrlann Kehrlann deleted the css/remove-bootstrap-dependency branch September 19, 2024 15:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in: web An issue in web modules (web, webmvc) type: enhancement A general enhancement
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants