fix: validation errors in signup form

[Endless8]

closes #1172

👷🏻 Changes made

I removed the toast notifications, assigned the validation errors to formState and output them below the corresponding field adding a field property to all the errors for filtering.

📸 Screenshots

Summary by CodeRabbit

• Refactor

  • Streamlined form error handling by setting form errors directly in the state instead of individual toast notifications.

• New Features

  • Introduced specific field error messages in the signup form for improved user guidance.

• Style

  • Added new styles for displaying error messages on the authentication page for better visibility.

• Bug Fixes

  • Enhanced website field validation to ensure the input is a valid URL.

[coderabbitai[bot]]

Walkthrough

The changes involve updating the form validation and error display logic in a signup form. Instead of using toast messages to show validation errors, the errors are now directly associated with each form field and displayed beneath them. This approach enhances user experience by providing immediate, contextual feedback on input fields.

Changes

File Path	Change Summary
src/hooks/useFormLogic.js	Removed toast messages for errors; directly set form errors in state.
src/hooks/useValidation.js	Added field property to error objects; updated error messages; added URL validation for website field.
src/pages/Auth/AuthPage.css	Added styles for error messages.
src/pages/Auth/AuthSignup.jsx	Added renderErrorMessage function to display errors below form fields.

Assessment against linked issues

Objective	Addressed	Explanation
Validation error should come inside form only rather than in form Toast message (#1172)	✅
Make object for every field-state that can contain validation error as well (#1172)	✅	The changes include associating errors with specific fields, which aligns with the objective of having field-specific error objects.
Show error just below of the fields (#1172)	✅	The renderErrorMessage function has been added to display errors directly below the corresponding form fields.

---

Tips

### Chat with CodeRabbit Bot (`@coderabbitai`) - If you reply to a *review comment* from CodeRabbit, the bot will automatically respond. - To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment - Note: Review comments are made on code diffs or files, not on the PR overview. - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Note: For conversation with the bot, please use the review comments on code diffs or files. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json`

[github-actions[bot]]

This pull request has been deployed to Vercel.

Latest commit:	856161a
✅ Preview:	https://milan-75jf1lnld-iamtamal.vercel.app
🔍 Inspect:	https://vercel.com/iamtamal/milan/4LcZGiFk86zosxqhsthJ25R1vJRm

View Workflow Logs