feat(sign-in-page): implement sign-in page with email and password inputs, Google sign-in button, fix footer position, and test by LikithaYadavG · Pull Request #10 · cw-learning/Likitha-react-developer-hub

LikithaYadavG · 2026-01-23T06:38:43Z

PR Template & Definition of Done

What does this PR do?

Implements a sign-in page with email and password input fields, and a Google sign-in button
Fixes footer positioning using flexbox layout to ensure it stays at the bottom of the screen

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

Navigate to the sign-in page and verify email/password inputs and Google sign-in button render correctly
Check that the footer stays at the bottom of the viewport when page content is short, and scrolls naturally when
content is long

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. merge into and all the commits in this PR are my own.

…puts, Google sign-in button and tests

…ng in footer

codewalnut-labs · 2026-01-30T11:07:20Z

@cw-pr-agent review

mergemitra · 2026-01-30T11:07:36Z

Change Summary

Implements a dedicated sign-in page featuring form inputs, Google-authentication button, and supporting navigation. Adds a reusable Google logo component paired with tests to ensure proper rendering and accessibility. Adjusts layout and footer structure so the page fills viewport height and keeps the footer anchored via flexbox.

File Changes

File	Summary
src/app/layout/Layout.tsx	Adds flex layout so main content expands and footer stays at the bottom.
src/components/footer/Footer.tsx	Removes bottom margin, relying on layout flexbox to keep footer flush.
src/components/googlelogo/GoogleLogo.test.tsx	Adds unit tests confirming GoogleLogo rendering, classes, and accessibility attribute.
src/components/googlelogo/GoogleLogo.tsx	Implements Google SVG icon component with configurable className and accessibility props.
src/features/auth/SignInPage.test.tsx	Adds SignInPage tests covering inputs, buttons, and navigation link rendering.
src/features/auth/SignInPage.tsx	Implements styled sign-in page with form inputs, Google button, and navigation link.

Based on c6258a0...34933d8

mergemitra · 2026-01-30T11:11:34Z

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

✅ Description follows the template and clearly explains what changed, why, and manual test steps
❌ Title is very long; shorten while keeping format, e.g. 'feat(auth): add sign-in page UI and footer layout fix'

PR Size & Scope

✅ 242 lines across 6 files is an ideal, focused scope for sign-in UI + layout tweak + tests
✅ Tests included alongside the feature (SignInPage and GoogleLogo), which keeps the PR reviewable

Commit Messages

✅ Both commits follow conventional commits format with clear scopes (sign-in-page, layout)
❌ Commit subjects are quite long; keep the summary shorter and push details into the PR description

Issue Notes

Code Correctness & Design Quality

🟠 expect used without import at src/features/auth/SignInPage.test.tsx:19 can fail TypeScript/test runtime depending on Vitest globals configuration
🔴 React.FormEvent at src/features/auth/SignInPage.tsx:12 relies on a global React type namespace and can fail TS compile; import FormEvent (or type React) explicitly
🟠 Invalid autoComplete="current password" at src/features/auth/SignInPage.tsx:50 prevents standard browser/password-manager autofill from working reliably
🟠 min-h-screen wrapper at src/features/auth/SignInPage.tsx:17 can force extra height inside the app layout and undermine the footer-bottom flex behavior
🟠 bg-linear-to-br at src/features/auth/SignInPage.tsx:17 may not be a valid Tailwind utility in this project, causing the gradient background to be missing

Test Quality & Coverage

🟠 Footer-bottom flex change at src/app/layout/Layout.tsx:8, src/components/footer/Footer.tsx:3 has no regression test, so layout breakage may go unnoticed

💬 Minor Issues (Nitpicks)

Test Quality & Coverage

💬 Class assertion at src/components/googlelogo/GoogleLogo.test.tsx:33 checks only w-8, so regressions on the other expected classes (e.g. h-8) may slip
💬 Tests at src/features/auth/SignInPage.test.tsx:15 don’t cover a submit interaction (click Sign In / press Enter), so broken onSubmit wiring could slip through

Code Readability & Maintainability

💬 Exported components lack explicit return types at src/app/layout/Layout.tsx:6, src/components/footer/Footer.tsx:1, src/components/googlelogo/GoogleLogo.tsx:5, src/features/auth/SignInPage.tsx:8, making accidental return type changes easier to miss
💬 Using container.querySelector("svg") at src/components/googlelogo/GoogleLogo.test.tsx:23 gives weaker failure output and allows null values; assert non-null first or use stronger queries when possible
💬 Using BrowserRouter in a unit test at src/features/auth/SignInPage.test.tsx:4 couples tests to DOM history; MemoryRouter is usually simpler and more isolated
💬 Inline onChange={(event) => ...} at src/features/auth/SignInPage.tsx:36, src/features/auth/SignInPage.tsx:47 creates new functions each render and uses a generic param name, making profiling/debugging harder

