[PS-1872] remember me label triggers toggle

[jcuenca95]

Type of change

- [x] Bug fix
- [ ] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

Response to issue #3945 "Remember email" checkbox label isn't clickable Clicking on the label of "Remember email" checkbox now toggles the checkbox

Code changes

Added a member function to toggle the checkbox and call it on label click This functions just call setValue on the rememberMe formControl with negated value.

• file.ext: Description of what was changed and why

Screenshots

Before you submit

• Please add unit tests where it makes sense to do so (encouraged but not required)
• If this change requires a documentation update - notify the documentation team
• If this change has particular deployment requirements - notify the DevOps team

[CLAassistant]

All committers have signed the CLA.

[bitwarden-bot]

Thank you for your contribution! We've added this to our internal Community PR board for review. ID: PS-1872

[fromaline]

It’s a workaround rather than a proper fix. Check the accessibility guidelines, checkbox’s labels should have a proper for attribute.

[jcuenca95]

Hi @djsmith85 thanks for the comments. I've updated the changes using the bitCheckbox as you say. I'm happy to help and open to new comments.

[coroiu]

CheckboxModule needs to be imported in the LoginModule for the directive to be applied. However I've noticed an issue where the directive styles don't get applied properly due to CSP. I'm looking into it

[coroiu]

Fix can be found here: https://github.com/bitwarden/clients/pull/4219 . After that PR gets merged bitCheckbox should work as expected! The directive should contain all visual css rules, so we should be able to remove class="tw-w-4 tw-rounded tw-border" as well.

Also, if possible, please consider using bit-form-control as it is used in the default story linked by Daniel above.

  <bit-form-control>
    <input type="checkbox" bitCheckbox formControlName="checkbox" />
    <bit-label>Click me</bit-label>
  </bit-form-control>

note: This might add some margin below the checkbox, feel free to adjust it on the bit-form-control.

[djsmith85]

@jcuenca95 Received approval from QA and this is ready to merge 🎉

[jcuenca95]

@djsmith85 Great! Thanks for the patience 😊😊