Skip to content

Reimplement password strength as ViewComponent, custom element#9826

Merged
aduth merged 10 commits intomainfrom
aduth-pw-strength-component
Jan 23, 2024
Merged

Reimplement password strength as ViewComponent, custom element#9826
aduth merged 10 commits intomainfrom
aduth-pw-strength-component

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Dec 22, 2023

🛠 Summary of changes

Refactors password strength UI element as a combination ViewComponent component + JavaScript custom element.

As part of this work, removes ad-hoc text size reduction previously applied to strength and feedback elements.

The refactoring adopts frontend architecture conventions, namely:

  • TypeScript instead of (non-typechecked) JavaScript
  • Custom elements instead of one-off packs
  • ViewComponent component instead of Rails view partial
  • BEM CSS class naming without abbreviations instead of nonstandard class names (see related comment)
  • Component-specific stylesheets instead of main stylesheet include
  • Dependencies defined within workspace packages

Related: #9811

Why?

  • Simplify usage and ensures consistency by embedding password strength as a subcomponent of the existing password confirmation experience, to
  • Improves maintainability by making it easier to test the custom element, which has more controllable side-effects than a JavaScript pack
  • Reduces size of main application stylesheet to improve load times in critical paths
  • Aligns text styling to current Figma designs
  • Improves accessibility and usability by increasing the font size of text feedback

📜 Testing Plan

Verify there are no regressions in the behavior of password strength:

  1. Go to http://localhost:3000
  2. Sign in
  3. On account dashboard, click Edit Password
  4. (Reauthenticate if prompted)
  5. Enter a new password
  6. Observe password feedback

👀 Screenshots

Before After
image image

@aduth aduth force-pushed the aduth-pw-strength-component branch from 1b11d1b to 7093eb0 Compare January 5, 2024 13:20
@aduth aduth force-pushed the aduth-pw-strength-component branch from 5baa02b to 059d51b Compare January 8, 2024 14:36
@aduth aduth force-pushed the aduth-pw-strength-component branch from 3a6c8c3 to 62e1b17 Compare January 10, 2024 18:01
@aduth
Copy link
Contributor Author

aduth commented Jan 10, 2024

Okay, this should be essentially complete now. At this point, I might just wait for the content freeze to lapse to merge, despite not really making any meaningful content changes.

@aduth aduth marked this pull request as ready for review January 10, 2024 18:02
aduth and others added 8 commits January 22, 2024 11:58
changelog: Internal, Code Quality, Improve maintainability of password strength UI element
We've since moved away from vendor which received string content as XML

Originally: #1531
Easier comparison

See: https://github.com/18F/identity-idp/pull/9826/files#r1443220055

Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>
@aduth aduth force-pushed the aduth-pw-strength-component branch from 62e1b17 to 247a7cf Compare January 22, 2024 16:59
@aduth aduth merged commit 5d48996 into main Jan 23, 2024
@aduth aduth deleted the aduth-pw-strength-component branch January 23, 2024 13:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants