From 6a18d0a64df72e96c16016b39bb8ed309ed01c92 Mon Sep 17 00:00:00 2001 From: Devanshu Rajesh Chicholikar Date: Sat, 24 Jan 2026 12:35:31 -0500 Subject: [PATCH 1/3] feat: redesign auth pages to match landing page V2 - LoginForm: theme tokens, floating orbs, glassmorphism card - SignupForm: same design + benefits list - use shared Navbar component - indigo accent instead of blue - light/dark mode support - lucide icons (Mail, Lock, etc) - motion animations on mount - GitHub OAuth button placeholder (coming soon) --- frontend/src/components/auth/LoginForm.tsx | 237 +++++++------- frontend/src/components/auth/SignupForm.tsx | 327 +++++++++++--------- 2 files changed, 302 insertions(+), 262 deletions(-) diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx index ae5ad0e..8443c13 100644 --- a/frontend/src/components/auth/LoginForm.tsx +++ b/frontend/src/components/auth/LoginForm.tsx @@ -1,145 +1,154 @@ -import { useState } from 'react'; -import { useAuth } from '../../contexts/AuthContext'; -import { useNavigate, Link } from 'react-router-dom'; -import { Button } from '../ui/button'; -import { Input } from '../ui/input'; -import { Label } from '../ui/label'; -import { Alert, AlertDescription } from '../ui/alert'; - -// Icons -const CodeIntelLogo = () => ( -
- CI -
-) - -const GitHubIcon = () => ( - - - -) - -const SparklesIcon = () => ( - - - -) +import { useState } from 'react' +import { useAuth } from '@/contexts/AuthContext' +import { useNavigate, Link } from 'react-router-dom' +import { motion } from 'framer-motion' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Alert, AlertDescription } from '@/components/ui/alert' +import { Navbar } from '@/components/landing' +import { Sparkles, Github, Loader2, Mail, Lock } from 'lucide-react' export function LoginForm() { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [error, setError] = useState(''); - const [loading, setLoading] = useState(false); - const { signIn } = useAuth(); - const navigate = useNavigate(); + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [error, setError] = useState('') + const [loading, setLoading] = useState(false) + const { signIn } = useAuth() + const navigate = useNavigate() const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - setError(''); - setLoading(true); + e.preventDefault() + setError('') + setLoading(true) try { - await signIn(email, password); - navigate('/dashboard'); + await signIn(email, password) + navigate('/dashboard') } catch (err: any) { - setError(err.message || 'Login failed'); + setError(err.message || 'Login failed') } finally { - setLoading(false); + setLoading(false) } - }; + } return ( -
- {/* Navigation */} - +
+ + + {/* Background effects */} +
+
+ + +
- {/* Main Content */} -
-
+ {/* Main content */} +
+ {/* Header */}
-
- - Welcome back -
-

+ + + Welcome back + +

Sign in to CodeIntel

-

- Continue your AI-powered code exploration +

+ Continue your code exploration

- {/* Login Card */} -
-
-
-
+ {/* Login card */} + +
+
+ {error && ( - + {error} )}
- - setEmail(e.target.value)} - required - disabled={loading} - className="bg-white/5 border-white/10 text-white placeholder:text-gray-500 focus:border-blue-500/50 focus:ring-blue-500/20 h-12 rounded-xl" - /> + +
+ + setEmail(e.target.value)} + required + disabled={loading} + className="pl-10 h-12 bg-background/50 border-border focus:border-accent" + /> +
- -
- setPassword(e.target.value)} - required - minLength={6} - disabled={loading} - className="bg-white/5 border-white/10 text-white placeholder:text-gray-500 focus:border-blue-500/50 focus:ring-blue-500/20 h-12 rounded-xl" - /> +
+ + setPassword(e.target.value)} + required + minLength={6} + disabled={loading} + className="pl-10 h-12 bg-background/50 border-border focus:border-accent" + /> +
-
+ {/* Sign up link */} -

+

Don't have an account?{' '} - + Sign up for free

