Skip to content

Commit 3cd922b

Browse files
tanzilahmed0tanzilahmed0
committed
Updated login page
1 parent 0a0531c commit 3cd922b

1 file changed

Lines changed: 65 additions & 54 deletions

File tree

‎frontend/src/app/login/page.tsx‎

Lines changed: 65 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,17 @@ import { useRouter, useSearchParams } from "next/navigation.js";
1313
import { GoogleLoginButton } from '@/components/auth/LoginButton';
1414
import { useAuth } from '@/components/auth/AuthProvider';
1515
import { CloudArrowUpIcon, ChatBubbleLeftRightIcon, MagnifyingGlassIcon, ChartBarIcon, ShieldCheckIcon, TableCellsIcon } from "@heroicons/react/24/outline";
16+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
17+
import { Button } from '@/components/ui/button';
18+
import { Badge } from '@/components/ui/badge';
1619

1720
const FEATURES = [
18-
{ label: "Upload CSVs Instantly", icon: <CloudArrowUpIcon className="h-6 w-6 text-indigo-600 dark:text-indigo-400" /> },
19-
{ label: "Ask Data Questions", icon: <ChatBubbleLeftRightIcon className="h-6 w-6 text-indigo-600 dark:text-indigo-400" /> },
20-
{ label: "AI-Powered Insights", icon: <MagnifyingGlassIcon className="h-6 w-6 text-indigo-600 dark:text-indigo-400" /> },
21-
{ label: "Visualize Results", icon: <ChartBarIcon className="h-6 w-6 text-indigo-600 dark:text-indigo-400" /> },
22-
{ label: "Secure & Private", icon: <ShieldCheckIcon className="h-6 w-6 text-indigo-600 dark:text-indigo-400" /> },
23-
{ label: "No SQL Needed", icon: <TableCellsIcon className="h-6 w-6 text-indigo-600 dark:text-indigo-400" /> },
21+
{ label: "Upload CSVs Instantly", icon: <CloudArrowUpIcon className="h-5 w-5 text-muted-foreground" /> },
22+
{ label: "Ask Data Questions", icon: <ChatBubbleLeftRightIcon className="h-5 w-5 text-muted-foreground" /> },
23+
{ label: "AI-Powered Insights", icon: <MagnifyingGlassIcon className="h-5 w-5 text-muted-foreground" /> },
24+
{ label: "Visualize Results", icon: <ChartBarIcon className="h-5 w-5 text-muted-foreground" /> },
25+
{ label: "Secure & Private", icon: <ShieldCheckIcon className="h-5 w-5 text-muted-foreground" /> },
26+
{ label: "No SQL Needed", icon: <TableCellsIcon className="h-5 w-5 text-muted-foreground" /> },
2427
];
2528

