Code Improvements added for upscaling the Frontend UX

[vaishcodescape]

Description

I've implemented several improvements to enhance the user experience and form validation:

Related Issue

#449

Changes Made

Added a password strength indicator that:
Shows a visual progress bar
Provides real-time feedback on password requirements
Changes color based on password strength
Gives specific feedback on what's missing
Implemented progressive form validation that:
Validates fields as users complete them
Shows immediate feedback on field blur
Prevents form submission until all fields are valid
Added loading states with:
A skeleton loader during form submission
Visual feedback during validation
Smooth transitions between states

Checklist

• I have tagged the issue in this PR.
• I have attached necessary screenshots.
• I have provided a short description of the PR.
• I ran yarn build and build is successful
• My code follows the style guidelines of this project.
• I have added necessary documentation (if applicable)

---

Important

Enhance signup UX with password strength indicator, progressive validation, and loading states using new components in signup.tsx.

• Password Strength Indicator:
  • Added PasswordStrength component in password-strength.tsx to show password strength with a progress bar and feedback messages.
  • Integrated into signup.tsx to provide real-time feedback on password requirements.
• Progressive Form Validation:
  • Added validateField() in signup.tsx to validate fields on blur and provide immediate feedback.
  • Prevents form submission until all fields are valid.
• Loading States:
  • Added FormSkeleton component in form-skeleton.tsx to show a skeleton loader during form submission.
  • Integrated into signup.tsx to provide visual feedback during validation and submission.

^{This description was created by for bbb4e37. You can customize this summary. It will automatically update as commits are pushed.}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pear-landing-page	❌ Failed (Inspect)			Jun 10, 2025 0:57am

[vercel]

@vaishcodescape is attempting to deploy a commit to the PearAI Team on Vercel.

A member of the Team first needs to authorize it.

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to bbb4e37 in 1 minute and 37 seconds. Click for details.

• Reviewed 220 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 5 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. components/auth/signup.tsx:45

• Draft comment:
  The 'isValidating' state is updated during field blur but isn’t reflected in the UI. Consider adding a visual indicator (e.g. spinner or disabling the field) to inform users that validation is in progress.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 30% vs. threshold = 50% While showing a loading state during validation could improve UX, this seems like a minor UI enhancement suggestion rather than a critical issue. The validation is likely very quick since it's client-side form validation. The form already has proper error message display through FormMessage. The isValidating state was just added in this PR, so the comment is about changed code. The validation might be so quick that adding a loading indicator could cause UI flicker and worsen the user experience. We don't know if there's any async validation happening that would warrant showing a loading state. Even if validation is quick, having the state available but unused does seem like a code smell that should be addressed - either by using it or removing it. While this is a valid observation about unused state, it's more of a nice-to-have UI enhancement than a critical issue requiring immediate attention.

2. components/auth/signup.tsx:47

• Draft comment:
  Consider checking for a missing captcha token before setting isSubmitting to true. This avoids unnecessary UI state changes if the captcha isn’t completed.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

3. components/ui/form-skeleton.tsx:19

• Draft comment:
  File is missing a newline at the end. Adding a trailing newline improves consistency and avoids potential lint warnings.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% Missing newlines are typically caught by linters and formatters. This is a very minor issue that would be automatically fixed by most modern development toolchains. According to our rules, we shouldn't comment on things that would be caught by the build process. Even if there isn't a linter configured, this is too minor to warrant a comment. What if the project doesn't have proper linting set up? A missing newline could cause issues with some tools and git diffs. Even without linting, this is still too minor of an issue to warrant a PR comment. If it's causing real problems, it should be handled through tooling configuration rather than manual review comments. Delete this comment as it's too minor and would typically be handled by automated tooling.

4. components/ui/password-strength.tsx:21

• Draft comment:
  Consider explicitly typing the 'feedback' array (e.g. as string[]) for improved type safety.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While explicit typing can improve readability and type safety, in this case TypeScript will correctly infer the type as string[] based on usage. The array only contains string literals and is used with string operations. The suggestion doesn't fix any actual problems and doesn't meaningfully improve code quality. The comment does promote TypeScript best practices and could make the code more self-documenting. There might be future modifications where explicit typing could prevent errors. However, TypeScript's type inference is reliable here and the array's usage is simple and contained within a single scope. The benefit is minimal compared to the added verbosity. The comment should be deleted as it suggests a change that provides no meaningful benefit and doesn't fix any actual issues.

5. components/ui/password-strength.tsx:105

• Draft comment:
  File is missing a newline at the end. Consistently ending files with a newline can help avoid formatting issues.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% While the comment is technically correct, our rules state we should not comment on purely stylistic issues or things that would be caught by standard tooling. Missing newlines at end of file are typically caught by ESLint, Prettier, or other code formatting tools. This is not a logic issue and doesn't affect functionality. The missing newline could potentially cause issues with some tools or when concatenating files. It's a widely accepted best practice. While it is a best practice, this is exactly the kind of issue that should be handled by automated tooling rather than manual review comments. If it's important to the team, it should be enforced by ESLint/Prettier. This comment should be removed as it addresses a minor formatting issue that should be handled by automated tooling rather than manual review.

Workflow ID: wflow_aehkj5gfh4mJWmaH

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}