Add a colorizedPassword for lower or upper case characters

[hossimo]

Looking at variables.scss it seems like there are currently only two special cases for password characters:

passwordNumberColor: #007fde,
passwordSpecialColor: #c40800,

I suggest adding a 3rd exception class that represents either lower or upper characters so that you can tell the difference between them when the context is low.

I don't know what the colour should be in Light and Dark for the most accessibility or what the $nord-# section is.

diff --git a/apps/desktop/src/scss/variables.scss b/apps/desktop/src/scss/variables.scss
index 65f1e6b2e..b2462adef 100644
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -92,6 +92,7 @@ $themes: (
     logoSuffix: "dark",
     passwordNumberColor: #007fde,
     passwordSpecialColor: #c40800,
+    passwordLowerColor: #004c86,
     passwordCountText: #212529,
     calloutBorderColor: $border-color-dark,
     calloutBackgroundColor: $background-color,
@@ -149,6 +150,7 @@ $themes: (
     logoSuffix: "white",
     passwordNumberColor: #52bdfb,
     passwordSpecialColor: #ff7c70,
+    passwordLowerColor: #dce08d,
     passwordCountText: #ffffff,
     calloutBorderColor: #2f2f2f,
     calloutBackgroundColor: #363636,
@@ -206,6 +208,7 @@ $themes: (
     logoSuffix: "white",
     passwordNumberColor: $nord8,
     passwordSpecialColor: $nord12,
+    passwordSpecialColor: $nord5, // set to default color since I don't know how this works.
     passwordCountText: $nord5,
     calloutBorderColor: $nord1,
     calloutBackgroundColor: $nord2,
diff --git a/libs/angular/src/pipes/color-password.pipe.ts b/libs/angular/src/pipes/color-password.pipe.ts
index e8e0ad962..01d9e9e9b 100644
--- a/libs/angular/src/pipes/color-password.pipe.ts
+++ b/libs/angular/src/pipes/color-password.pipe.ts
@@ -53,6 +53,8 @@ export class ColorPasswordPipe implements PipeTransform {
         type = "special";
       } else if (character.match(/\d/)) {
         type = "number";
+      } else if (character.match(/[a-z]/)) {
+        type = "lower";
       }
       colorizedPassword += templateGenerator(character, type, i);
     }

[dwbit]

Hey @hossimo thanks for the info, for this concept, is this something you're interesting in developing/coding across all clients (for consideration by the team), or a feature request?

[hossimo]

Hey @dwbit, I guess a little of column A and column B.

It seems it should be simple enough to get done but having little TS or SCSS experience and because I haven't tried compiling the projects on my own yet it might take me longer than someone who knows what they are doing 😄 . Though that doesn't mean I won't give it a try.

I'll try building a client today and see if any of my changes break things and leave this open for questions.

a few questions/comments:

• After a _tiny bit of research, it seems nord is a theming engine. so that should be simple enough.
• Is there a way to poll for what the color choice should be and if it should be applied to upper or lower case letters?

[dwbit]

Thanks for confirmation @hossimo, to start off, I'll share your proposal with the team and get back to you shortly! Be sure to check-out https://contributing.bitwarden.com/ in the meantime.

[hossimo]

Awesome thanks.
I have successfully built apps/web and apps/browser so hopefully, the changes will be minor.

[hossimo]

That was simpler than expected

#5136

Need to review the color choice or perhaps some other notifier like an underline. I also decided to treat uppercase rater then lowercase.

[dwbit]

Hey @hossimo thanks for the details! Since the team hasn't bumped into this request before, can you create a feature request on the forums to open the idea up for voting and discussion? Closing this one out for the time being, pending community support for this change, let me know if you have any questions!

[hossimo]

No worries, I have added a forum post.

https://community.bitwarden.com/t/colorizedpassword-upper-case-addition/52967