-
+
- ); + ) } diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx index becf7c6..8505fa2 100644 --- a/frontend/src/components/auth/SignupForm.tsx +++ b/frontend/src/components/auth/SignupForm.tsx @@ -1,211 +1,242 @@ -import { useState } from 'react'; -import { useAuth } from '../../contexts/AuthContext'; -import { useNavigate, Link } from 'react-router-dom'; -import { Button } from '../ui/button'; -import { Input } from '../ui/input'; -import { Label } from '../ui/label'; -import { Alert, AlertDescription } from '../ui/alert'; - -// Icons -const CodeIntelLogo = () => ( -
- CI -
-) - -const GitHubIcon = () => ( - - - -) - -const RocketIcon = () => ( - - - -) - -const CheckIcon = () => ( - - - -) +import { useState } from 'react' +import { useAuth } from '@/contexts/AuthContext' +import { useNavigate, Link } from 'react-router-dom' +import { motion } from 'framer-motion' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Alert, AlertDescription } from '@/components/ui/alert' +import { Navbar } from '@/components/landing' +import { Rocket, Github, Loader2, Mail, Lock, Check } from 'lucide-react' + +const BENEFITS = [ + 'Semantic search across your codebase', + 'AI-powered code understanding', + 'Free for open source projects', +] export function SignupForm() { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [error, setError] = useState(''); - const [loading, setLoading] = useState(false); - const { signUp } = useAuth(); - const navigate = useNavigate(); + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [confirmPassword, setConfirmPassword] = useState('') + const [error, setError] = useState('') + const [loading, setLoading] = useState(false) + const { signUp } = useAuth() + const navigate = useNavigate() const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - setError(''); + e.preventDefault() + setError('') if (password !== confirmPassword) { - setError('Passwords do not match'); - return; + setError('Passwords do not match') + return } if (password.length < 6) { - setError('Password must be at least 6 characters'); - return; + setError('Password must be at least 6 characters') + return } - setLoading(true); + setLoading(true) try { - await signUp(email, password); - navigate('/dashboard'); + await signUp(email, password) + navigate('/dashboard') } catch (err: any) { - setError(err.message || 'Signup failed'); + setError(err.message || 'Signup failed') } finally { - setLoading(false); + setLoading(false) } - }; - - const features = [ - 'Unlimited semantic code search', - 'Index your private repositories', - 'AI-powered code analysis', - 'MCP integration with Claude' - ]; + } return ( -
- {/* Navigation */} - - - {/* Main Content */} -
-
+
+ + + {/* Background effects */} +
+
+ + +
+ + {/* Main content */} +
+ {/* Header */}
-
- - Get started for free -
-

+ + + Get started free + +

Create your account

-

- Start searching code by meaning, not keywords +

+ Start understanding your codebase in minutes

- {/* Features */} -
- {features.map((feature, idx) => ( -
- - {feature} + {/* Benefits list */} + + {BENEFITS.map((benefit, i) => ( +
+ + {benefit}
))} -
- - {/* Signup Card */} -
-
-
+ + + {/* Signup card */} + +
+
{error && ( - + {error} )}
- - setEmail(e.target.value)} - required - disabled={loading} - className="bg-white/5 border-white/10 text-white placeholder:text-gray-500 focus:border-blue-500/50 focus:ring-blue-500/20 h-12 rounded-xl" - /> + +
+ + setEmail(e.target.value)} + required + disabled={loading} + className="pl-10 h-12 bg-background/50 border-border focus:border-accent" + /> +
- - setPassword(e.target.value)} - required - minLength={6} - disabled={loading} - className="bg-white/5 border-white/10 text-white placeholder:text-gray-500 focus:border-blue-500/50 focus:ring-blue-500/20 h-12 rounded-xl" - /> -

Must be at least 6 characters

+ +
+ + setPassword(e.target.value)} + required + minLength={6} + disabled={loading} + className="pl-10 h-12 bg-background/50 border-border focus:border-accent" + /> +
- - setConfirmPassword(e.target.value)} - required - minLength={6} - disabled={loading} - className="bg-white/5 border-white/10 text-white placeholder:text-gray-500 focus:border-blue-500/50 focus:ring-blue-500/20 h-12 rounded-xl" - /> + +
+ + setConfirmPassword(e.target.value)} + required + minLength={6} + disabled={loading} + className="pl-10 h-12 bg-background/50 border-border focus:border-accent" + /> +
-

- By signing up, you agree to our Terms of Service and Privacy Policy +

+ By signing up, you agree to our{' '} + Terms + {' '}and{' '} + Privacy Policy

+ + {/* Divider */} +
+
+
+
+
+ or continue with +
+
+ + {/* GitHub OAuth placeholder */} +
-
+ {/* Sign in link */} -

+

Already have an account?{' '} - + Sign in

