Switch over password strength coloration to named Tailwind colors + test update

[andrewtavis]

Terms

• I have searched open and closed feature requests
• I agree to follow activist's Code of Conduct

Description

Along with #1099 where we're updating the i18n strings within the end to end tests, we also want to make sure that other variables can be loaded in so that we don't fail tests if they're changed. Another place where this could be improved is in the tests for the password strength indicator. This is using the hard coded strings with the hex colors found in frontend/components/indicator/IndicatorPasswordStrength.vue. The e2e tests for this component can be found in frontend/test-e2e/component-objects/PasswordStrength.ts. It would be best if these colors were added to the frontend/assets/css/tailwind.css file such that their tests can be rewritten to use their variable names.

Contribution

Happy to support someone with this and review when a PR is opened!

CC @cquinn540 who's working on the e2e tests ✅

[fowlerztwitch]

Hey @andrewtavis, I have modified the code in this branch to perform tests based on named colors. However, I am not sure what the full extent of this issue should be.

1. Do you want a refactor of the handling of the colors in the frontend as well as in the tests?
2. If not, do you mean that you want the test to compute the colors in the pre-existing hardcoded configuration of the frontend and compare them to the named colors newly declared ?

_1) is easy to do, 2) would require a bit more thinking but can be done as well. I am just asking because I want to be sure what is the way you want to go.

Best regards,
Fowlerz

[Remyc0des]

Hey @andrewtavis can I work on this?

[fowlerztwitch]

Hey @Remyc0des, I have already tried an implementation (to be completed) of this issue. Can I get your opinion on it? (See link to my branch in my previous comment) I'm taking the opportunity to learn step by step new techs through issues such as this one so if you could give a look at my code it'd be great

[andrewtavis]

Long day of calls so far, @fowlerztwitch :) I'll take a look at your fork soon, but also feel free to open a PR with what you have as that will get it a little bit more in my direct line of sight. Thanks for your work so far!

Thanks also for the interest in helping, @Remyc0des!

[Remyc0des]

@fowlerztwitch yeah ill take a look at it right now thank you!

[andrewtavis]

Thanks for the support, @Remyc0des :)