sync

2025-12-20 19:00:42 +01:00
parent 9871289bfb
commit e1a0966dee
23 changed files with 1878 additions and 48 deletions
--- a/app/components/Nav.tsx
+++ b/app/components/Nav.tsx
@@ -1,13 +1,120 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import AuthModal from './AuthModal'
+
+interface User {
+  id: number
+  username: string
+  email: string
+}
+
 export default function Nav() {
+  const [user, setUser] = useState<User | null>(null)
+  const [showAuthModal, setShowAuthModal] = useState(false)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    checkAuth()
+  }, [])
+
+  const checkAuth = async () => {
+    try {
+      const response = await fetch('/api/auth/session', {
+        credentials: 'include',
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setUser(data.user)
+      }
+    } catch (error) {
+      console.error('Error checking auth:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLogin = (loggedInUser: User) => {
+    setUser(loggedInUser)
+    setShowAuthModal(false)
+  }
+
+  const handleLogout = async () => {
+    try {
+      await fetch('/api/auth/logout', {
+        method: 'POST',
+        credentials: 'include',
+      })
+      setUser(null)
+    } catch (error) {
+      console.error('Error logging out:', error)
+    }
+  }
+
  return (
-    <nav>
-      <div className="brand">420Deals.ch</div>
-      <div className="links">
-        <a href="#drop">Drop</a>
-        <a href="#past">Past Drops</a>
-        <a href="#community">Community</a>
-      </div>
-    </nav>
+    <>
+      <nav>
+        <div className="brand">420Deals.ch</div>
+        <div className="links">
+          <a href="#drop">Drop</a>
+          <a href="#past">Past Drops</a>
+          <a href="#community">Community</a>
+          {!loading && (
+            user ? (
+              <>
+                <span style={{ color: 'var(--muted)', fontSize: '14px', marginLeft: '48px' }}>
+                  {user.username}
+                </span>
+                <button
+                  onClick={handleLogout}
+                  style={{
+                    background: 'transparent',
+                    border: '1px solid var(--border)',
+                    color: 'var(--text)',
+                    padding: '8px 16px',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    marginLeft: '12px',
+                    lineHeight: '1',
+                    boxSizing: 'border-box',
+                    display: 'inline-block',
+                  }}
+                >
+                  Logout
+                </button>
+              </>
+            ) : (
+              <button
+                onClick={() => setShowAuthModal(true)}
+                style={{
+                  padding: '8px 16px',
+                  fontSize: '14px',
+                  background: 'var(--accent)',
+                  color: '#000',
+                  border: 'none',
+                  borderRadius: '8px',
+                  cursor: 'pointer',
+                  fontWeight: 500,
+                  marginLeft: '48px',
+                  lineHeight: '1',
+                  boxSizing: 'border-box',
+                  display: 'inline-block',
+                }}
+              >
+                Login
+              </button>
+            )
+          )}
+        </div>
+      </nav>
+
+      <AuthModal
+        isOpen={showAuthModal}
+        onClose={() => setShowAuthModal(false)}
+        onLogin={handleLogin}
+      />
+    </>
  )
 }