diff --git a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx b/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx index e6fc13e7..888a37cd 100644 --- a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx +++ b/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 (
-
+
{/* Open button */} + {/* Edit button - only visible to owner or admin (state === 5) */} + {canEdit && ( + + )}