Skip to content

Implement login and signup UI with form validation and toggle functio… #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Bassal-11 merged 2 commits into from
Jun 4, 2026
Merged

Implement login and signup UI with form validation and toggle functio… #1

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4bd4bd6
Implement login and signup UI with form validation and toggle functio…
Bassal-11 Jun 4, 2026
25a43ec
Replace window.location.href with useNavigate hook and improve access…
Bassal-11 Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 130 additions & 1 deletion client/src/pages/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,134 @@
import { useState } from 'react';
import { heroSectionData } from '../assets/assets';
import { Link, useNavigate } from 'react-router-dom';
import { BikeIcon, EyeIcon, EyeOffIcon, LockIcon, MailIcon, UserIcon } from 'lucide-react';
import { LoaderIcon } from 'react-hot-toast';
Comment thread
coderabbitai[bot] marked this conversation as resolved.

const Login = () => {
return <div>Login</div>;
const [isLogin, setIsLogin] = useState(true);
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [showPassword, setShowPassword] = useState(false);

const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const navigate = useNavigate();
const handleSubmit = async (e: React.SubmitEvent) => {
e.preventDefault();
setLoading(true);
setTimeout(() => {
navigate('/');
}, 1000);
Comment thread
coderabbitai[bot] marked this conversation as resolved.
};
Comment on lines +16 to +22

@coderabbitai coderabbitai Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | 🏗️ Heavy lift

Authentication logic is missing.

The submit handler only sets a loading state and redirects—there's no actual authentication call to a backend API. This means anyone can access the app without valid credentials. Based on the context snippets, ProtectedRoute is also a stub with no auth enforcement.

This is a critical security gap for production. You'll need to:

  1. Integrate with an authentication API (login/signup endpoints)
  2. Store authentication tokens securely (httpOnly cookies or secure storage)
  3. Implement actual auth checks in ProtectedRoute
  4. Add error handling for failed authentication

Do you want me to open an issue with a template for implementing proper authentication with JWT tokens and protected routes?

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/pages/Login.tsx` around lines 15 - 21, The login handler
handleSubmit currently only fakes a redirect; replace that with a real
authentication flow: call your backend login endpoint (e.g., POST
/api/auth/login) with the form credentials, handle success by storing the
returned token/session securely (prefer httpOnly cookie via server Set-Cookie
or, if client-side, use secure storage and short-lived tokens), and
setLoading(false) only after the response; on failure setLoading(false) and
surface error messages. Also implement actual auth checks in the ProtectedRoute
component so it reads the auth state/token (call a validate or /me endpoint or
verify cookie) and redirects unauthenticated users to the login page. Ensure you
add try/catch around the network call in handleSubmit to handle network/server
errors and display error feedback to the user.

Comment on lines +18 to +22

@coderabbitai coderabbitai Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add cleanup for setTimeout and reset loading state properly.

The setTimeout is never cleaned up if the component unmounts during the delay, causing a potential memory leak and setState warning. Additionally, the loading state is never reset to false, which could cause issues if navigation fails.

🛡️ Proposed fix with cleanup 
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         setLoading(true);
-        setTimeout(() => {
-            window.location.href = '/';
-        }, 1000);
+        const timeoutId = setTimeout(() => {
+            navigate('/');
+            setLoading(false);
+        }, 1000);
+        
+        // Cleanup function
+        return () => clearTimeout(timeoutId);
     };

Even better, use useEffect for cleanup or handle it with proper async/await patterns when you add real authentication.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/pages/Login.tsx` around lines 17 - 21, The timeout started when
calling setTimeout to redirect should be cleaned up and the loading state reset
if the component unmounts or navigation fails: store the timeout id returned by
setTimeout (in the click handler or a ref/state), call clearTimeout(id) in a
useEffect cleanup (or on unmount), and ensure you setLoading(false) in that
cleanup or on error/failure paths so loading isn't left true; update the handler
that calls setLoading(true) and window.location.href to use this timeout id and
tie the cleanup to the component's lifecycle.

return (
<div className='min-h-screen flex'>
{/* left-side */}
<div className=' hidden lg:flex lg:w-1/2 bg-app-green relative items-center justify-center'>
<img
src={heroSectionData.hero_image}
alt='background image for login'
aria-label=' background image for login'
className=' absolute inset-0 object-cover h-full bg-center opacity-10 '
/>
<div className=' relative text-center px-12'>
<h2 className=' text-4xl text-semibold text-white mb-4'>Welcome back to Instacart</h2>
<p className='text-white/60 font-serif text-xl max-w-sm mx-auto'>Fresh groceries and organic produce, delivered to your doorstep.</p>
</div>
</div>
{/* right-side */}
<div className='flex-1 flex-center px-4 py-2 bg-app-cream'>
<div className='w-full max-w-md'>
{/* header form */}
<div className='text-center mb-8'>
<Link to='/' className='inline-flex items-center gap-2 mb-6'>
<BikeIcon className='size-8 text-app-green' /> <span className='text-3xl font-semibold text-app-green'>Instacart</span>
</Link>
<h1 className='text-2xl font-semibold text-app-green mb-2'>{isLogin ? 'Sign in to your account' : 'Sign up For a new account'}</h1>
<p className=' text-sm text-app-text-light"'>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
{isLogin ? "Don't have an account?" : 'Already have an account?'}{' '}
<button type='button' className=' text-orange-500 ml-1 font-semibold hover:text-orange-600 transition-colors" >' onClick={() => setIsLogin(!isLogin)}>
{isLogin ? 'Create an account' : 'Sign In'}
</button>
</p>
</div>
{/* form for sing in ans signup */}
<form onSubmit={handleSubmit} className='space-y-6'>
{!isLogin && (
<div>
<label htmlFor='name' className='text-sm flex flex-col gap-1'>
{' '}
Name
<div className='relative'>
<UserIcon className='absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-app-text-light' />
<input
type='text'
id='name'
value={name}
onChange={(e) => setName(e.target.value)}
required
placeholder='Enter your name'
className='w-full rounded-xl pl-10 pr-4 py-3 text-sm bg-white border not-focus:border-app-border transition-all'

@coderabbitai coderabbitai Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

Tailwind CSS v4 not-focus variant documentation and usage

💡 Result:

In Tailwind CSS v4, the not- variant family is a powerful addition that allows you to apply utility classes only when a specific condition is not true [1][2]. The not-focus: variant specifically applies styles to an element when it is not currently focused [1][3]. Usage and Key Concepts: - Conditional Logic: You can use not-focus: to define default states that are automatically overridden when the element gains focus [3]. This reduces the need for manual override logic in your CSS or complex class toggling [3]. - Composable Variants: The not- variant is highly composable. You can combine it with other variants, such as hover:, to create precise interaction states [1][4]. For example, the class hover:not-focus:bg-indigo-700 will apply the background color only when the element is hovered and not focused [1]. - Broad Compatibility: Beyond not-focus:, the not-* prefix supports most standard state variants (e.g., not-hover:, not-active:, not-disabled:) as well as media queries, feature queries, and container queries (e.g., not-md:, not-supports-grid:, not-motion-safe:) [1][2][5][4]. Example: Hover only if not focused By using these modifiers, you can express negative conditions directly in your markup, which often leads to cleaner logic and improved readability compared to traditional cascading override approaches [3].

Citations:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="client/src/pages/Login.tsx"

# Show the relevant section around the Name input and the className line.
nl -ba "$FILE" | sed -n '40,110p'

Repository: React-projects/Instacart---Grocery-Delivery

Length of output: 130

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="client/src/pages/Login.tsx"

# Show relevant section around the Name input and className line
cat -n "$FILE" | sed -n '45,95p'

Repository: React-projects/Instacart---Grocery-Delivery

Length of output: 3774

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="client/src/pages/Login.tsx"

echo "== Tailwind focus/border usage in this file =="
rg -n "focus:|not-focus:|border-app-border|border-" "$FILE" || true

echo
echo "== Name/email/password validation attributes =="
rg -n "minLength|maxLength|pattern|aria-|required|type='text'|type='email'|type='password'" "$FILE" || true

echo
echo "== handleSubmit and any client-side validation around name/email/password =="
rg -n "handleSubmit|setName|setEmail|setPassword|name\\b|email\\b|password\\b" "$FILE" || true

Repository: React-projects/Instacart---Grocery-Delivery

Length of output: 2559

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Locate where tailwind config lives (common names)
ls -1 | rg -i "tailwind\\.config\\.(js|ts|cjs|mjs|mjs)$" || true
ls -1 | rg -i "postcss\\.config\\.(js|cjs|mjs)$" || true
fd -t f -i "tailwind.config.*" . || true

echo "---- Search for app-border definition ----"
rg -n "app-border" . || true

echo "---- Search for focus border utilities elsewhere in Login page (and nearby components) ----"
rg -n "focus:.*border|focus:.*ring|ring:.*focus" client/src/pages/Login.tsx || true

echo "---- Search for any global/input focus border styles ----"
rg -n "focus.*border|not-focus:.*border|input.*focus|ring.*focus" client/src -S || true

Repository: React-projects/Instacart---Grocery-Delivery

Length of output: 2678

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="client/src/index.css"
echo "== client/src/index.css (focus rules) =="
cat -n "$FILE" | sed -n '40,90p'

Repository: React-projects/Instacart---Grocery-Delivery

Length of output: 1349

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Tailwind config files =="
fd -t f -i "tailwind.config.*" . || true

echo
echo "== package.json / Tailwind version =="
fd -t f -i "package.json" client . || true
# If there are multiple, print the ones that mention tailwind
rg -n "\"tailwindcss\"|tailwindcss" -S client package.json . 2>/dev/null || true

echo
echo "== Search for color/app-border mapping in config =="
fd -t f -i "tailwind.config.*" client . | xargs -r rg -n "app-border|border-app-border|--color-app-border|colors" || true

echo
echo "== Any CSS using border-app-border token (to infer mapping) =="
rg -n "border-app-border" client/src index.css client/index.css 2>/dev/null || true

Repository: React-projects/Instacart---Grocery-Delivery

Length of output: 8544

🏁 Script executed:

#!/bin/bash
set -euo pipefail
FILE="client/src/index.css"
cat -n "$FILE" | sed -n '1,60p'

Repository: React-projects/Instacart---Grocery-Delivery

Length of output: 1865

Switch from not-focus: to focus: for clearer input focus styling (and add basic validation).

  • client/src/pages/Login.tsx:69 sets not-focus:border-app-border, so the border color only applies while the input is not focused; since client/src/index.css removes focus outlines (input:focus { outline: none; }), the focused state may have little/no visual feedback.
  • Name (and the other fields using the same pattern) only uses required—no minLength/pattern validation.
Suggested change 
-                                            className='w-full rounded-xl pl-10 pr-4 py-3 text-sm bg-white border  not-focus:border-app-border transition-all'
+                                            className='w-full rounded-xl pl-10 pr-4 py-3 text-sm bg-white border border-app-border focus:border-app-green focus:ring-2 focus:ring-app-green/20 transition-all'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className='w-full rounded-xl pl-10 pr-4 py-3 text-sm bg-white border not-focus:border-app-border transition-all'
className='w-full rounded-xl pl-10 pr-4 py-3 text-sm bg-white border border-app-border focus:border-app-green focus:ring-2 focus:ring-app-green/20 transition-all'
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/pages/Login.tsx` at line 69, In the Login component change input
focus styling by replacing the Tailwind-like utility
'not-focus:border-app-border' with 'focus:border-app-border' on the input
className(s) (e.g., the className string containing w-full rounded-xl pl-10 pr-4
py-3 text-sm bg-white border not-focus:border-app-border) so the border color
applies on focus; additionally add basic HTML validation attributes to the
relevant inputs (e.g., add minLength="2" and a simple pattern or type where
appropriate for the Name field, and sensible minLength/pattern for other fields)
while keeping required, to improve client-side validation and visible focus
feedback.

arial-label='name input field'
/>
</div>
</label>
</div>
)}
<label htmlFor='email' className='text-sm flex flex-col gap-1'>
{' '}
Email Address
<div className='relative'>
<MailIcon className='absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-app-text-light' />
<input
type='email'
id='email'
value={email}
onChange={(e) => setEmail(e.target.value)}
required
placeholder='Enter your email'
className='w-full rounded-xl pl-10 pr-4 py-3 text-sm bg-white border not-focus:border-app-border transition-all'
arial-label='email input field'
/>
</div>
</label>
<label htmlFor='password' className='text-sm flex flex-col gap-1'>
{' '}
Password
<div className='relative'>
<LockIcon className='absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-app-text-light' />
<input
type={showPassword ? 'text' : 'password'}
id='password'
value={password}
onChange={(e) => setPassword(e.target.value)}
required
placeholder='Enter your password'
className='w-full rounded-xl pl-10 pr-4 py-3 text-sm bg-white border not-focus:border-app-border transition-all'
arial-label='password input field'
/>
<button
type='button'
className='absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors'
onClick={() => {
setShowPassword(!showPassword);
}}
>
{showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />}
</button>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</div>
</label>
<button
type='submit'
disabled={loading}
className=' flex flex-center w-full py-3 bg-green-950 text-white font-semibold rounded-xl hover:bg-green-900 transition-colors disabled:opacity-50'
>
{loading ? <LoaderIcon className='size-8 animate-spin' /> : isLogin ? 'Sign In' : 'Sign Up'}
</button>
</form>
</div>
</div>
</div>
);
};

export default Login;