feat: add login page

frontend/src/components/Navigation.tsx

@@ -1,12 +1,100 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+
+interface User {
+  name?: string;
+  email?: string;
+  avatar?: string;
+}
 
 export default function Navigation() {
   const [isOpen, setIsOpen] = useState(false);
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  const checkAuth = async () => {
+    try {
+      const response = await fetch("/api/auth/session");
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.user);
+      }
+    } catch (error) {
+      console.error("Auth check failed:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const getInitials = (user: User): string => {
+    if (user.name) {
+      return user.name.substring(0, 2).toUpperCase();
+    }
+    if (user.email) {
+      return user.email.substring(0, 2).toUpperCase();
+    }
+    return "?";
+  };
+
+  const AccountAvatar = () => {
+    if (isLoading) {
+      return (
+        <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
+      );
+    }
+
+    return (
+      <>
+        {user ? (
+          <div className="relative cursor-pointer">
+            {user.avatar ? (
+              <img
+                src={user.avatar}
+                alt={user.name || user.email || "User"}
+                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)]"
+              />
+            ) : (
+              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm">
+                {getInitials(user)}
+              </div>
+            )}
+          </div>
+        ) : (
+          <a
+            href="/login"
+            className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center hover:bg-gray-400 transition-colors"
+          >
+            <svg
+              className="w-6 h-6 text-gray-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+              />
+            </svg>
+          </a>
+        )}
+      </>
+    );
+  };
 
   return (
     <>
+      {/* Account Avatar - Fixed position, synced with nav */}
+      <div className="hidden md:block fixed right-4 lg:right-8 top-3 z-50">
+        <AccountAvatar />
+      </div>
+
       <nav className="sticky top-0 z-50 py-3">
-        {/* Desktop */}
+        {/* Desktop Navigation */}
         <div className="hidden md:flex gap-8 lg:gap-12 justify-center">
           <a
             href="/"
@@ -28,34 +116,37 @@ export default function Navigation() {
           </a>
         </div>
 
-        {/* Mobile Burger Button */}
-        <button
-          onClick={() => setIsOpen(!isOpen)}
-          className="md:hidden fixed left-4 top-4 z-50 btn btn-ghost btn-sm"
-        >
-          <svg
-            className="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
+        {/* Mobile */}
+        <div className="md:hidden flex justify-between items-center px-4">
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="z-50 btn btn-ghost btn-sm"
           >
-            {isOpen ? (
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            ) : (
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            )}
-          </svg>
-        </button>
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              {isOpen ? (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              )}
+            </svg>
+          </button>
+          <AccountAvatar />
+        </div>
       </nav>
 
       {/* Mobile Menu */}
@@ -88,6 +179,22 @@ export default function Navigation() {
               >
                 Guestbook
               </a>
+
+              {user && (
+                <>
+                  <hr className="my-2" />
+                  <div className="py-3 px-4 text-sm text-gray-600">
+                    {user.name || user.email}
+                  </div>
+                  <a
+                    href="/logout"
+                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Logout
+                  </a>
+                </>
+              )}
             </div>
           </div>
         </>