Self-service Password Change: UI defects around form validation

[reivilibre]

[PR pending]

The PR that will add a self-service password change form to the React frontend (see #2148) currently has a few defects with the validation UI:

Pasting passwords bypasses the validation

If you paste in a password into the 'Enter new password again' box, the custom validator that it matches the other password is bypassed and you can submit an invalid form.

This seems to be a bug in Radix-UI (a dependency of Compound): radix-ui/primitives#2542

There is a community PR up at Radix-UI (December 2023, not merged) which claims to fix this. I have not yet been able to test it — it wasn't as simple as npm install https://github.com/mrtnpar/primitives#bug-fix-validation-not-triggering as I had hoped.

This lets you submit an invalid form.

The 'Passwords match!' validator gets stuck even if you modify the first 'New password' field in a way that should break it

The same custom validator, that checks that both passwords match, gets stuck when you:

• enter a password into the 'Enter new password again' box
• then enter the same password in the 'New password' box and unfocus that box with Shift+Tab
• then go back to the 'New password' box and mess up the password such that the validator should now fail
• then unfocus again with Shift+Tab (and notice 'Passwords match!' is still displayed)

This lets you submit an invalid form.

I am not sure if this is caused by the same Radix-UI bug or not, or whether the community PR would fix it.

Layout shift when you finish typing your second password and go to click submit (cosmetic only)

Unsure if this is an issue, but when you type in the 'Enter new password again' and then click submit, the layout shifts because the 'Passwords match!' message appears and pushes the submit button down. This isn't really a big problem but it is a little bit jarring.

[matrixbot]

For your information, this issue has been copied over to the Element fork of matrix-authentication-service: element-hq/matrix-authentication-service#2855