added the input-contraints-text

[Aditya30ag]

🔧 Changes Made

<p className="text-xs text-gray-400 p-2">Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one special character.</p>  

📷 Screenshots or Visual Changes (if applicable)

✅ Checklist

• I have read the contributing guidelines.
• I have added tests that prove my fix is effective or that my feature works.
• I have added necessary documentation (if applicable).
• Any dependent changes have been merged and published in downstream modules.

Summary by CodeRabbit

• New Features

  • Added password requirements helper text to the sign-up form.

• Style

  • Updated password field placeholder text for clarity.

[coderabbitai]

Walkthrough

The SignUpPage component was updated with minor UI improvements: the password re-entry field placeholder text was corrected to use proper grammar, and new inline helper text was added below the password confirmation input to describe password requirements.

Changes

Cohort / File(s)	Summary
Password field UI improvements frontend/src/components/pages/SignUpPage.tsx	Updated password re-entry placeholder text from "Reenter Password" to "Re-enter Password"; added inline helper text paragraph describing password requirements below password confirmation input

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A dash, a space, a password's care,
Re-enter now with proper flair!
The helper text hops in to guide,
With safety tips right by your side.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title Check	❓ Inconclusive	The title "added the input-contraints-text" is technically related to the changeset, as a constraint helper text was indeed added to the SignUpPage component. However, the title is vague and lacks clarity—it reads more like a technical branch name or variable identifier rather than a clear description of the actual change. A teammate scanning the history would not immediately understand that password requirement constraints were added to a form field, or where this change was applied. Additionally, there is a spelling error ("contraints" instead of "constraints"), further reducing clarity.	Consider revising the title to be more descriptive and user-focused, such as "Add password requirements helper text to SignUpPage" or "Display password constraints on sign-up form". This would clearly communicate the change and its purpose while maintaining conciseness, and would also address the spelling issue.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/src/components/pages/SignUpPage.tsx (1)

156-156: Consider relocating the helper text and adding accessibility attributes.

The password requirements text accurately describes the validation rules, which is great. However, there are two improvements to consider:

1. Placement: The helper text appears after the password confirmation field, but the requirements apply to the password field (line 145). Moving it immediately after the password field would provide better UX, as users typically expect to see requirements near the field they apply to.

2. Accessibility: The helper text should be programmatically associated with the password input field using aria-describedby so screen reader users understand which field the requirements apply to.

Apply this diff to improve placement and accessibility:

                <InputField
                  icon={Lock}
                  type="password"
                  name="password-1"
                  placeholder="Password"
                  required
+                 aria-describedby="password-requirements"
                />
+               <p id="password-requirements" className="text-xs text-gray-400 p-2">Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one special character.</p>
                <InputField
                  icon={Lock}
                  type="password"
                  name="password-2"
                  placeholder="Re-enter Password"
                  required
                />
-               <p className="text-xs text-gray-400 p-2">Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one special character.</p>

Note: You'll need to update the InputField component (line 38) to accept and spread additional props like aria-describedby:

const InputField = ({ icon: Icon, className, ...props }: InputFieldProps) => (
  <div className="relative">
    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
      <Icon className="h-5 w-5 text-gray-400" />
    </div>
    <input
      {...props}
      className={`block w-full pl-10 pr-3 py-2 border border-gray-800 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent ${className ?? ''}`}
    />
  </div>
);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 360c91d and 6a52014.

📒 Files selected for processing (1)

• frontend/src/components/pages/SignUpPage.tsx (1 hunks)

🔇 Additional comments (1)

frontend/src/components/pages/SignUpPage.tsx (1)

153-153: LGTM! Nice grammatical improvement.

The hyphenation in "Re-enter Password" is grammatically correct and improves readability.