525 implement ability to change password

[YanZhylavy]

Added ability to change password for user.

[mehalyna]

The .catch() block only displays a generic error message. Consider improving error handling by parsing the error response from the server to provide more specific feedback to the user

[YanZhylavy]

Thank you! Initially, I was outputting the error status code, but the team advised against it as it's not user-friendly. I'll consider better ways to inform the user.

[mehalyna]

useEffect has [props] as a dependency, which could lead to unnecessary re-executions if props object itself changes but not its values. Consider destructuring props outside useEffect and using specific properties in the dependency array
e.g.

const { currentFormNameHandler, curForm } = props;
useEffect(() => {
  currentFormNameHandler(curForm);
}, [currentFormNameHandler, curForm]);

[mehalyna]

There seems to be a typo in the requredField prop (should be requiredField). Moreover, HTML5 form validation could be utilized by using the required attribute on inputs instead of handling this manually

[mehalyna]

The function updates state multiple times which can lead to performance issues or unexpected renders. It would be better to consolidate state updates into a single function call if possible

[mehalyna]

const handleInputChange = (e) => {
    e.preventDefault();
    const { name, value } = e.target;
    const newFormData = { ...formData, [name]: value };

    const newInvalidPasswordError = newFormData.newPassword !== '' && !PASSWORD_PATTERN.test(newFormData.newPassword)
        ? 'Пароль не відповідає вимогам'
        : null;

    const newPasswordsDontMatchError = newFormData.reNewPassword !== '' && newFormData.newPassword !== newFormData.reNewPassword
        ? 'Паролі не співпадають'
        : null;

    // Update all states in one go
    setFormData(newFormData);
    setInvalidPasswordError(newInvalidPasswordError);
    setPasswordsDontMatchError(newPasswordsDontMatchError);
};

[mehalyna]

requredField seems to be misspelled. The correct spelling should be requiredField

[YanZhylavy]

Yes, you're right! Initially, I was reusing the existing HalfFormField component in the project where this typo was present (the component was taking prop 'requredField' instead of 'requiredField'), and then I forgot to correct the improper prop passing when I wrote my PasswordField.

[mehalyna]

The toggle button for showing/hiding the password doesn’t have an accessible label or an aria-label attribute. Adding accessible labels should be useful for users who rely on screen readers
e.g.

<span className={css['password-visibility']} onClick={togglePassword} aria-label={showPassword ? "Hide password" : "Show password"}>
   {!showPassword ? <EyeInvisible /> : <EyeVisible />}
</span>

[YanZhylavy]

Thank you, will be done.

[mehalyna]

The error message section will display even if props.error is an empty string and props.requredField is true. It might be more logical to display this section only if there is an error message to show

[YanZhylavy]

Thank you, I'll consider it.

[mehalyna]

Using a <span> for the password visibility toggle is not ideal because spans are not inherently focusable or interactive elements. Consider using a <button> instead, which is more appropriate for actions and improves accessibility
e.g.

<button className={css['password-visibility']} onClick={togglePassword} type="button">
   {!showPassword ? <EyeInvisible /> : <EyeVisible />}
</button>

[YanZhylavy]

I agree with this point. I added a span there because it's done that way in our LoginPage component.