web: Indicate when caps-lock is active during password input. #12733
Conversation
This file contains 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
✅ Deploy Preview for authentik-docs canceled.
|
✅ Deploy Preview for authentik-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
GirlBossRush
force-pushed
the
51-caps-lock-indicator
branch
from
2588d77 to
3d7a451
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #12733 +/- ##
==========================================
- Coverage 92.75% 92.75% -0.01%
==========================================
Files 769 769
Lines 38926 38926
==========================================
- Hits 36107 36105 -2
- Misses 2819 2821 +2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
| @@ -54,6 +56,18 @@ html > form > input { | |||
| vertical-align: middle; | |||
| } | |||
|
|
|||
| .pf-c-form-control { | |||
| --pf-c-form-control--m-caps-lock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg fill='%23aaabac' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 20.7812 37.6211 L 35.2421 37.6211 C 38.5233 37.6211 40.2577 35.6992 40.2577 32.6055 L 40.2577 28.4570 L 49.1404 28.4570 C 51.0859 28.4570 52.6329 27.3086 52.6329 25.5039 C 52.6329 24.4024 52.0703 23.5351 51.0158 22.6211 L 30.9062 4.8789 C 29.9452 4.0351 29.0546 3.4727 27.9999 3.4727 C 26.9687 3.4727 26.0780 4.0351 25.1171 4.8789 L 4.9843 22.6445 C 3.8828 23.6055 3.3671 24.4024 3.3671 25.5039 C 3.3671 27.3086 4.9140 28.4570 6.8828 28.4570 L 15.7421 28.4570 L 15.7421 32.6055 C 15.7421 35.6992 17.4999 37.6211 20.7812 37.6211 Z M 21.1562 34.0820 C 20.2655 34.0820 19.6562 33.4961 19.6562 32.6055 L 19.6562 25.7149 C 19.6562 25.1524 19.4452 24.9180 18.8828 24.9180 L 8.6640 24.9180 C 8.4999 24.9180 8.4296 24.8476 8.4296 24.7305 C 8.4296 24.6367 8.4530 24.5430 8.5702 24.4492 L 27.5077 7.9961 C 27.7187 7.8086 27.8359 7.7383 27.9999 7.7383 C 28.1640 7.7383 28.3046 7.8086 28.4921 7.9961 L 47.4532 24.4492 C 47.5703 24.5430 47.5939 24.6367 47.5939 24.7305 C 47.5939 24.8476 47.4998 24.9180 47.3356 24.9180 L 37.1406 24.9180 C 36.5780 24.9180 36.3671 25.1524 36.3671 25.7149 L 36.3671 32.6055 C 36.3671 33.4727 35.7109 34.0820 34.8671 34.0820 Z M 19.7733 52.5273 L 36.0624 52.5273 C 38.7577 52.5273 40.3046 51.0273 40.3046 48.3086 L 40.3046 44.9336 C 40.3046 42.2148 38.7577 40.6680 36.0624 40.6680 L 19.7733 40.6680 C 17.0546 40.6680 15.5077 42.2383 15.5077 44.9336 L 15.5077 48.3086 C 15.5077 51.0039 17.0546 52.5273 19.7733 52.5273 Z M 20.3124 49.2227 C 19.4921 49.2227 19.0468 48.8008 19.0468 47.9805 L 19.0468 45.2617 C 19.0468 44.4414 19.4921 43.9727 20.3124 43.9727 L 35.5233 43.9727 C 36.3202 43.9727 36.7655 44.4414 36.7655 45.2617 L 36.7655 47.9805 C 36.7655 48.8008 36.3202 49.2227 35.5233 49.2227 Z'/%3E%3C/svg%3E"); | |||
There was a problem hiding this comment.
We have an icon for this already: fa-exclamation-triangle
There was a problem hiding this comment.
Thanks for the heads up 😄
Just to confirm, would you prefer if both the icon in the input and the message both used the exclamation triangle?
On macOS, this currently aligns with the native indicator:
| @customElement("ak-flow-input-password") | ||
| export class InputPassword extends AKElement { | ||
| static get styles() { | ||
| static get styles(): CSSResult[] { | ||
| return [PFBase, PFInputGroup, PFFormControl, PFButton]; |
There was a problem hiding this comment.
In general, avoid putting return types on functions. Let the inference engine guide you instead.
|
|
||
| const capsLockDetected = event.getModifierState("CapsLock"); | ||
|
|
||
| input.classList.toggle("pf-m-caps-lock", capsLockDetected); |
There was a problem hiding this comment.
This is fighting with Lit. It's easier to have @state() objects for the different things (showing the password, showing the capslock), and letting Lit do its thing by using the state to choose between showing a thing and nothing.
GirlBossRush
force-pushed
the
51-caps-lock-indicator
branch
from
3d7a451 to
753827f
Compare
Determining the state of the caps-lock key can be tricky as we're dependant on a user-provided input to set a value. Thus, our initial state defaults to not display any warning until the first keystroke. - Revise to better use lit-html.
GirlBossRush
force-pushed
the
51-caps-lock-indicator
branch
from
753827f to
4c6f199
Compare
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.
Details
Hey team! 👋
I had fun implementing the caps-lock detection feature! Since we rely on keystroke events to determine the caps-lock state, the warning stays hidden until we get that first user input.
This is my first time contributing to the lit-html parts of our codebase, and I'm excited to get your thoughts. I was able to bring the
InputPasswordcomponent up to speed with some of authentik's more recent component design patterns, such as leaning on the Lit's ref directive to manage event listeners.I'd love feedback on my approach to both the LitHTML patterns and authentik's existing conventions.
Looking forward to your review!
Checklist
ak test authentik/)make lint-fix)If an API change has been made
make gen-build)If changes to the frontend have been made
make web)If applicable
make website)