feat(web): Added password field visibility toggle

[Jan108]

Added a toggle button to password fields, namely:

• Login
• Create User
• Change Password
• Change Password after first login
• Admin register

First step for discussion: #5855

Screenshots

[waclaw66]

Wouldn't be better to use eye-off-outline instead of eye-closed?

[michelheusschen]

Thanks for the PR and nice convenience feature, however I have a few suggestions for improvement:

• Keep <label> out of the PasswordField component, for better reusability
• Use the mdiEyeOffOutline icon as already suggested
• Use Tailwind classes instead of custom CSS and inline styles
• Only show toggle button when password is entered
• Element IDs should be unique, now every password input has id="password"

As the list has gotten pretty long, I went ahead and pushed some changes. Feel free to make further adjustments as you see fit.

[danieldietzler]

Unrelated but might be worth adding a password input component, since at the moment those "Passwords do not match" error messages + their handling is duplicated

[danieldietzler]

We really should bind value.

[michelheusschen]

It's a bit tricky, just doing bind:password={value} won't work because value in this component also handles numbers

[danieldietzler]

Ugh. I missed that, sorry...

[jrasm91]

LGTM

[danieldietzler]

Unrelated but might be worth adding a password input component, since at the moment those "Passwords do not match" error messages + their handling is duplicated

@michelheusschen did you take note of that comment as well? What's your opinion about this?

[michelheusschen]

Validating forms in general is not done very uniformly and I think that improvements can certainly be made there. Once that's done, I'm not sure if a password confirmation component is necessary. I don't think the duplication is so bad as to be a problem, but if we decide to address it let's do it in a separate PR.