[PS-1260]: add hidden char count toggle to web client

[mkanavakatini]

trafficstars

Type of change

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

Objective

Add toggle hidden character count to web vault https://community.bitwarden.com/t/re-toggle-hidden-character-count/42641

Code changes

• apps/web/src/app/vault/add-edit.component.html: toggle count button, password count display form field
• apps/web/src/scss/pages.scss: styles for password count form field as per figma design
• apps/web/src/scss/variables.scss: new color variables for updated styling
• libs/angular/src/components/add-edit.component.ts: toggle count functionality

Screenshots

Before you submit

- [X] I have checked for **linting** errors (`npm run lint`) (required)
- [ ] I have added **unit tests** where it makes sense to do so (encouraged but not required)
- [ ] This change requires a **documentation update** (notify the documentation team)
- [ ] This change has particular **deployment requirements** (notify the DevOps team)

[bitwarden-bot]

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

[eliykat]

Great, thank you! I'll review next week. If you happen to get to the desktop app in the meantime, feel free to add it to this PR and we can merge it all in together. But I know you're doing this in your spare time, so we can also just merge this and do desktop separately.

[djsmith85]

@mkanavakatini Thank you very much for your work on this.

I have merged master, and added the needed changes for the desktop client.

[eliykat]

I've addressed my own feedback above, I just need to do a final self-review and test, then I'll request a review from the team.

[eliykat]

@djsmith85 Can you please give this a final review? It's probably easiest to review the whole thing from scratch, but for what it's worth, the main changes are:

• updated the "count text" color in desktop & browser per design feedback. I also fixed the alternating background color in desktop. Otherwise your desktop work is unchanged I believe.
• used the CL ColorPasswordComponent in web - this was added in a separate PR, so we're just wiring it up here and removing unused styles
• now that the pipe is no longer shared between components, remove it from jslib-module and import it directly in those clients that need it
• added i18n strings that were missing in web
• used bitLink for the Hide button in web
• fixed some of the show/hide logic in web to match Figma

Desktop:

Web:

[eliykat]

@djsmith85 The issue in dark mode is now fixed. The problem is that web isn't using the Tailwind theme all the way through. In light mode, the add-edit modal uses the normal background colour, but in dark mode it uses the "alt-2" background colour, which is also what use to alternate the password count.

Fixed by expressly setting the background of the password count component in this location:

Light mode is unaffected:

[eliykat]

CI is running on this branch: https://github.com/bitwarden/clients/tree/feat/char-count-web-ci

[eliykat]

I've added the character count to hidden custom fields on desktop:

https://user-images.githubusercontent.com/31796059/203694087-267437c2-c533-440e-a544-85d3526b27ca.mov

I'll ask design what they want to do about web - I think this is the only thing outstanding.

I've also added the color password display for item password history on all clients. It seems like an oversight and an easy fix while we're here.

Web:

Browser:

Desktop:

[eliykat]

Note: ci is passing on this branch: https://github.com/bitwarden/clients/tree/feat/char-count-web-ci after merging in the latest master.