Added a Passwort Strength Component for User Registration

[Csaern]

As a project I made a password strength component to visualize the strength of a password used to create an account for the galaxy server. The user gets feedback at the registration site, for the strength of his password and also an estimation time, how long it would take to get cracked.
I also added

• the eye functionality, to show and hide the input for the password
• a button for password guidelines, to show users, what components they need to get a strong password, which includes an reference link for an external website.

How to test the changes?

(Select all options that apply)

• I've included appropriate automated tests.
• This is a refactoring of components with existing test coverage.
• Instructions for manual testing are as follows:
  1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

[nsoranzo]

Thanks for working on this feature! Two suggestions:

• Add the "eye" functionality to the password field to allow the uses to view what they are typing if it's safe to do so
• Replace the Password Guidelines button with a simple help text containing the few rules we actually enforce and a link to general-purpose guidelines like https://www.cisa.gov/secure-our-world/use-strong-passwords

[guerler]

I agree with @nsoranzo, and would additionally suggest that you could add a checkmark to each fulfilled criteria listed in the help section. Thank you for working on this!

[guerler]

I think this might work better without the guidelines button and modal, since similar information is already conveyed through the strength indicator and the list of criteria.

[ElectronicBlueberry]

since similar information is already conveyed through the strength indicator and the list of criteria

the list of criteria is from an old screenshot. They were removed, since the only criteria we enforce is a length of at least 6 characters.

[guerler]

Ah interesting. Thanks. I still think that the modal should be removed. Having a button and a modal just to display criteria we don't apply seems to be unnecessary. In my opinion, we should either extend the required criteria list or just show the strength bar with some help text under it. The crack time also seems to be misleading and not informative since we can not look 10-20 years into the future.

[ElectronicBlueberry]

The time estimation is to give people another metric for the strength bar. Seeing that your password can be cracked within a about minute of computing time can be more effective means to motivate people to use a stronger password, than simply displaying "weak".

Regarding the foresight: The strength estimation could also be off in 10-20 years, but I'm trusting we will update our dependencies before it deviates a significant amount.

[guerler]

I recommend using Bootstrap utility classes instead of pixel and rem values. For example, use mt-2 directly in the HTML class attribute or apply it in CSS with @extend .mt-2;.

[ElectronicBlueberry]

We really need to have a talk about bootstrap and bootstrap utility classes, since they are hurting our code quality and maintainability. I've discussed this with some people already, and am currently working on an outline of why and how we can proceed with this issue with my findings. I will post this under discussions once ready, and would ask you to wait for that, since this review is not the right place for this discussion.

[guerler]

I see the intention behind the crack-time metric, but I feel there’s a slight disconnect—it represents a future projection, whereas the weak label describes the password’s strength today. Because of this, it might not be the most intuitive way to communicate security risks. Also, I haven’t come across crack-time used elsewhere, and the modal feels like a bit more than what’s necessary. That said, I really appreciate the effort put into this! If the hard-coded margins, paddings, and other CSS elements are replaced with Bootstrap utility classes, I think this PR is in good shape unless anyone else has additional comments or suggestions. Thanks again for working on this!

[ElectronicBlueberry]

it represents a future projection, whereas the weak label describes the password’s strength today.

Both represent the same metric in different terms. This is about compute time today, there is no future projection involved. I encourage you to have a look at how this works here: https://dropbox.tech/security/zxcvbn-realistic-password-strength-estimation