2629
function LoginPageContent() {
@@ -63,66 +66,74 @@ function LoginPageContent() {
6366
};
6467

6568
return (
66-
<div className="fixed inset-0 min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-indigo-100 via-indigo-200 to-indigo-300 dark:from-gray-900 dark:via-indigo-950 dark:to-indigo-900 overflow-hidden select-none">
67-
<div className="w-full max-w-md mx-auto flex flex-col items-center gap-8 p-6">
69+
<div className="min-h-screen w-full flex items-center justify-center bg-background p-4">
70+
<div className="w-full max-w-md mx-auto flex flex-col items-center gap-6">
6871
{/* Logo + SmartQuery */}
69-
<div className="flex flex-col items-center gap-2">
72+
<div className="flex flex-col items-center gap-3">
7073
<Image src="/smartquery-logo.svg" alt="SmartQuery Logo" width={64} height={64} className="w-16 h-16" />
71-
<span className="text-3xl md:text-4xl font-bold text-indigo-700 dark:text-indigo-400 tracking-tight">SmartQuery</span>
74+
<h1 className="text-3xl font-bold text-foreground tracking-tight">SmartQuery</h1>
7275
</div>
76+
7377
{/* Welcome Text */}
74-
<div className="text-center">
75-
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-2">Welcome to SmartQuery</h2>
76-
<p className="text-base md:text-lg text-gray-700 dark:text-gray-200">Sign in to access your data analysis dashboard</p>
78+
<div className="text-center space-y-2">
79+
<h2 className="text-xl font-semibold text-foreground">Welcome back</h2>
80+
<p className="text-sm text-muted-foreground">Sign in to access your data analysis dashboard</p>
7781
</div>
7882
{/* Error Display */}
7983
{error && (
80-
<div className="bg-red-50 border border-red-200 rounded-md p-4 w-full">
81-
<div className="flex">
82-
<div className="flex-shrink-0">
83-
<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
84-
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
85-
</svg>
86-
</div>
87-
<div className="ml-3">
88-
<h3 className="text-sm font-medium text-red-800">Authentication Error</h3>
89-
<div className="mt-2 text-sm text-red-700">
90-
<p>{error}</p>
84+
<Card className="w-full border-destructive/50 bg-destructive/10">
85+
<CardContent className="p-4">
86+
<div className="flex items-start gap-3">
87+
<div className="flex-shrink-0 mt-0.5">
88+
<svg className="h-4 w-4 text-destructive" viewBox="0 0 20 20" fill="currentColor">
89+
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
90+
</svg>
91+
</div>
92+
<div>
93+
<h3 className="text-sm font-medium text-destructive mb-1">Authentication Error</h3>
94+
<p className="text-sm text-destructive/80">{error}</p>
9195
</div>
9296
</div>
93-
</div>
94-
</div>
97+
</CardContent>
98+
</Card>
9599
)}
96100
{/* Login Card */}
97-
<div className="w-full bg-white dark:bg-gray-950 py-8 px-6 shadow-xl rounded-2xl flex flex-col gap-6">
98-
<GoogleLoginButton size="lg" redirectTo="/dashboard" className="w-full" showIcon={true} />
99-
{/* Dev Login Button for testing */}
100-
<button
101-
onClick={handleDevLogin}
102-
className="w-full mt-2 py-3 rounded-xl bg-indigo-200 dark:bg-indigo-700 text-indigo-900 dark:text-white font-semibold text-base hover:bg-indigo-300 dark:hover:bg-indigo-600 transition-colors"
103-
type="button"
104-
>
105-
Dev Login (Bypass)
106-
</button>
107-
</div>
101+
<Card className="w-full">
102+
<CardContent className="p-6 space-y-4">
103+
<GoogleLoginButton size="lg" redirectTo="/dashboard" className="w-full" showIcon={true} />
104+
{/* Dev Login Button for testing */}
105+
<Button
106+
onClick={handleDevLogin}
107+
variant="secondary"
108+
className="w-full"
109+
type="button"
110+
>
111+
Dev Login (Bypass)
112+
</Button>
113+
</CardContent>
114+
</Card>
108115
{/* Features Preview */}
109-
<div className="w-full bg-white dark:bg-gray-950 rounded-2xl p-6 shadow flex flex-col gap-4">
110-
<h3 className="text-lg font-semibold text-indigo-700 dark:text-indigo-200 mb-2">What you can do with SmartQuery</h3>
111-
<ul className="grid grid-cols-1 gap-2 md:grid-cols-2">
112-
{FEATURES.map((f) => (
113-
<li key={f.label} className="flex items-center gap-3 text-base font-medium text-indigo-700 dark:text-indigo-300 tracking-wide">
114-
{f.icon}
115-
{f.label}
116-
</li>
117-
))}
118-
</ul>
119-
</div>
116+
<Card className="w-full">
117+
<CardHeader>
118+
<CardTitle className="text-base">What you can do with SmartQuery</CardTitle>
119+
</CardHeader>
120+
<CardContent className="pt-0">
121+
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
122+
{FEATURES.map((f) => (
123+
<div key={f.label} className="flex items-center gap-3 text-sm text-muted-foreground">
124+
{f.icon}
125+
<span>{f.label}</span>
126+
</div>
127+
))}
128+
</div>
129+
</CardContent>
130+
</Card>
120131
{/* Footer */}
121132
<div className="text-center w-full">
122-
<p className="text-xs text-gray-500 dark:text-gray-400">
133+
<p className="text-xs text-muted-foreground">
123134
By signing in, you agree to our{' '}
124-
<a href="/terms-of-service" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-500 underline">Terms of Service</a>{' '}and{' '}
125-
<a href="/privacy-policy" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-500 underline">Privacy Policy</a>
135+
<a href="/terms-of-service" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Terms of Service</a>{' '}and{' '}
136+
<a href="/privacy-policy" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Privacy Policy</a>
126137
</p>
127138
</div>
128139
</div>
@@ -133,10 +144,10 @@ function LoginPageContent() {
133144
export default function LoginPage() {
134145
return (
135146
<Suspense fallback={
136-
<div className="min-h-screen flex items-center justify-center">
147+
<div className="min-h-screen flex items-center justify-center bg-background">
137148
<div className="flex flex-col items-center space-y-4">
138-
<div className="w-8 h-8 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div>
139-
<p className="text-gray-600">Loading...</p>
149+
<div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
150+
<p className="text-muted-foreground">Loading...</p>
140151
</div>
141152
</div>
142153
}>

0 commit comments

Comments
 (0)