PM-5550 Implement on-page autofil for single line TOTP #12058
Merged
+942
−104
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
-Edit tests -Clean up styling -New method to validate totpfields
Codecov ReportAttention: Patch coverage is
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## main #12058 +/- ##
==========================================
+ Coverage 33.42% 33.46% +0.03%
==========================================
Files 2901 2901
Lines 90564 90634 +70
Branches 17212 17223 +11
==========================================
+ Hits 30271 30329 +58
- Misses 57899 57905 +6
- Partials 2394 2400 +6 ☔ View full report in Codecov by Sentry. |
- Remove unnecessary data from buildtotpelement - Add feature flag - Add aria labels to buildtotpelement - Add tests and update relevant snapshots
…thub.com:bitwarden/clients into PM-5550-implement-on-page-autofill-menu-for-totp
|
New Issues
Fixed Issues
|
danielleflinn
previously approved these changes
Dec 5, 2024
There was a problem hiding this comment.
Tested build locally, UI looks as expected and overall works as expected when navigating with a mouse as well as with a screen reader and keyboard.
I did catch 2 bugs / edge cases that we hadn't thought of:
-
We are showing the TOTP fill UI when an item has MP reprompt "on" which feels a bit odd since selecting it to autofill then launches the popout. And in the Extension Refresh we actually require the user to enter their MP to view a vault item OR to copy the TOTP.
-
Secondly, for Free users we are showing the TOTP menu UI even though we are not showing the TOTP in the popup (requires premium upgrade). This was an edge case that did not come up during design.
I'll likely log both of these as bugs on the Jira though so they can be addressed in separate PRs.
Agreed - let's follow up on these as separate tasks |
jprusik
reviewed
Dec 5, 2024
|
|
||
| const svgElement = buildSvgDomElement(` | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"> | ||
| <g> |
There was a problem hiding this comment.
non-blocking nit; are we able to drop this group tag from the SVG?
There was a problem hiding this comment.
The group can be dropped and won't affect any functionality, I will drop it.
jprusik
reviewed
Dec 5, 2024
| innerCircleElement.classList.toggle("circle-danger-color", totpExpiryApproaching); | ||
| outerCircleElement.classList.toggle("circle-danger-color", totpExpiryApproaching); | ||
|
|
||
| innerCircleElement.style.strokeDashoffset = `${((intervalSeconds - totpSeconds) / intervalSeconds) * (2 * Math.PI * 12.5)}`; |
jprusik
reviewed
Dec 5, 2024
jprusik
reviewed
Dec 5, 2024
Formatting suggestion Co-authored-by: Jonathan Prusik <[email protected]>
Formatting suggestion Co-authored-by: Jonathan Prusik <[email protected]>
jprusik
reviewed
Dec 6, 2024
jprusik
reviewed
Dec 6, 2024
apps/browser/src/autofill/services/inline-menu-field-qualification.service.ts
Outdated
Show resolved
Hide resolved
jprusik
reviewed
Dec 11, 2024
Comment on lines
174
to
180
| /** | ||
| * Autofill does not fill password type totp input fields | ||
| */ | ||
| if (this.inlineMenuTotpFeatureFlag) { | ||
| if (isTotpField) { | ||
| const isTotpField = this.isTotpField(field); | ||
| const passwordType = field.type === "password"; | ||
| if (isTotpField && !passwordType) { |
There was a problem hiding this comment.
Nit (for follow up work in next PRs, don't worry about it in this one), let's move that comment to be more local to the line in question:
Suggested change
| /** | |
| * Autofill does not fill password type totp input fields | |
| */ | |
| if (this.inlineMenuTotpFeatureFlag) { | |
| if (isTotpField) { | |
| const isTotpField = this.isTotpField(field); | |
| const passwordType = field.type === "password"; | |
| if (isTotpField && !passwordType) { | |
| if (this.inlineMenuTotpFeatureFlag) { | |
| const isTotpField = this.isTotpField(field); | |
| // Autofill does not fill totp inputs with a "password" `type` attribute value | |
| const passwordType = field.type === "password"; | |
| if (isTotpField && !passwordType) { |
There was a problem hiding this comment.
Will do! good call out.
jprusik
previously approved these changes
Dec 11, 2024
jprusik
approved these changes
Dec 11, 2024
|
New BIT run with the "inline-menu-field-qualification" flag enabled as well: |
dan-livefront
deleted the
PM-5550-implement-on-page-autofill-menu-for-totp
branch
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.
🎟️ Tracking
https://bitwarden.atlassian.net/browse/PM-5550
📔 Objective
Core Changes
Update Inline Menu Cipher Data
Modify the inline menu cipher data to include the following fields:
Populate New Inline Menu for TOTP Fields
When a TOTP code is available and the field is identified as a TOTP field:
Tests
Note:
I organized some of the styling file names to not directly assign a hex code in dark mode scenarios but I can remove these changes if they will add to much friction to this PR.
this ticket
This ticket will handle multiple totp login items on the same field
this ticket This ticket will handle the way we are determining if a field is a totp field on the page
this ticket handles multi input totp fields
this ticket this ticket will mitigate showing totp codes when MP prompt is on
This ticket adds the subscription paywall
This ticket will remove totp code inline menu items that do not have a totp code
📸 Screenshots
⏰ Reminders before review
🦮 Reviewer guidelines
:+1:) or similar for great changes:memo:) or ℹ️ (:information_source:) for notes or general info:question:) for questions:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion:art:) for suggestions / improvements:x:) or:warning:) for more significant problems or concerns needing attention:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt:pick:) for minor or nitpick changes