initial commit
This commit is contained in:
Kar k1
217
app/auth/page.tsx
Normal file
217
app/auth/page.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
'use client'
|
||||
import { useState, useEffect, Suspense } from 'react'
|
||||
import { useSearchParams, useRouter } from 'next/navigation'
|
||||
import { LoginForm } from '@/components/auth/LoginForm'
|
||||
import { RegisterForm } from '@/components/auth/RegisterForm'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import { Header } from '@/components/header'
|
||||
import { Footer } from '@/components/footer'
|
||||
import Link from 'next/link'
|
||||
import { BookOpen, Search, Settings, User, Edit, Tag } from 'lucide-react'
|
||||
|
||||
// Main auth component with search params handling
|
||||
function AuthPageContent() {
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login')
|
||||
const [shouldRedirect, setShouldRedirect] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const modeParam = searchParams.get('mode')
|
||||
if (modeParam === 'register') {
|
||||
setMode('register')
|
||||
}
|
||||
|
||||
// Only redirect if there's a returnUrl (user was redirected here) or if they just logged in
|
||||
const returnUrl = searchParams.get('returnUrl')
|
||||
if (returnUrl) {
|
||||
setShouldRedirect(true)
|
||||
}
|
||||
}, [searchParams])
|
||||
const { user, logout, loading } = useAuth()
|
||||
|
||||
// Only redirect if shouldRedirect is true (not just because user exists)
|
||||
useEffect(() => {
|
||||
if (!loading && user && shouldRedirect) {
|
||||
const returnUrl = searchParams.get('returnUrl')
|
||||
if (returnUrl) {
|
||||
router.push(decodeURIComponent(returnUrl))
|
||||
} else {
|
||||
router.push('/dashboard')
|
||||
}
|
||||
}
|
||||
}, [user, loading, router, searchParams, shouldRedirect])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (user) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<div className="container mx-auto px-4 pt-24 pb-8">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{/* Welcome Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<User className="w-5 h-5" />
|
||||
Welcome back, {user.name}!
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
You're logged in and ready to start creating amazing content
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Edit className="w-5 h-5" />
|
||||
Topic Management
|
||||
</CardTitle>
|
||||
<CardDescription>Create and manage your topics</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Button asChild className="w-full justify-start">
|
||||
<Link href="/topics/new">
|
||||
<BookOpen className="w-4 h-4 mr-2" />
|
||||
Create New Topic
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="w-full justify-start">
|
||||
<Link href="/topics">
|
||||
<Search className="w-4 h-4 mr-2" />
|
||||
View All Topics
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings className="w-5 h-5" />
|
||||
Account Settings
|
||||
</CardTitle>
|
||||
<CardDescription>Manage your account and preferences</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Button asChild variant="outline" className="w-full justify-start">
|
||||
<Link href="/profile">
|
||||
<User className="w-4 h-4 mr-2" />
|
||||
Edit Profile
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="w-full justify-start">
|
||||
<Link href="/dashboard">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Dashboard
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => logout()}
|
||||
variant="destructive"
|
||||
className="w-full justify-start"
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* User Info */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Account Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<strong>Email:</strong> {user.email}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Role:</strong> {user.role}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Provider:</strong> {user.provider}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Verified:</strong> {user.isVerified ? 'Yes' : 'No'}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<div className="container mx-auto px-4 pt-24 pb-8">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold mb-4">Authentication Demo</h1>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
Test the authentication system with login and registration
|
||||
</p>
|
||||
<div className="flex justify-center gap-2 mb-6">
|
||||
<Button
|
||||
variant={mode === 'login' ? 'default' : 'outline'}
|
||||
onClick={() => setMode('login')}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
variant={mode === 'register' ? 'default' : 'outline'}
|
||||
onClick={() => setMode('register')}
|
||||
>
|
||||
Create Account
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mode === 'login' ? (
|
||||
<LoginForm onSwitchToRegister={() => setMode('register')} />
|
||||
) : (
|
||||
<RegisterForm onSwitchToLogin={() => setMode('login')} />
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Wrapper component with Suspense boundary
|
||||
export default function AuthPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<AuthPageContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user