Skip to content

Commit 141ec55

Browse files
DevanshuNEUDevanshuNEU
committed
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
1 parent 91de35a commit 141ec55

4 files changed

Lines changed: 309 additions & 140 deletions

File tree

‎frontend/src/components/auth/LoginForm.tsx‎

Lines changed: 145 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,27 @@ import { useNavigate, Link } from 'react-router-dom';
44
import { Button } from '../ui/button';
55
import { Input } from '../ui/input';
66
import { Label } from '../ui/label';
7-
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card';
87
import { Alert, AlertDescription } from '../ui/alert';
98

9+
// Icons
10+
const CodeIntelLogo = () => (
11+
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
12+
<span className="text-white font-bold text-lg">CI</span>
13+
</div>
14+
)
15+
16+
const GitHubIcon = () => (
17+
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
18+
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
19+
</svg>
20+
)
21+
22+
const SparklesIcon = () => (
23+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
24+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
25+
</svg>
26+
)
27+
1028
export function LoginForm() {
1129
const [email, setEmail] = useState('');
1230
const [password, setPassword] = useState('');
@@ -22,7 +40,7 @@ export function LoginForm() {
2240

2341
try {
2442
await signIn(email, password);
25-
navigate('/');
43+
navigate('/dashboard');
2644
} catch (err: any) {
2745
setError(err.message || 'Login failed');
2846
} finally {
@@ -31,65 +49,136 @@ export function LoginForm() {
3149
};
3250

3351
return (
34-
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4">
35-
<Card className="w-full max-w-md">
36-
<CardHeader className="space-y-1">
37-
<CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
38-
<CardDescription>
39-
Enter your credentials to access CodeIntel
40-
</CardDescription>
41-
</CardHeader>
42-
43-
<form onSubmit={handleSubmit}>
44-
<CardContent className="space-y-4">
45-
{error && (
46-
<Alert variant="destructive">
47-
<AlertDescription>{error}</AlertDescription>
48-
</Alert>
49-
)}
52+
<div className="min-h-screen bg-[#09090b] flex flex-col">
53+
{/* Navigation */}
54+
<nav className="border-b border-white/5 bg-[#09090b]/80 backdrop-blur-xl">
55+
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
56+
<Link to="/" className="flex items-center gap-3">
57+
<CodeIntelLogo />
58+
<span className="font-semibold text-white">CodeIntel</span>
59+
</Link>
60+
<a
61+
href="https://github.com/opencodeintel/opencodeintel"
62+
target="_blank"
63+
rel="noopener noreferrer"
64+
className="text-gray-400 hover:text-white transition-colors"
65+
>
66+
<GitHubIcon />
67+
</a>
68+
</div>
69+
</nav>
5070

51-
<div className="space-y-2">
52-
<Label htmlFor="email">Email</Label>
53-
<Input
54-
id="email"
55-
type="email"
56-
placeholder="your@email.com"
57-
value={email}
58-
onChange={(e) => setEmail(e.target.value)}
59-
required
60-
disabled={loading}
61-
/>
71+
{/* Main Content */}
72+
<div className="flex-1 flex items-center justify-center px-6 py-12">
73+
<div className="w-full max-w-md">
74+
{/* Header */}
75+
<div className="text-center mb-8">
76+
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 mb-6">
77+
<SparklesIcon />
78+
<span className="text-sm text-blue-400">Welcome back</span>
6279
</div>
80+
<h1 className="text-3xl font-bold text-white mb-2">
81+
Sign in to CodeIntel
82+
</h1>
83+
<p className="text-gray-400">
84+
Continue your AI-powered code exploration
85+
</p>
86+
</div>
87+
88+
{/* Login Card */}
89+
<div className="relative">
90+
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-cyan-500/10 rounded-2xl blur-xl opacity-50" />
91+
<div className="relative bg-[#111113] rounded-2xl border border-white/10 p-8">
92+
<form onSubmit={handleSubmit} className="space-y-6">
93+
{error && (
94+
<Alert variant="destructive" className="bg-red-500/10 border-red-500/20 text-red-400">
95+
<AlertDescription>{error}</AlertDescription>
96+
</Alert>
97+
)}
6398

64-
<div className="space-y-2">
65-
<Label htmlFor="password">Password</Label>
66-
<Input
67-
id="password"
68-
type="password"
69-
placeholder="••••••••"
70-
value={password}
71-
onChange={(e) => setPassword(e.target.value)}
72-
required
73-
minLength={6}
74-
disabled={loading}
75-
/>
99+
<div className="space-y-2">
100+
<Label htmlFor="email" className="text-gray-300">Email</Label>
101+
<Input
102+
id="email"
103+
type="email"
104+
placeholder="you@example.com"
105+
value={email}
106+
onChange={(e) => setEmail(e.target.value)}
107+
required
108+
disabled={loading}
109+
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"
110+
/>
111+
</div>
112+
113+
<div className="space-y-2">
114+
<div className="flex items-center justify-between">
115+
<Label htmlFor="password" className="text-gray-300">Password</Label>
116+
<button type="button" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">
117+
Forgot password?
118+
</button>
119+
</div>
120+
<Input
121+
id="password"
122+
type="password"
123+
placeholder="••••••••"
124+
value={password}
125+
onChange={(e) => setPassword(e.target.value)}
126+
required
127+
minLength={6}
128+
disabled={loading}
129+
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"
130+
/>
131+
</div>
132+
133+
<Button
134+
type="submit"
135+
disabled={loading}
136+
className="w-full h-12 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-xl transition-all disabled:opacity-50"
137+
>
138+
{loading ? (
139+
<div className="flex items-center gap-2">
140+
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
141+
<span>Signing in...</span>
142+
</div>
143+
) : (
144+
'Sign in'
145+
)}
146+
</Button>
147+
</form>
148+
149+
{/* Divider */}
150+
<div className="relative my-6">
151+
<div className="absolute inset-0 flex items-center">
152+
<div className="w-full border-t border-white/10"></div>
153+
</div>
154+
<div className="relative flex justify-center text-sm">
155+
<span className="px-4 bg-[#111113] text-gray-500">or continue with</span>
156+
</div>
157+
</div>
158+
159+
{/* Social Login */}
160+
<Button
161+
type="button"
162+
variant="outline"
163+
className="w-full h-12 bg-white/5 border-white/10 text-white hover:bg-white/10 rounded-xl"
164+
disabled
165+
>
166+
<GitHubIcon />
167+
<span className="ml-2">GitHub</span>
168+
<span className="ml-2 text-xs text-gray-500">(Coming soon)</span>
169+
</Button>
76170
</div>
77-
</CardContent>
171+
</div>
78172

79-
<CardFooter className="flex flex-col space-y-4">
80-
<Button type="submit" className="w-full" disabled={loading}>
81-
{loading ? 'Signing in...' : 'Sign In'}
82-
</Button>
83-
84-
<p className="text-sm text-center text-muted-foreground">
85-
Don't have an account?{' '}
86-
<Link to="/signup" className="text-primary hover:underline font-medium">
87-
Sign up
88-
</Link>
89-
</p>
90-
</CardFooter>
91-
</form>
92-
</Card>
173+
{/* Sign up link */}
174+
<p className="text-center text-gray-400 mt-6">
175+
Don't have an account?{' '}
176+
<Link to="/signup" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">
177+
Sign up for free
178+
</Link>
179+
</p>
180+
</div>
181+
</div>
93182
</div>
94183
);
95184
}

0 commit comments

Comments
 (0)