From 20afb2b76c6ebd3264c45c01d23b1aa5edf41465 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 30 Sep 2025 00:34:11 +0000
Subject: [PATCH] Enhance auction page with theme options and login
 functionality

Updated the Auctions page to include theme selection (light/dark) via localStorage, language selection, and integrated a login modal. Replaced direct logout navigation with a modal trigger and added a dropdown menu for user actions. Imported additional lucide-react icons and UI components for theme/language dropdowns.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/yHCvWBg
---
 client/src/pages/Auctions.tsx | 243 +++++++++++++++++++++++++++++++---
 1 file changed, 226 insertions(+), 17 deletions(-)

diff --git a/client/src/pages/Auctions.tsx b/client/src/pages/Auctions.tsx
index 9984ba3..0cd5bd2 100644
--- a/client/src/pages/Auctions.tsx
+++ b/client/src/pages/Auctions.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { queryClient } from "@/lib/queryClient";
 import { Button } from "@/components/ui/button";
@@ -12,9 +12,18 @@ import { apiRequest } from "@/lib/queryClient";
 import { isUnauthorizedError } from "@/lib/authUtils";
 import AuctionCard from "@/components/AuctionCard";
 import type { Auction, MediaOutlet } from "@shared/schema";
-import { BookOpen } from "lucide-react";
+import { BookOpen, Settings, User, LogOut, Sun, Moon, Monitor, Globe } from "lucide-react";
 import { Link } from "wouter";
 import Footer from "@/components/Footer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import LoginModal from "@/components/LoginModal";
 
 export default function Auctions() {
   const { user, isAuthenticated } = useAuth();
@@ -25,6 +34,68 @@ export default function Auctions() {
     amount: "",
     qualityScore: ""
   });
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+  
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+  const [language, setLanguage] = useState(() => localStorage.getItem('language') || 'en');
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  useEffect(() => {
+    localStorage.setItem('language', language);
+  }, [language]);
+
+  const handleThemeChange = (newTheme: string) => {
+    setTheme(newTheme);
+  };
+
+  const handleLanguageChange = (newLanguage: string) => {
+    setLanguage(newLanguage);
+  };
+
+  const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'fr', name: 'Français' },
+    { code: 'de', name: 'Deutsch' },
+    { code: 'it', name: 'Italiano' },
+    { code: 'hi', name: 'हिन्दी' },
+    { code: 'ar', name: 'العربية' },
+    { code: 'ja', name: '日本語' },
+    { code: 'ko', name: '한국어' },
+    { code: 'zh-TW', name: '繁體中文' },
+    { code: 'zh-CN', name: '简体中文' },
+  ];
+
+  const handleLogout = async () => {
+    try {
+      const response = await fetch("/api/logout", {
+        method: "POST",
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        toast({
+          title: "Logged Out",
+          description: "You have been successfully logged out.",
+        });
+        
+        queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
+      }
+    } catch (error) {
+      toast({
+        title: "Logout Error",
+        description: "An error occurred while logging out.",
+        variant: "destructive",
+      });
+    }
+  };
 
   const { data: auctions = [], isLoading: auctionsLoading } = useQuery<Auction[]>({
     queryKey: ["/api/auctions"],
@@ -77,9 +148,7 @@ export default function Auctions() {
         description: "Please log in to place a bid.",
         variant: "destructive"
       });
-      setTimeout(() => {
-        window.location.href = "/api/login";
-      }, 1000);
+      setIsLoginModalOpen(true);
       return;
     }
     setSelectedAuction(auction);
@@ -186,17 +255,149 @@ export default function Auctions() {
               </Link>
               
               {isAuthenticated && user ? (
-                <Button 
-                  variant="ghost" 
-                  size="sm"
-                  onClick={() => window.location.href = "/api/logout"}
-                >
-                  Logout
-                </Button>
+                <>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button 
+                        variant="ghost" 
+                        size="sm"
+                        data-testid="button-settings"
+                      >
+                        <Settings className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-56">
+                      <DropdownMenuLabel>Theme</DropdownMenuLabel>
+                      <DropdownMenuItem 
+                        onClick={() => handleThemeChange('light')}
+                        className="cursor-pointer"
+                        data-testid="theme-light"
+                      >
+                        <Sun className="h-4 w-4 mr-2" />
+                        Light
+                      </DropdownMenuItem>
+                      <DropdownMenuItem 
+                        onClick={() => handleThemeChange('dark')}
+                        className="cursor-pointer"
+                        data-testid="theme-dark"
+                      >
+                        <Moon className="h-4 w-4 mr-2" />
+                        Dark
+                      </DropdownMenuItem>
+                      <DropdownMenuItem 
+                        onClick={() => handleThemeChange('system')}
+                        className="cursor-pointer"
+                        data-testid="theme-system"
+                      >
+                        <Monitor className="h-4 w-4 mr-2" />
+                        System
+                      </DropdownMenuItem>
+                      
+                      <DropdownMenuSeparator />
+                      
+                      <DropdownMenuLabel>Language</DropdownMenuLabel>
+                      {languages.map((lang) => (
+                        <DropdownMenuItem 
+                          key={lang.code}
+                          onClick={() => handleLanguageChange(lang.code)}
+                          className="cursor-pointer"
+                          data-testid={`language-${lang.code}`}
+                        >
+                          <Globe className="h-4 w-4 mr-2" />
+                          {lang.name}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md cursor-pointer hover:bg-gray-200 transition-colors" data-testid="user-profile-chip">
+                        <User className="h-4 w-4 text-gray-600" />
+                        <span className="text-sm font-medium text-gray-700" data-testid="user-name">
+                          {user.firstName} {user.lastName}
+                        </span>
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-48">
+                      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem 
+                        onClick={handleLogout}
+                        className="cursor-pointer text-red-600"
+                        data-testid="button-logout"
+                      >
+                        <LogOut className="h-4 w-4 mr-2" />
+                        Logout
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </>
               ) : (
-                <Button size="sm" onClick={() => window.location.href = "/api/login"}>
-                  Login
-                </Button>
+                <>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button 
+                        variant="ghost" 
+                        size="sm"
+                        data-testid="button-settings"
+                      >
+                        <Settings className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-56">
+                      <DropdownMenuLabel>Theme</DropdownMenuLabel>
+                      <DropdownMenuItem 
+                        onClick={() => handleThemeChange('light')}
+                        className="cursor-pointer"
+                        data-testid="theme-light"
+                      >
+                        <Sun className="h-4 w-4 mr-2" />
+                        Light
+                      </DropdownMenuItem>
+                      <DropdownMenuItem 
+                        onClick={() => handleThemeChange('dark')}
+                        className="cursor-pointer"
+                        data-testid="theme-dark"
+                      >
+                        <Moon className="h-4 w-4 mr-2" />
+                        Dark
+                      </DropdownMenuItem>
+                      <DropdownMenuItem 
+                        onClick={() => handleThemeChange('system')}
+                        className="cursor-pointer"
+                        data-testid="theme-system"
+                      >
+                        <Monitor className="h-4 w-4 mr-2" />
+                        System
+                      </DropdownMenuItem>
+                      
+                      <DropdownMenuSeparator />
+                      
+                      <DropdownMenuLabel>Language</DropdownMenuLabel>
+                      {languages.map((lang) => (
+                        <DropdownMenuItem 
+                          key={lang.code}
+                          onClick={() => handleLanguageChange(lang.code)}
+                          className="cursor-pointer"
+                          data-testid={`language-${lang.code}`}
+                        >
+                          <Globe className="h-4 w-4 mr-2" />
+                          {lang.name}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  
+                  <Button 
+                    variant="ghost" 
+                    size="sm"
+                    onClick={() => setIsLoginModalOpen(true)}
+                    data-testid="button-login"
+                  >
+                    <User className="h-4 w-4" />
+                  </Button>
+                </>
               )}
             </div>
           </div>
@@ -275,7 +476,7 @@ export default function Auctions() {
                       </div>
                       <div className="flex justify-between">
                         <span className="text-sm text-muted-foreground">Quality Score:</span>
-                        <span className="font-semibold text-chart-2">{auction.qualityScore || 0}/100</span>
+                        <span className="font-semibold text-gray-900">{auction.qualityScore || 0}/100</span>
                       </div>
                       <div className="flex justify-between">
                         <span className="text-sm text-muted-foreground">Duration:</span>
@@ -290,7 +491,7 @@ export default function Auctions() {
                     </div>
                     
                     <Button 
-                      className="w-full" 
+                      className="w-full bg-gray-900 hover:bg-gray-800 text-white" 
                       onClick={() => handleBidClick(auction)}
                       disabled={getTimeRemaining(auction.endDate) === "Ended"}
                       data-testid={`button-bid-${auction.id}`}
@@ -373,6 +574,7 @@ export default function Auctions() {
                   <Button 
                     type="submit" 
                     disabled={bidMutation.isPending}
+                    className="bg-gray-900 hover:bg-gray-800 text-white"
                     data-testid="button-submit-bid"
                   >
                     {bidMutation.isPending ? "Placing Bid..." : "Place Bid"}
@@ -391,6 +593,13 @@ export default function Auctions() {
           )}
         </DialogContent>
       </Dialog>
+      
+      {/* Login Modal */}
+      <LoginModal 
+        isOpen={isLoginModalOpen} 
+        onClose={() => setIsLoginModalOpen(false)} 
+      />
+      
       <Footer />
     </div>
   );