Fix: Prevent form reset on submit when errors are present

[rumzledz]

Description

The problem is that the form was being reset when submitted even though errors are present. We don't want that to happen.

Testing

1. Open the UserAccountPage/hooks.tsx file and update line 31 to:

return { canChangeUsername: true, daysTillUsernameChange };

2. Connect Amy's wallet (Wallet 2)
3. Go to the profile page: http://localhost:9091/account/profile
4. Enter "leela" in the Username field
5. Click the Save changes button repeatedly
6. Verify that the form doesn't submit

Resolves #3730

[mmioana]

Nice work on this one @rumzledz 🙌

Can confirm the form doesn't get submitted if there are errors present

Screen.Recording.2024-12-18.at.22.52.52.mov

I left a small refactoring comment, but it shouldn't block this PR getting merged 💯

[mmioana]

@rumzledz would it make sense to have a variable const hasErrors = !Object.keys(formErrors) and use that in the useEffect?

  useEffect(() => {
    if (isSubmitting && resetOnSubmit && !hasErrors) {
      reset(values);
    }
  }, [isSubmitting, values, resetOnSubmit, reset, hasErrors]);

[bassgeta]

Nice catch, this is quite a silly bug honestly, glad it wasn't a pain to solve it 👍

On the right you can see an empty console, since nothing was submitted after spamming the Save changes button :D

Nice one 💪

[iamsamgibbs]

Nice fix! I agree with @mmioana 's code suggestion.

I think we should probably add a check to auth proxy to determine if the username is actually available as we're only doing a frontend check here which would be possible to bypass. I know we try to avoid adding anything to auth proxy unless it's really necessary, but I think we can check if the username is actually changing and only query the database in that case and it would probably be okay. (Also aware that at some point the user profile will be split into public / private, but seeing as the username is public I don't think this would be affected by that change).