Change password form in Settings - Account

[Jakoma02]

The "Change password" form was updated to use KDS components instead of Vuetify components. The PasswordField component was replaced with KTextBox, and VForm was replaced with a form. Validation was implemented using formMixin. The tests were modified to pass with the new validation interface, and a new test case was added to improve clarity (the previous description of the test said that it tested if the validation failed when the passwords did not match, but in fact, it failed because the password was too short).

I tested the changes by interacting with the form in a browser and checking the validation behavior in various scenarios, with the interface set to both LTR and RTL languages. I also tested the mobile experience by using the "Toggle device" developer feature in Chromium.

References

Solves #5061.

Reviewer guidance

The behavior of the old and new forms differs in several aspects outlined below. The differences stem from technical differences between the two approaches. Special care should probably be taken to ensure that the new behavior is expected and acceptable.

• When a text field is edited to have invalid content, the validation error immediately appears. In contrast, in the original form, validation errors are not displayed when the text field has focus, and are only shown when it stops being focused. The new behavior matches the behavior of other forms that are already using KDS (e.g., the Request more space form). If the original behavior is desired, KTextbox should probably be changed to reflect this expectation.

• When the new password is cleared to be an empty string, the validation error "Password should be at least 8 characters long" is displayed. In contrast, in the original form, the validation error "This field is required" is displayed. This is caused by formMixin only returning the binary result of the validation instead of the error message. If this is undesirable, formMixin should probably be refactored to be slightly more versatile in returning more than two validation results.

• When both the new password and confirmation fields are edited and then cleared, the confirmation field shows no validation error. In contrast, in the original form, the validation error "This field is required" is displayed for the confirmation field. This is caused by the required property being ignored by formMixin when a custom validator is also specified, and is connected to the previous point.

[AlexVelezLl]

Hey @Jakoma02! Thanks for this! We will get this reviewed soon 🤗. Just a little correction, this will close #5061 and not #5062, so if you can update the PR description, that would be great 😅. Thanks!

[Jakoma02]

You are of course correct, I got confused by the similar-looking issue names 😅 I fixed the mistake.

[MisRob]

Ahoj Jakube, Kubo, hi Jakub 🙂!

This is very well done - thanks a lot for following all the guidance, and also for taking time to examine and describe the differences you observed in such a detail. Much appreciated.

I would say that experience is better now because for example we can see "Password should be at least 8 characters long" until it's really fixed 👍 But leaving my opinions aside, most importantly, as you too noted, this is aligned precisely with how KDS and similar forms work in both Kolibri and Studio, so it's okay.

I've too tested in my local Studio and haven't observed any issues. Code makes sense. Just left one minor note for tests, but it's not blocking.

[MisRob]

Thanks a lot @Jakoma02, very nice contribution.

[Jakoma02]

Ahoj Míšo! 🙂 🇨🇿

Thank you for the kind feedback and for cleaning up the tests. I am looking forward to collaborating in the future!