-
+
- ); + ) } From aca9d3254cb31c016f7c60640d765b0b37dd8539 Mon Sep 17 00:00:00 2001 From: Devanshu Rajesh Chicholikar Date: Sat, 24 Jan 2026 14:49:51 -0500 Subject: [PATCH 2/3] refactor: strip auth pages to minimal design - remove floating gradient orbs - remove welcome/get started badges - remove glassmorphism blur - remove grid pattern background - remove framer-motion animations - remove benefits checklist - keep: clean form, icon inputs, GitHub button, theme support - Linear/Vercel inspired - just the form, nothing else --- frontend/src/components/auth/LoginForm.tsx | 218 +++++++--------- frontend/src/components/auth/SignupForm.tsx | 271 ++++++++------------ 2 files changed, 188 insertions(+), 301 deletions(-) diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx index 8443c13..d9b3a2c 100644 --- a/frontend/src/components/auth/LoginForm.tsx +++ b/frontend/src/components/auth/LoginForm.tsx @@ -1,13 +1,12 @@ import { useState } from 'react' import { useAuth } from '@/contexts/AuthContext' import { useNavigate, Link } from 'react-router-dom' -import { motion } from 'framer-motion' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Alert, AlertDescription } from '@/components/ui/alert' import { Navbar } from '@/components/landing' -import { Sparkles, Github, Loader2, Mail, Lock } from 'lucide-react' +import { Github, Loader2, Mail, Lock } from 'lucide-react' export function LoginForm() { const [email, setEmail] = useState('') @@ -36,157 +35,112 @@ export function LoginForm() {
- {/* Background effects */} -
-
- - -
- - {/* Main content */} -
- - {/* Header */} +
+
- - - Welcome back - -

+

Sign in to CodeIntel

-

- Continue your code exploration +

+ Enter your credentials to continue

- {/* Login card */} - -
-
-
- {error && ( - - {error} - - )} - -
- -
- - setEmail(e.target.value)} - required - disabled={loading} - className="pl-10 h-12 bg-background/50 border-border focus:border-accent" - /> -
-
+
+ + {error && ( + + {error} + + )} -
-
- - -
-
- - setPassword(e.target.value)} - required - minLength={6} - disabled={loading} - className="pl-10 h-12 bg-background/50 border-border focus:border-accent" - /> -
+
+ +
+ + setEmail(e.target.value)} + required + disabled={loading} + className="pl-10 h-10" + />
+
- - - - {/* Divider */} -
-
-
+
+
+ +
-
- or continue with +
+ + setPassword(e.target.value)} + required + minLength={6} + disabled={loading} + className="pl-10 h-10" + />
- {/* GitHub OAuth placeholder */} + + +
+
+
+
+
+ or +
- - {/* Sign up link */} -

+ +

+ +

Don't have an account?{' '} - - Sign up for free + + Sign up

- +
) diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx index 8505fa2..096be2c 100644 --- a/frontend/src/components/auth/SignupForm.tsx +++ b/frontend/src/components/auth/SignupForm.tsx @@ -1,19 +1,12 @@ import { useState } from 'react' import { useAuth } from '@/contexts/AuthContext' import { useNavigate, Link } from 'react-router-dom' -import { motion } from 'framer-motion' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Alert, AlertDescription } from '@/components/ui/alert' import { Navbar } from '@/components/landing' -import { Rocket, Github, Loader2, Mail, Lock, Check } from 'lucide-react' - -const BENEFITS = [ - 'Semantic search across your codebase', - 'AI-powered code understanding', - 'Free for open source projects', -] +import { Github, Loader2, Mail, Lock } from 'lucide-react' export function SignupForm() { const [email, setEmail] = useState('') @@ -53,189 +46,129 @@ export function SignupForm() {
- {/* Background effects */} -
-
- - -
- - {/* Main content */} -
- - {/* Header */} +
+
- - - Get started free - -

+

Create your account

-

- Start understanding your codebase in minutes +

+ Free for open source projects

- {/* Benefits list */} - - {BENEFITS.map((benefit, i) => ( -
- - {benefit} -
- ))} - - - {/* Signup card */} - -
-
-
- {error && ( - - {error} - - )} - -
- -
- - setEmail(e.target.value)} - required - disabled={loading} - className="pl-10 h-12 bg-background/50 border-border focus:border-accent" - /> -
-
- -
- -
- - setPassword(e.target.value)} - required - minLength={6} - disabled={loading} - className="pl-10 h-12 bg-background/50 border-border focus:border-accent" - /> -
+
+ + {error && ( + + {error} + + )} + +
+ +
+ + setEmail(e.target.value)} + required + disabled={loading} + className="pl-10 h-10" + />
+
-
- -
- - setConfirmPassword(e.target.value)} - required - minLength={6} - disabled={loading} - className="pl-10 h-12 bg-background/50 border-border focus:border-accent" - /> -
+
+ +
+ + setPassword(e.target.value)} + required + minLength={6} + disabled={loading} + className="pl-10 h-10" + />
+
- - -

- By signing up, you agree to our{' '} - Terms - {' '}and{' '} - Privacy Policy -

- - - {/* Divider */} -
-
-
-
-
- or continue with +
+ +
+ + setConfirmPassword(e.target.value)} + required + minLength={6} + disabled={loading} + className="pl-10 h-10" + />
- {/* GitHub OAuth placeholder */} + +

+ By signing up, you agree to our{' '} + Terms + {' '}and{' '} + Privacy Policy +

+ + +
+
+
+
+
+ or +
- - {/* Sign in link */} -

+ +

+ +

Already have an account?{' '} - + Sign in

- +
) From e4e8f5ff578f6a50300c18e0a243092eede2a69f Mon Sep 17 00:00:00 2001 From: Devanshu Rajesh Chicholikar Date: Sat, 24 Jan 2026 15:09:44 -0500 Subject: [PATCH 3/3] fix: use placeholder links for terms/privacy (no routes yet) --- frontend/src/components/auth/SignupForm.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx index 096be2c..79bdb94 100644 --- a/frontend/src/components/auth/SignupForm.tsx +++ b/frontend/src/components/auth/SignupForm.tsx @@ -135,9 +135,9 @@ export function SignupForm() {

By signing up, you agree to our{' '} - Terms + Terms {' '}and{' '} - Privacy Policy + Privacy Policy