feat(sign-up-page): implement sign-up page with form fields, validation, and Google sign-in option

[LikithaYadavG]

PR Template & Definition of Done

What does this PR do?

• Implements a Sign Up page with email, password, and confirm password form fields
• Adds Google sign-in option and navigation link to the Sign In page

What steps does your reviewer have to take to test this PR manually?

1. Navigate to the sign-up page in the application
2. Verify the email, password, and confirm password fields accept input
3. Verify the "Create Account" button and "Continue with Google" button are present
4. Click the "Sign in" link and confirm it navigates to /signin

Pull Request standards checklist - Please check off

• This Branch will be carrying one single responsibility - feature/bugfix/style/refactor...
• I have followed conventional commit messages and descriptive Branch naming.
• My PR has descriptive folder/file names that I have worked on.

Testing checklist - Please check off

• I have performed manual testing on my local to validate all changes.

If you have not followed and completed any of the above, please explain why below.
N/A

Definition of Done - Please check off

• My code is well tested and I have confidence my code works as I expect in a variety of situations.
• I have lint and format code is enabled when the file is saved and I have fixed all errors highlighted by lint.
• I have deleted all non-descriptive comments and dead code from the files I've touched.
• I have rebased my branch with the base branch I want to merge into and all the commits in this PR are my own.

[codewalnut-labs]

@cw-pr-agent review

[mergemitra]

Change Summary

Implements the Sign Up page UI with form fields, submission handling, and Google sign-in action. Adds tests covering form field rendering, input interaction, and supporting buttons/links to ensure the page behaves as expected. Provides navigation guidance to the Sign In page from the new screen.

File Changes

File	Summary
src/features/auth/SignUpPage.test.tsx	Adds tests verifying form inputs, buttons, and links render and accept typing.
src/features/auth/SignUpPage.tsx	Implements Sign Up layout with email/password inputs, Google option, and Sign In link.

Based on 34933d8...8022a9d

[mergemitra]

PR Scorecard

Score

Scoring Methodology

Communication Scoring Framework

The overall communication score is a weighted average:

Dimension	Weight	Evaluates
PR Description Quality	60%	Title format (conventional commits) + Description clarity (what changed & why)
PR Size & Scope	25%	Appropriate sizing, scope cohesion, and justification for size
Commit Messages	15%	Conventional commits format, atomic & descriptive changes

Formula: (Description x 0.6) + (PR Size x 0.25) + (Commits x 0.15)

Code Scoring Framework

The scorecard evaluates code using 3 key reviewer questions:

Reviewer Question	Category
Is this the right solution, implemented the right way?	Code Correctness
Would this catch bugs if the code broke tomorrow?	Test Quality
Can someone new understand and safely modify this in 6 months?	Maintainability

PR Communication Notes

Description Quality

• ✅ PR description follows the template well and includes clear manual test steps
• ❌ Description says "validation" but code only has required fields and no validation logic
• ❌ "Google sign-in option" appears to be UI-only (button) with no auth handler implemented

PR Size & Scope

• ✅ Small, focused PR (2 files) centered on the SignUpPage feature
• ✅ Includes a dedicated test file for the new page UI and interactions

Commit Messages

• ✅ Commit message follows conventional commits with a clear scope (feat(sign-up-page))
• ❌ Commit message mentions validation/Google sign-in though the change is mostly UI with no handlers

Issue Notes

Code Correctness & Design Quality

• 🟠 handleSubmit at src/features/auth/SignUpPage.tsx:13 prevents default but performs no validation or sign-up action so submitting the form appears broken
• 🟠 “Continue with Google” button at src/features/auth/SignUpPage.tsx:81 has no click handler so the advertised Google sign-in option isn’t functional
• 🟠 autoComplete="off" on credentials at src/features/auth/SignUpPage.tsx:40, src/features/auth/SignUpPage.tsx:51, src/features/auth/SignUpPage.tsx:62 blocks autofill/password managers and can worsen sign-up UX/security

Test Quality & Coverage

• 🟠 Tests at src/features/auth/SignUpPage.test.tsx:15 only assert rendering/typing and don’t cover key behaviors (submit flow, password mismatch validation, sign-in link target), so regressions can slip in

Code Readability & Maintainability

• 🟠 Exported component SignUpPage at src/features/auth/SignUpPage.tsx:8 has no explicit return type which weakens TS guarantees for a public API

💬 Minor Issues (Nitpicks)

Test Quality & Coverage

• 💬 Using BrowserRouter at src/features/auth/SignUpPage.test.tsx:4 makes navigation assertions harder and reduces test isolation vs MemoryRouter/router stubs

Code Readability & Maintainability

• 💬 Inline onChange lambdas at src/features/auth/SignUpPage.tsx:37, src/features/auth/SignUpPage.tsx:48, src/features/auth/SignUpPage.tsx:59 create new functions each render and make handlers harder to reuse/test

Based on 34933d8...8022a9d

[mergemitra]

Severity: 🟠 Major

handleSubmit currently prevents default but never validates or triggers a sign-up flow; add at least a password/confirm match check and surface an error (and/or call into your auth API).

if (password !== confirmPassword) return setFormError("Passwords do not match");

[mergemitra]

Severity: 🟠 Major

The “Continue with Google” button has no action; wire it to a handler (or accept an onGoogleSignIn prop) and set type="button" to avoid accidental form submits if layout changes.

<Button type="button" onClick={handleGoogleSignIn} ...>

[mergemitra]

Severity: 🟠 Major

Tests are mostly presence checks; add behavior assertions (e.g., sign-in link target and validation) and use MemoryRouter for isolation.

render(<MemoryRouter><SignUpPage /></MemoryRouter>);
expect(screen.getByRole('link',{name:/sign in/i})).toHaveAttribute('href','/signin');

[mergemitra]

PR Overview

PR Type: Feature

Focus Areas for Architect Review

• The PR description promises validation and Google sign-in, but the current UI doesn’t implement any submit/validation behavior or Google auth action—clarify whether this PR is intended to be UI-only or should integrate with the auth flow.
• Consider standardizing the auth pages to accept injected callbacks/services (e.g., onSignUp, onGoogleSignIn) to keep UI components testable and avoid coupling to router/auth implementation details.

PR Insights

Potential PR Improvements

• Correctness: Form submit lacks validation and sign-up action handling.
• Correctness: Google sign-in button needs a click handler implementation.
• Best Practices: Avoid disabling autocomplete for credential fields.
• Code Maintainability: Add explicit return type for exported React component.
• Testing: Add tests for submit flow, validation, and link navigation.

PR Strengths

• Description Quality: PR description includes clear steps for manual verification.
• Testing: Basic rendering and typing tests cover primary form fields.
• Code Maintainability: Shared render helper reduces repeated test setup code.
• Best Practices: Uses semantic labels and accessible roles for queries.
• PR Size: Changes are focused on a single new page feature.