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]

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.
• 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]

Hello @Endless8, thank you for raising a pull request.

Currently, the pull request is marked as https://github.com/MilanCommunity/Milan/labels/status%3A%20todo%20%E2%8F%B3 so please wait until the maintainers/owner review it and provide you with feedback/suggestions to proceed further.

Feel free to reach out to Tamal on Twitter, or drop a mail at [email protected] if you think that this pull request is of critical priority.

Give us a ⭐ to show some support
Happy OpenSource 🚀

[coderabbitai]

Review Status

Actionable comments generated: 6

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 0960f3b and bafe168.

Files selected for processing (4)

• src/hooks/useFormLogic.js (1 hunks)
• src/hooks/useValidation.js (3 hunks)
• src/pages/Auth/AuthPage.css (1 hunks)
• src/pages/Auth/AuthSignup.jsx (16 hunks)

Files skipped from review due to trivial changes (1)

• src/pages/Auth/AuthPage.css

Additional comments: 3

src/hooks/useValidation.js (2)

• 144-147: The error message for the club description length is clear, but the condition for checking the length is missing in the provided hunk. Ensure that the condition for checking the length of credentials.description is present and correct to avoid pushing an error when it's not necessary.

• 242-254: The pincode validation checks for a length of exactly 5 or 6 characters, which is a common requirement for postal codes in many countries. However, ensure that this requirement matches the expected format for pincodes in the target user demographic. If pincodes can have different lengths or formats, this validation might need to be adjusted.

src/pages/Auth/AuthSignup.jsx (1)

• 428-431: The renderErrorMessage function is called after each input field to display the error message related to that field. This is a good practice for user experience as it provides immediate feedback. However, ensure that the renderErrorMessage function is not causing unnecessary re-renders. If performance issues are observed, consider memoizing the error messages or the function itself.

[coderabbitai]

Review Status

Actionable comments generated: 1

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between bafe168 and 856161a.

Files selected for processing (1)

• src/hooks/useFormLogic.js (1 hunks)

[github-actions]

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

[coderabbitai]

Review Status

Actionable comments generated: 2

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 856161a and 37736d1.

Files selected for processing (2)

• src/hooks/useValidation.js (3 hunks)
• src/pages/Auth/AuthSignup.jsx (16 hunks)

Additional comments: 1

src/pages/Auth/AuthSignup.jsx (1)

• 53-76: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [53-432]

The implementation of the renderErrorMessage function and its usage across various form fields is consistent and aligns with the pull request's aim to enhance user experience by providing clearer, field-specific error messages.