hh

Author: gottasellemall69

components/Yugioh/Card.js

@@ -35,7 +35,7 @@ const Card = ( { cardData } ) => {
       <Image
         as="image"
         unoptimized="true"
-        className="lg:object-cover object-scale-down object-center w-full mx-auto h-96 aspect-1"
+        className="lg:object-contain object-scale-down object-top w-full mx-auto h-96 aspect-1"
         src={ imageSrc }
         alt={ `Card Image - ${ productName }` }
         width={ 1600 }

middleware.ts

@@ -1,28 +1,14 @@
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
-import jwt from "jsonwebtoken";
 
 const LOGIN_ROUTE = "/login";
 const PROTECTED_MATCHERS = [
   "/yugioh/my-collection",
   "/yugioh/test-page",
 ];
 const AUTH_STATE_COOKIE = "auth_state";
-const AUTH_COOKIE_MAX_AGE = 60 * 60 * 24;
 const isProduction = process.env.NODE_ENV === "production";
 
-const setAuthenticatedCookie = ( response: NextResponse ) => {
-  response.cookies.set( {
-    name: AUTH_STATE_COOKIE,
-    value: "1",
-    maxAge: AUTH_COOKIE_MAX_AGE,
-    sameSite: "strict",
-    path: "/",
-    secure: isProduction,
-    httpOnly: false,
-  } );
-};
-
 const clearAuthenticatedCookie = ( response: NextResponse ) => {
   response.cookies.set( {
     name: AUTH_STATE_COOKIE,
@@ -43,21 +29,10 @@ const isProtectedPath = ( pathname: string ): boolean =>
 const collectReturnPath = ( request: NextRequest ): string => {
   const target = request.nextUrl.pathname + request.nextUrl.search;
   return target === LOGIN_ROUTE ? "/" : target;
-
 };
 
-const getToken = ( request: NextRequest ): string | null => {
-  const bearer = request.headers.get( "authorization" );
-  if ( bearer?.toLowerCase().startsWith( "bearer " ) ) {
-    const token = bearer.slice( 7 ).trim();
-    if ( token ) {
-      return token;
-    }
-  }
-
-  const cookieToken = request.cookies.get( "token" );
-  return cookieToken?.value ?? null;
-};
+const hasAuthenticatedCookie = ( request: NextRequest ): boolean =>
+  request.cookies.get( AUTH_STATE_COOKIE )?.value === "1";
 
 const PUBLIC_GET_API_PREFIXES = [
   "/api/Yugioh/cards/[setNameId]",
@@ -106,51 +81,29 @@ const handleUnauthorized = ( request: NextRequest ) => {
 
 export function middleware( request: NextRequest ) {
   const { pathname } = request.nextUrl;
+  const isApiPath = pathname.startsWith( "/api/Yugioh/" );
 
-  if ( !isProtectedPath( pathname ) && !pathname.startsWith( "/api/Yugioh/" ) ) {
+  if ( !isProtectedPath( pathname ) && !isApiPath ) {
     return NextResponse.next();
   }
 
   if ( request.method === "OPTIONS" ) {
     return NextResponse.next();
   }
 
-  if ( pathname.startsWith( "/api/Yugioh/" ) && isPublicApiRequest( request ) ) {
+  if ( isApiPath && isPublicApiRequest( request ) ) {
     return NextResponse.next();
   }
 
-  const token = getToken( request );
-  if ( !token ) {
-    return handleUnauthorized( request );
+  if ( isApiPath ) {
+    return NextResponse.next();
   }
 
-  const secret = process.env.JWT_SECRET;
-  if ( !secret ) {
-    console.error( "JWT_SECRET is not configured" );
-    return handleUnauthorized( request );
+  if ( hasAuthenticatedCookie( request ) ) {
+    return NextResponse.next();
   }
 
-  try {
-    const decoded = jwt.verify( token, secret );
-    const payload =
-      typeof decoded === "object" && decoded !== null
-        ? decoded
-        : { sub: decoded };
-
-    const headers = new Headers( request.headers );
-    headers.set( "x-authenticated-user", JSON.stringify( payload ) );
-
-    const response = NextResponse.next( {
-      request: {
-        headers,
-      },
-    } );
-    setAuthenticatedCookie( response );
-    return response;
-  } catch ( error ) {
-    console.error( "Failed to verify token in middleware:", error );
-    return handleUnauthorized( request );
-  }
+  return handleUnauthorized( request );
 }
 
 export const config = {

middleware/authenticate.js

@@ -2,6 +2,41 @@ import jwt from "jsonwebtoken";
 import clientPromise from "@/utils/mongo";
 import { ObjectId } from "mongodb";
 
+const isProduction = process.env.NODE_ENV === "production";
+const baseCookieAttributes = [ "Path=/", "SameSite=Strict" ];
+if ( isProduction ) {
+  baseCookieAttributes.push( "Secure" );
+}
+const expiredCookieAttributes = [ ...baseCookieAttributes, "Max-Age=0" ];
+const EXPIRED_TOKEN_COOKIE = `token=; HttpOnly; ${ expiredCookieAttributes.join( "; " ) }`;
+const EXPIRED_AUTH_STATE_COOKIE = `auth_state=; ${ expiredCookieAttributes.join( "; " ) }`;
+
+function appendSetCookie( res, cookies ) {
+  const existing = res.getHeader( "Set-Cookie" );
+
+  if ( !existing ) {
+    res.setHeader( "Set-Cookie", cookies );
+    return;
+  }
+
+  if ( Array.isArray( existing ) ) {
+    res.setHeader( "Set-Cookie", [ ...existing, ...cookies ] );
+    return;
+  }
+
+  res.setHeader( "Set-Cookie", [ existing, ...cookies ] );
+}
+
+function clearAuthCookies( res ) {
+  appendSetCookie( res, [ EXPIRED_TOKEN_COOKIE, EXPIRED_AUTH_STATE_COOKIE ] );
+}
+
+function respondUnauthorized( res, message ) {
+  clearAuthCookies( res );
+  res.status( 401 ).json( { error: message } );
+  return null;
+}
+
 function extractBearerToken( headerValue ) {
   if ( !headerValue || typeof headerValue !== "string" ) {
     return null;
@@ -64,8 +99,7 @@ export async function requireUser(
   const token = getTokenFromRequest( req );
 
   if ( !token && !middlewareUser ) {
-    res.status( 401 ).json( { error: "Unauthorized: No token provided" } );
-    return null;
+    return respondUnauthorized( res, "Unauthorized: No token provided" );
   }
 
   let decoded = middlewareUser;
@@ -75,19 +109,16 @@ export async function requireUser(
       decoded = jwt.verify( token, process.env.JWT_SECRET );
     } catch ( error ) {
       console.error( "Invalid token:", error );
-      res.status( 401 ).json( { error: "Unauthorized: Invalid token" } );
-      return null;
+      return respondUnauthorized( res, "Unauthorized: Invalid token" );
     }
   }
 
   if ( !decoded ) {
-    res.status( 401 ).json( { error: "Unauthorized: Invalid token payload" } );
-    return null;
+    return respondUnauthorized( res, "Unauthorized: Invalid token payload" );
   }
 
   if ( !decoded?.userId || !decoded?.username ) {
-    res.status( 401 ).json( { error: "Unauthorized: Invalid token payload" } );
-    return null;
+    return respondUnauthorized( res, "Unauthorized: Invalid token payload" );
   }
 
   req.user = decoded;
@@ -104,8 +135,7 @@ export async function requireUser(
       .findOne( { _id: new ObjectId( decoded.userId ) } );
 
     if ( !user ) {
-      res.status( 401 ).json( { error: "Unauthorized: User not found" } );
-      return null;
+      return respondUnauthorized( res, "Unauthorized: User not found" );
     }
 
     return { token, decoded, user };

pages/yugioh/sets/[letter]/[setName].js

@@ -1,22 +1,32 @@
 import fs from "fs/promises";
 import path from "path";
-import { useEffect, useState, useMemo, useCallback, Suspense } from "react";
+import { useEffect, useState, useMemo, useCallback } from "react";
 import { useRouter } from "next/router";
 import Head from "next/head";
 import Link from "next/link";
+import dynamic from "next/dynamic";
 import { Filter, Grid, List } from "lucide-react";
 import Breadcrumb from "@/components/Navigation/Breadcrumb";
 import CardFilter from "@/components/Yugioh/CardFilter";
 import FilterPanel from "@/components/Yugioh/FilterPanel";
 import YugiohSearchBar from "@/components/Yugioh/YugiohSearchBar";
-import YugiohCardDataTable from "@/components/Yugioh/YugiohCardDataTable";
 import YugiohPagination from "@/components/Yugioh/YugiohPagination";
 import Notification from "@/components/Notification";
 import { fetchCardData as fetchAllCardData } from "@/utils/api";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { buildCollectionKey, buildCollectionMap } from "@/utils/collectionUtils.js";
 import { readAuthStateFromCookie, subscribeToAuthState, dispatchAuthStateChange } from "@/utils/authState";
 
+const YugiohCardDataTable = dynamic(
+  () => import( "@/components/Yugioh/YugiohCardDataTable" ),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="py-10 text-center text-white/70">Loading...</div>
+    ),
+  }
+);
+
 const CARD_SETS_FILE_PATH = path.join(
   process.cwd(),
   "public",
@@ -1526,7 +1536,7 @@ const CardsInSetPage = ( { initialSetName = "", setNameId = null, letter = "" }
     const activeVariant = cardItem.activeVariant || null;
     const overlayLabel = activeVariant ? buildVariantLabel( activeVariant ) : currentRarityLabel;
     const cardContainerClasses = [
-      "relative min-h-[24rem] w-full max-w-[350px] mx-auto object-cover overflow-hidden rounded-xl border border-white/10 bg-black/40 shadow-lg transition duration-200 group-hover:border-indigo-400/60 dark:border-white/20 dark:bg-gray-900/60",
+      "relative min-h-[24rem] w-full max-w-[350px] mx-auto object-cover overflow-hidden rounded-sm border border-white/10 bg-black/40 shadow-lg transition duration-200 group-hover:border-indigo-400/60 dark:border-white/20 dark:bg-gray-900/60",
       isSelected ? "ring-2 ring-indigo-400/70" : "",
     ].filter( Boolean ).join( " " );
     const isFlipped = Boolean( flippedGridCards[ selectionKey ] );
@@ -1613,7 +1623,7 @@ const CardsInSetPage = ( { initialSetName = "", setNameId = null, letter = "" }
                 <div className="size-full max-w-fit mx-auto -inset-1">
                   { hasImage ? (
                     <img
-                      className="object-scale-down sm:object-cover object-center w-full mx-auto aspect-square h-full"
+                      className="object-scale-down sm:object-cover object-center w-full mx-auto aspect-1 h-full"
                       src={ imageSrc }
                       alt={ `Card Image - ${ cardItem.productName }` }
                       loading="lazy"
@@ -2065,17 +2075,15 @@ const CardsInSetPage = ( { initialSetName = "", setNameId = null, letter = "" }
                   </>
                 ) : (
                   <div className="overflow-hidden rounded-sm border border-white/10 bg-black/40 p-4 shadow-2xl">
-                    <Suspense fallback={ <div className="py-10 text-center text-white/70">Loading...</div> }>
-                      <YugiohCardDataTable
-                        matchedCardData={ matchedCardData }
-                        selectedRowIds={ selectedRowIds }
-                        setSelectedRowIds={ setSelectedRowIds }
-                        collectionMap={ collectionLookup }
-                        onRarityChange={ handleRarityOverrideChange }
-                        autoRarityOptionValue={ AUTO_RARITY_OPTION }
-                        isAuthenticated={ isAuthenticated }
-                      />
-                    </Suspense>
+                    <YugiohCardDataTable
+                      matchedCardData={ matchedCardData }
+                      selectedRowIds={ selectedRowIds }
+                      setSelectedRowIds={ setSelectedRowIds }
+                      collectionMap={ collectionLookup }
+                      onRarityChange={ handleRarityOverrideChange }
+                      autoRarityOptionValue={ AUTO_RARITY_OPTION }
+                      isAuthenticated={ isAuthenticated }
+                    />
                   </div>
                 ) }
                 { isAuthenticated &&

styles/globals.css

@@ -131,7 +131,7 @@ img:hover
 .navLink:focus-visible
 {
   outline: 2px solid rgba(99, 102, 241, 0.45);
-  outline-offset: 4px;
+  outline-offset: 2px;
 }
 
 .navLink:hover,
@@ -214,7 +214,7 @@ img:hover
   line-height: 1.32;
   color: inherit;
   letter-spacing: 0.04em;
-  filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.12));
+  filter: drop-shadow(0 0 2px rgba(99, 102, 241, 0.12));
   overflow-wrap: anywhere;
   transition: color var(--transition-slow), filter 320ms ease;
 }
@@ -279,15 +279,15 @@ img:hover
 .navLink.navLink-active .navLink-labelText
 {
   color: var(--text-secondary);
-  filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.4));
+  filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.4));
 }
 
 .navLink:hover .navLink-labelText::before,
 .navLink:focus-visible .navLink-labelText::before,
 .navLink.navLink-active .navLink-labelText::before
 {
   -webkit-text-stroke-color: rgba(148, 163, 184, 0.85);
-  filter: drop-shadow(0 0 22px rgba(99, 102, 241, 0.5));
+  filter: drop-shadow(0 0 2px rgba(99, 102, 241, 0.5));
   opacity: 1;
 }
 
@@ -296,7 +296,7 @@ img:hover
 .navLink.navLink-active .navLink-labelText::after
 {
   -webkit-text-stroke-color: rgba(99, 102, 241, 0.48);
-  filter: blur(22px);
+  filter: blur(2px);
   opacity: 0.95;
 }
 
@@ -428,4 +428,4 @@ img:hover
     box-shadow: var(--shadow-soft);
     backdrop-filter: saturate(140%) blur(18px);
   }
-}
+}

styles/gridcards.css

@@ -11,15 +11,15 @@
 .card
 {
   width: min(var(--card-width), 100%);
-  height: 95%;
+  height: 100%;
   position: relative;
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  justify-content: top;
+  align-items: top;
   perspective: 550px;
-  margin: 0.5rem;
-  padding: 0.75rem;
+  margin: 2%;
+  padding: 1%;
 }
 
 .cover-image

styles/hovercards.css

@@ -29,7 +29,7 @@
     position: absolute;
     inset: 0;
     backface-visibility: hidden;
-    border-radius: 30%;
+    border-radius: 2%;
     overflow: hidden;
     display: flex;
     flex-direction: column;