auth, login + register

src/pages/DashboardPage.tsx

@@ -0,0 +1,143 @@
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { useAuth } from '@/contexts/AuthContext'
+import { useNavigate } from 'react-router-dom'
+
+export function DashboardPage() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+
+  const handleLogout = async () => {
+    try {
+      await logout()
+      navigate('/login')
+    } catch (error) {
+      console.error('Logout failed:', error)
+    }
+  }
+
+  if (!user) return null
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="bg-white shadow">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center py-6">
+            <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+            <Button onClick={handleLogout} variant="outline">
+              Sign out
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-6 sm:px-0">
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {/* User Profile Card */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Profile Information</CardTitle>
+                <CardDescription>Your account details</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <div className="flex items-center space-x-2">
+                  {user.picture && (
+                    <img
+                      src={user.picture}
+                      alt="Profile"
+                      className="w-8 h-8 rounded-full"
+                    />
+                  )}
+                  <div>
+                    <p className="font-medium">{user.name}</p>
+                    <p className="text-sm text-gray-600">{user.email}</p>
+                  </div>
+                </div>
+                <div className="pt-2">
+                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                    user.role === 'admin' 
+                      ? 'bg-purple-100 text-purple-800' 
+                      : 'bg-green-100 text-green-800'
+                  }`}>
+                    {user.role}
+                  </span>
+                  {user.is_active && (
+                    <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      Active
+                    </span>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Authentication Methods Card */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Authentication Methods</CardTitle>
+                <CardDescription>How you can sign in</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {user.providers.map((provider) => (
+                    <div key={provider} className="flex items-center justify-between">
+                      <span className="text-sm font-medium capitalize">{provider}</span>
+                      <span className="text-xs text-green-600">Connected</span>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Account Status Card */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Account Status</CardTitle>
+                <CardDescription>Current account information</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-sm">Status:</span>
+                  <span className={`text-sm font-medium ${
+                    user.is_active ? 'text-green-600' : 'text-red-600'
+                  }`}>
+                    {user.is_active ? 'Active' : 'Disabled'}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">Role:</span>
+                  <span className="text-sm font-medium">{user.role}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-sm">User ID:</span>
+                  <span className="text-sm font-mono">{user.id}</span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Admin Section */}
+          {user.role === 'admin' && (
+            <div className="mt-8">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Admin Panel</CardTitle>
+                  <CardDescription>Administrative functions</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-gray-600 mb-4">
+                    You have administrator privileges. You can manage users and system settings.
+                  </p>
+                  <div className="space-x-2">
+                    <Button size="sm">Manage Users</Button>
+                    <Button size="sm" variant="outline">System Settings</Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}