Based on c6258a0...34933d8

mergemitra · 2026-01-30T11:11:35Z

+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+
+	const handleSubmit = (event: React.FormEvent) => {


Severity: 🔴 Critical

Avoid relying on a global React namespace for event types—import FormEvent (or type React) so TS builds don’t break.

import { useState, type FormEvent } from "react"; ... const handleSubmit = (event: FormEvent<HTMLFormElement>) => {

mergemitra · 2026-01-30T11:11:35Z

@@ -0,0 +1,69 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it } from "vitest";


Severity: 🟠 Major

Import expect (or ensure Vitest globals are enabled) so the test file works consistently with the rest of the suite.

import { describe, it, expect } from "vitest";

mergemitra · 2026-01-30T11:11:35Z

 export const Layout = () => {
 	return (
-		<div className="min-h-screen bg-gray-50">
+		<div className="min-h-screen bg-gray-50 flex flex-col">


Severity: 🟠 Major

Add a small regression test for the footer-bottom flex layout so future class refactors don’t reintroduce the floating footer.

(For example: render the layout with a minimal router + outlet, then assert the root has flex flex-col and <main> has flex-1.)

mergemitra · 2026-01-30T11:11:51Z

PR Overview

PR Type: Feature

Focus Areas for Architect Review

Confirm routing/layout strategy for auth pages: the SignInPage uses min-h-screen and full-screen styling, which may clash if it’s rendered inside the global Layout (header/footer) vs having its own “auth layout”.
Ensure the Tailwind utility set supports bg-linear-to-br (otherwise switch to the project’s supported gradient class, e.g. bg-gradient-to-br).

PR Insights

Potential PR Improvements

Correctness: Avoid relying on implicit globals like expect and React types.
Correctness: Use standard autoComplete values for reliable password-manager autofill.
Correctness: Avoid nested min-h-screen that can break footer flex layouts.
Testing: Add submit and footer-position regression tests for key flows.
Code Maintainability: Prefer stronger test queries and explicit component return types.

PR Strengths

Description Quality: PR description gives clear intent and manual testing steps.
Testing: Added focused component tests for new UI elements.
Best Practices: Marked decorative SVG as aria-hidden and non-focusable.
Code Maintainability: Introduced small reusable UI components like GoogleLogo.
Best Practices: Layout uses flexbox to keep footer at viewport bottom.

vishnu-tsx · 2026-01-30T11:19:02Z

@cw-pr-agent ls

mergemitra · 2026-01-30T11:19:05Z

Available Commands

Command	Description
`@cw-pr-agent review`	Full review of the PR diff, considering all previous comments in the conversation
`@cw-pr-agent rereview`	Review only changes since last reviewed commit (falls back to full review if no previous reviews)
`@cw-pr-agent list`	List all available commands

Aliases

analyse, analyze → review
ls → list

More commands coming soon!

LikithaYadavG added 2 commits January 23, 2026 11:46

feat(sign-in-page): implement sign-in page with email and password in…

be5ffbd

…puts, Google sign-in button and tests

fix(layout): adjust layout structure for consistent styling and spaci…

34933d8

…ng in footer

LikithaYadavG requested a review from aravind-cw January 23, 2026 06:38

mergemitra Bot reviewed Jan 30, 2026

View reviewed changes

Uh oh!

Conversation

LikithaYadavG commented Jan 23, 2026

PR Template & Definition of Done

What does this PR do?

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

Pull Request standards checklist - Please check off

Testing checklist - Please check off

Definition of Done - Please check off

Uh oh!

codewalnut-labs commented Jan 30, 2026

Uh oh!

mergemitra Bot commented Jan 30, 2026

Change Summary

Uh oh!

mergemitra Bot commented Jan 30, 2026

PR Scorecard

Score

Communication Scoring Framework

Code Scoring Framework

Description Quality

PR Size & Scope

Commit Messages

Issue Notes

Code Correctness & Design Quality

Test Quality & Coverage

Test Quality & Coverage

Code Readability & Maintainability

Uh oh!

mergemitra Bot Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

mergemitra Bot Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

mergemitra Bot Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

mergemitra Bot commented Jan 30, 2026

PR Overview

Focus Areas for Architect Review

Potential PR Improvements

PR Strengths

Uh oh!

vishnu-tsx commented Jan 30, 2026

Uh oh!

mergemitra Bot commented Jan 30, 2026

Available Commands

Aliases

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants