From 141ec55d40d9061279a37f485e744dc9b436ed93 Mon Sep 17 00:00:00 2001 From: Devanshu Rajesh Chicholikar Date: Fri, 5 Dec 2025 17:17:03 -0500 Subject: [PATCH] feat(frontend): Revamp login/signup pages with dark theme - Match landing page dark aesthetic (#09090b background) - Add glassmorphism cards with blur effects - Gradient blue CTA buttons - Consistent navigation with logo - GitHub login placeholder (coming soon) - Feature list on signup page --- frontend/src/components/auth/LoginForm.tsx | 201 ++++++++++++----- frontend/src/components/auth/SignupForm.tsx | 236 ++++++++++++++------ frontend/src/pages/LoginPage.tsx | 6 +- frontend/src/pages/SignupPage.tsx | 6 +- 4 files changed, 309 insertions(+), 140 deletions(-) diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx index 3e69f86..ae5ad0e 100644 --- a/frontend/src/components/auth/LoginForm.tsx +++ b/frontend/src/components/auth/LoginForm.tsx @@ -4,9 +4,27 @@ import { useNavigate, Link } from 'react-router-dom'; import { Button } from '../ui/button'; import { Input } from '../ui/input'; import { Label } from '../ui/label'; -import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card'; import { Alert, AlertDescription } from '../ui/alert'; +// Icons +const CodeIntelLogo = () => ( +
+ CI +
+) + +const GitHubIcon = () => ( + + + +) + +const SparklesIcon = () => ( + + + +) + export function LoginForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -22,7 +40,7 @@ export function LoginForm() { try { await signIn(email, password); - navigate('/'); + navigate('/dashboard'); } catch (err: any) { setError(err.message || 'Login failed'); } finally { @@ -31,65 +49,136 @@ export function LoginForm() { }; return ( -
- - - Welcome back - - Enter your credentials to access CodeIntel - - - -
- - {error && ( - - {error} - - )} +
+ {/* Navigation */} + -
- - setEmail(e.target.value)} - required - disabled={loading} - /> + {/* Main Content */} +
+
+ {/* Header */} +
+
+ + Welcome back
+

+ Sign in to CodeIntel +

+

+ Continue your AI-powered code exploration +

+
+ + {/* Login Card */} +
+
+
+ + {error && ( + + {error} + + )} -
- - setPassword(e.target.value)} - required - minLength={6} - disabled={loading} - /> +
+ + 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" + /> +
+ +
+
+ + +
+ 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" + /> +
+ + + + + {/* Divider */} +
+
+
+
+
+ or continue with +
+
+ + {/* Social Login */} +
- +
- - - -

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

- - - + {/* 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 d20d05c..becf7c6 100644 --- a/frontend/src/components/auth/SignupForm.tsx +++ b/frontend/src/components/auth/SignupForm.tsx @@ -4,9 +4,33 @@ import { useNavigate, Link } from 'react-router-dom'; import { Button } from '../ui/button'; import { Input } from '../ui/input'; import { Label } from '../ui/label'; -import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card'; import { Alert, AlertDescription } from '../ui/alert'; +// Icons +const CodeIntelLogo = () => ( +
+ CI +
+) + +const GitHubIcon = () => ( + + + +) + +const RocketIcon = () => ( + + + +) + +const CheckIcon = () => ( + + + +) + export function SignupForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -33,7 +57,7 @@ export function SignupForm() { setLoading(true); try { await signUp(email, password); - navigate('/'); + navigate('/dashboard'); } catch (err: any) { setError(err.message || 'Signup failed'); } finally { @@ -41,83 +65,147 @@ export function SignupForm() { } }; + const features = [ + 'Unlimited semantic code search', + 'Index your private repositories', + 'AI-powered code analysis', + 'MCP integration with Claude' + ]; + return ( -
- - - Create an account - - Enter your email to get started with CodeIntel - - - -
- - {error && ( - - {error} - - )} - -
- - setEmail(e.target.value)} - required - disabled={loading} - /> -
+
+ {/* Navigation */} + -
- - setPassword(e.target.value)} - required - minLength={6} - disabled={loading} - /> -

- Must be at least 6 characters -

+ {/* Main Content */} +
+
+ {/* Header */} +
+
+ + Get started for free
+

+ Create your account +

+

+ Start searching code by meaning, not keywords +

+
+ + {/* Features */} +
+ {features.map((feature, idx) => ( +
+ + {feature} +
+ ))} +
-
- - setConfirmPassword(e.target.value)} - required - minLength={6} - disabled={loading} - /> + {/* 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" + /> +
+ +
+ + 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

+
+ +
+ + 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" + /> +
+ + + +

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

+
- - - - - -

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

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

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

+
+
); } diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx index ba9e212..b39585e 100644 --- a/frontend/src/pages/LoginPage.tsx +++ b/frontend/src/pages/LoginPage.tsx @@ -1,9 +1,5 @@ import { LoginForm } from '../components/auth/LoginForm'; export function LoginPage() { - return ( -
- -
- ); + return ; } diff --git a/frontend/src/pages/SignupPage.tsx b/frontend/src/pages/SignupPage.tsx index 791378d..168da2a 100644 --- a/frontend/src/pages/SignupPage.tsx +++ b/frontend/src/pages/SignupPage.tsx @@ -1,9 +1,5 @@ import { SignupForm } from '../components/auth/SignupForm'; export function SignupPage() { - return ( -
- -
- ); + return ; }