Skip to content

Commit aca9d32

Browse files
DevanshuNEUDevanshuNEU
committed
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
1 parent 6a18d0a commit aca9d32

2 files changed

Lines changed: 188 additions & 301 deletions

File tree

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

Lines changed: 86 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { useState } from 'react'
22
import { useAuth } from '@/contexts/AuthContext'
33
import { useNavigate, Link } from 'react-router-dom'
4-
import { motion } from 'framer-motion'
54
import { Button } from '@/components/ui/button'
65
import { Input } from '@/components/ui/input'
76
import { Label } from '@/components/ui/label'
87
import { Alert, AlertDescription } from '@/components/ui/alert'
98
import { Navbar } from '@/components/landing'
10-
import { Sparkles, Github, Loader2, Mail, Lock } from 'lucide-react'
9+
import { Github, Loader2, Mail, Lock } from 'lucide-react'
1110

1211
export function LoginForm() {
1312
const [email, setEmail] = useState('')
@@ -36,157 +35,112 @@ export function LoginForm() {
3635
<div className="min-h-screen bg-background flex flex-col">
3736
<Navbar />
3837

39-
{/* Background effects */}
40-
<div className="fixed inset-0 overflow-hidden pointer-events-none">
41-
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,black_40%,transparent_100%)]" />
42-
<motion.div
43-
className="absolute top-1/4 left-1/4 w-[500px] h-[500px] rounded-full"
44-
style={{ background: 'radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 60%)' }}
45-
animate={{ x: [0, 30, 0], y: [0, -20, 0] }}
46-
transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
47-
/>
48-
<motion.div
49-
className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full"
50-
style={{ background: 'radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 60%)' }}
51-
animate={{ x: [0, -25, 0], y: [0, 25, 0] }}
52-
transition={{ duration: 12, repeat: Infinity, ease: 'easeInOut' }}
53-
/>
54-
</div>
55-
56-
{/* Main content */}
57-
<div className="flex-1 flex items-center justify-center px-6 py-12 relative z-10">
58-
<motion.div
59-
className="w-full max-w-md"
60-
initial={{ opacity: 0, y: 20 }}
61-
animate={{ opacity: 1, y: 0 }}
62-
transition={{ duration: 0.5 }}
63-
>
64-
{/* Header */}
38+
<div className="flex-1 flex items-center justify-center px-6 py-12">
39+
<div className="w-full max-w-sm">
6540
<div className="text-center mb-8">
66-
<motion.div
67-
className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-accent/30 bg-accent/5 text-sm mb-6"
68-
initial={{ opacity: 0, scale: 0.9 }}
69-
animate={{ opacity: 1, scale: 1 }}
70-
transition={{ delay: 0.1 }}
71-
>
72-
<Sparkles className="w-3.5 h-3.5 text-accent" />
73-
<span className="text-accent font-medium">Welcome back</span>
74-
</motion.div>
75-
<h1 className="text-3xl font-bold text-foreground mb-2">
41+
<h1 className="text-2xl font-semibold text-foreground mb-2">
7642
Sign in to CodeIntel
7743
</h1>
78-
<p className="text-muted-foreground">
79-
Continue your code exploration
44+
<p className="text-sm text-muted-foreground">
45+
Enter your credentials to continue
8046
</p>
8147
</div>
8248

83-
{/* Login card */}
84-
<motion.div
85-
className="relative"
86-
initial={{ opacity: 0, y: 20 }}
87-
animate={{ opacity: 1, y: 0 }}
88-
transition={{ delay: 0.2 }}
89-
>
90-
<div className="absolute inset-0 bg-gradient-to-r from-accent/10 to-violet-500/10 rounded-2xl blur-xl opacity-50" />
91-
<div className="relative bg-card/50 backdrop-blur-sm rounded-2xl border border-border p-8">
92-
<form onSubmit={handleSubmit} className="space-y-5">
93-
{error && (
94-
<Alert variant="destructive" className="bg-destructive/10 border-destructive/20">
95-
<AlertDescription>{error}</AlertDescription>
96-
</Alert>
97-
)}
98-
99-
<div className="space-y-2">
100-
<Label htmlFor="email" className="text-foreground">Email</Label>
101-
<div className="relative">
102-
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
103-
<Input
104-
id="email"
105-
type="email"
106-
placeholder="you@example.com"
107-
value={email}
108-
onChange={(e) => setEmail(e.target.value)}
109-
required
110-
disabled={loading}
111-
className="pl-10 h-12 bg-background/50 border-border focus:border-accent"
112-
/>
113-
</div>
114-
</div>
49+
<div className="bg-card rounded-lg border border-border p-6">
50+
<form onSubmit={handleSubmit} className="space-y-4">
51+
{error && (
52+
<Alert variant="destructive" className="bg-destructive/10 border-destructive/20">
53+
<AlertDescription>{error}</AlertDescription>
54+
</Alert>
55+
)}
11556

