SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { 
   FaUser, 
@@ -11,9 +11,11 @@ import {
   FaTimes,
   FaEdit 
 } from "react-icons/fa"
+import { getUserProfile } from "../../api/userApi"
 
 export default function DeckInfoPopUp({ deck, onClose }) {
   const navigate = useNavigate()
+  const [currentUser, setCurrentUser] = useState(null)
   
   if (!deck) return null
 
@@ -32,6 +34,25 @@ export default function DeckInfoPopUp({ deck, onClose }) {
     }
   }, [])
 
+  // Load current user to decide if Edit button should be shown
+  useEffect(() => {
+    let mounted = true
+    const loadUser = async () => {
+      try {
+        const data = await getUserProfile()
+        console.log('👤 Loaded current user:', data)
+        if (mounted) setCurrentUser(data)
+      } catch (e) {
+        // silently ignore - edit button will be hidden for anonymous
+        console.warn('Could not fetch current user profile for DeckInfoPopUp:', e)
+      }
+    }
+
+    loadUser()
+
+    return () => { mounted = false }
+  }, [])
+
   // Backend enum mapping
   const deckTypeMapping = {
     0: { label: "Szerencse", color: "var(--color-luck)" },      // LUCK
@@ -126,6 +147,50 @@ export default function DeckInfoPopUp({ deck, onClose }) {
     onClose()
   }
 
+  // Determine whether the current user can edit this deck
+  // Option 1: Use backend's 'editable' flag if available (ShortDeckDto)
+  // Option 2: Check userid field (DetailDeckDto) or compare user names
+  
+  // Check if user is admin (state === 5)
+  const isAdmin = currentUser ? Number(currentUser.state) === 5 : false
+  
+  // Check if deck is editable (backend provides this in ShortDeckDto)
+  const backendEditableFlag = rawData.editable === true
+  
+  // Fallback: Check if user is the owner by userid (DetailDeckDto) or username
+  const deckOwnerId = rawData.userid // Only available in DetailDeckDto
+  const deckCreatorName = rawData.creator // Available in ShortDeckDto (username)
+  
+  const isOwnerById = currentUser && deckOwnerId
+    ? (String(currentUser.id) === String(deckOwnerId))
+    : false
+  
+  const isOwnerByName = currentUser && deckCreatorName
+    ? (currentUser.username === deckCreatorName)
+    : false
+  
+  // User can edit if:
+  // 1. Backend says it's editable (ShortDeckDto has editable flag)
+  // 2. User is the owner (by ID or username)
+  // 3. User is an admin (state === 5)
+  const canEdit = backendEditableFlag || isOwnerById || isOwnerByName || isAdmin
+
+  // Debug: Check permission logic
+  console.log('🔍 Permission Check:', {
+    'Has currentUser?': !!currentUser,
+    'currentUser.id': currentUser?.id,
+    'currentUser.username': currentUser?.username,
+    'currentUser.state': currentUser?.state,
+    'deckOwnerId (userid)': deckOwnerId,
+    'deckCreatorName': deckCreatorName,
+    'backendEditableFlag': backendEditableFlag,
+    'isOwnerById': isOwnerById,
+    'isOwnerByName': isOwnerByName,
+    'isAdmin': isAdmin,
+    'canEdit': canEdit,
+    'rawData': rawData
+  })
+
   return (
     <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-sm">
       <div 
@@ -254,7 +319,7 @@ export default function DeckInfoPopUp({ deck, onClose }) {
 
           {/* Action buttons */}
           <div className="mt-5 pt-4 border-t border-[color:var(--color-surface-selected)]">
-            <div className="grid grid-cols-2 gap-3">
+            <div className={`grid gap-3 ${canEdit ? 'grid-cols-2' : 'grid-cols-1'}`}>
               {/* Open button */}
               <button
                 className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text-inverse)] transition-all duration-200 hover:scale-105 shadow-lg bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80"
@@ -263,14 +328,16 @@ export default function DeckInfoPopUp({ deck, onClose }) {
                 Megnyitás
               </button>
               
-              {/* Edit button */}
-              <button
-                className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] transition-all duration-200 hover:scale-105 hover:bg-[color:var(--color-surface-selected)] flex items-center justify-center gap-2"
-                onClick={handleEditDeck}
-              >
-                <FaEdit className="text-sm" />
-                Szerkesztés
-              </button>
+              {/* Edit button - only visible to owner or admin (state === 5) */}
+              {canEdit && (
+                <button
+                  className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] transition-all duration-200 hover:scale-105 hover:bg-[color:var(--color-surface-selected)] flex items-center justify-center gap-2"
+                  onClick={handleEditDeck}
+                >
+                  <FaEdit className="text-sm" />
+                  Szerkesztés
+                </button>
+              )}
             </div>
           </div>
         </div>