[Feature]: Improve authentication UX with client-side validation and submission state handling

[dev-2006-prt]

Summary

Improve the authentication forms by adding client-side validation and preventing duplicate form submissions during login and registration.

Problem

Currently, users may be able to submit authentication forms with incomplete or invalid input. Additionally, the submit button remains active while an authentication request is being processed, which can lead to multiple submissions and a confusing user experience.

This affects users interacting with the login and registration forms and may result in unnecessary duplicate requests being sent to the server.

Proposed solution

• Add client-side validation for:

  • Empty required fields
  • Invalid email formats
  • Password requirements (if applicable)

• Display clear validation messages to users before form submission.

• Disable the submit button while an authentication request is in progress.

• Provide visual feedback during submission (e.g., loading text or a spinner).

Benefits

• Improves overall user experience.
• Prevents accidental duplicate submissions.
• Reduces unnecessary requests to the backend.
• Provides users with immediate feedback on invalid input.
• Makes the authentication flow feel more responsive and reliable.

Additional context

This enhancement focuses on the authentication forms and does not require changes to the existing authentication logic. The goal is to improve usability while maintaining current functionality.

Notes for contributors

I would be interested in working on this issue if it is approved by the maintainers.

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