116-
<div className="space-y-2">
117-
<div className="flex items-center justify-between">
118-
<Label htmlFor="password" className="text-foreground">Password</Label>
119-
<button
120-
type="button"
121-
className="text-sm text-accent hover:text-accent/80 transition-colors"
122-
>
123-
Forgot password?
124-
</button>
125-
</div>
126-
<div className="relative">
127-
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
128-
<Input
129-
id="password"
130-
type="password"
131-
placeholder="••••••••"
132-
value={password}
133-
onChange={(e) => setPassword(e.target.value)}
134-
required
135-
minLength={6}
136-
disabled={loading}
137-
className="pl-10 h-12 bg-background/50 border-border focus:border-accent"
138-
/>
139-
</div>
57+
<div className="space-y-2">
58+
<Label htmlFor="email">Email</Label>
59+
<div className="relative">
60+
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
61+
<Input
62+
id="email"
63+
type="email"
64+
placeholder="you@example.com"
65+
value={email}
66+
onChange={(e) => setEmail(e.target.value)}
67+
required
68+
disabled={loading}
69+
className="pl-10 h-10"
70+
/>
14071
</div>
72+
</div>
14173

142-
<Button
143-
type="submit"
144-
disabled={loading}
145-
className="w-full h-12 bg-accent hover:bg-accent/90 text-white font-medium"
146-
>
147-
{loading ? (
148-
<span className="flex items-center gap-2">
149-
<Loader2 className="w-4 h-4 animate-spin" />
150-
Signing in...
151-
</span>
152-
) : (
153-
'Sign in'
154-
)}
155-
</Button>
156-
</form>
157-
158-
{/* Divider */}
159-
<div className="relative my-6">
160-
<div className="absolute inset-0 flex items-center">
161-
<div className="w-full border-t border-border" />
74+
<div className="space-y-2">
75+
<div className="flex items-center justify-between">
76+
<Label htmlFor="password">Password</Label>
77+
<button
78+
type="button"
79+
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
80+
>
81+
Forgot password?
82+
</button>
16283
</div>
163-
<div className="relative flex justify-center text-sm">
164-
<span className="px-4 bg-card/50 text-muted-foreground">or continue with</span>
84+
<div className="relative">
85+
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
86+
<Input
87+
id="password"
88+
type="password"
89+
placeholder="••••••••"
90+
value={password}
91+
onChange={(e) => setPassword(e.target.value)}
92+
required
93+
minLength={6}
94+
disabled={loading}
95+
className="pl-10 h-10"
96+
/>
16597
</div>
16698
</div>
16799

168-
{/* GitHub OAuth placeholder */}
169100
<Button
170-
type="button"
171-
variant="outline"
172-
className="w-full h-12 border-border hover:bg-muted/50"
173-
disabled
101+
type="submit"
102+
disabled={loading}
103+
className="w-full h-10 bg-accent hover:bg-accent/90 text-white"
174104
>
175-
<Github className="w-5 h-5" />
176-
<span className="ml-2">GitHub</span>
177-
<span className="ml-2 text-xs text-muted-foreground">(Coming soon)</span>
105+
{loading ? (
106+
<span className="flex items-center gap-2">
107+
<Loader2 className="w-4 h-4 animate-spin" />
108+
Signing in...
109+
</span>
110+
) : (
111+
'Sign in'
112+
)}
178113
</Button>
114+
</form>
115+
116+
<div className="relative my-6">
117+
<div className="absolute inset-0 flex items-center">
118+
<div className="w-full border-t border-border" />
119+
</div>
120+
<div className="relative flex justify-center text-xs">
121+
<span className="px-2 bg-card text-muted-foreground">or</span>
122+
</div>
179123
</div>
180-
</motion.div>
181124

182-
{/* Sign up link */}
183-
<p className="text-center text-muted-foreground mt-6">
125+
<Button
126+
type="button"
127+
variant="outline"
128+
className="w-full h-10"
129+
disabled
130+
>
131+
<Github className="w-4 h-4 mr-2" />
132+
Continue with GitHub
133+
<span className="ml-1 text-xs text-muted-foreground">(Soon)</span>
134+
</Button>
135+
</div>
136+
137+
<p className="text-center text-sm text-muted-foreground mt-6">
184138
Don't have an account?{' '}
185-
<Link to="/signup" className="text-accent hover:text-accent/80 font-medium transition-colors">
186-
Sign up for free
139+
<Link to="/signup" className="text-accent hover:underline">
140+
Sign up
187141
</Link>
188142
</p>
189-
</motion.div>
143+
</div>
190144
</div>
191145
</div>
192146
)

0 commit comments

Comments
 (0)