TurboTrades/ADMIN_TROUBLESHOOTING.md

Admin Panel Troubleshooting Guide

This guide helps you troubleshoot common issues with the TurboTrades admin panel.

Issue 1: Cannot Access Admin Panel (Routes Not Working)

Symptoms

• Navigating to /admin redirects to home page
• Admin panel doesn't load
• Getting 403 Forbidden errors

Solutions

Step 1: Check Admin Permissions

1. Verify your user has admin access:

   • Your user's staffLevel must be 3 or higher
   • Check your user in the database:

     // In MongoDB
     db.users.findOne({ steamId: "YOUR_STEAM_ID" })
     

2. Set admin via database:

   // In MongoDB
   db.users.updateOne(
     { steamId: "YOUR_STEAM_ID" },
     { $set: { staffLevel: 5 } }
   )
   

3. Alternative: Use environment variable:

   • Add your Steam ID to .env:

     ADMIN_STEAM_IDS=76561198012345678,76561198087654321
     

   • Restart the server after adding

Step 2: Verify Backend is Running

1. Check if backend is accessible:

   curl http://localhost:3000/health
   

2. Test admin routes directly:

   # This should return 401 if not logged in
   curl http://localhost:3000/api/admin/config
   

3. Check server logs:

   • Look for route registration messages:

     ✅ All routes registered
     

Step 3: Verify Frontend Development Server

1. Ensure Vite dev server is running:

   cd frontend
   npm run dev
   

2. Check the proxy is working:

   • Open browser DevTools (F12)
   • Navigate to Network tab
   • Try accessing admin panel
   • Check if API calls are going to localhost:3000

3. Verify frontend build (for production):

   cd frontend
   npm run build
   

Step 4: Clear Browser Cache

1. Open DevTools (F12)
2. Right-click the refresh button
3. Select "Empty Cache and Hard Reload"
4. Or use Ctrl+Shift+Del to clear all browser data

Step 5: Check Authentication

1. Verify you're logged in:

   • Open browser console (F12)
   • Type: localStorage and check for session data
   • Or check Application → Cookies → connect.sid

2. Test login endpoint:

   # Navigate to this in your browser
   http://localhost:3000/api/auth/steam
   

3. Verify session:

   curl -b cookies.txt http://localhost:3000/api/auth/me
   

Issue 2: Toggles Not Clear/Visible

Symptoms

• Toggle switches are hard to see
• Can't tell if toggle is ON or OFF
• Toggles don't have clear labels

Solutions

Already Fixed!

The new ToggleSwitch.vue component has been created with:

• ✅ Clear ON/OFF labels inside the toggle
• ✅ Green color when ON
• ✅ Red color when OFF
• ✅ Smooth animations
• ✅ Better accessibility

If Still Having Issues:

1. Clear build cache:

   cd frontend
   rm -rf node_modules/.vite
   npm run dev
   

2. Rebuild frontend:

   cd frontend
   npm run build
   

Issue 3: Admin API Calls Failing

Symptoms

• Admin panel loads but shows errors
• API calls return 401/403
• Data doesn't load in admin panels

Solutions

Check CORS Configuration

1. Verify CORS settings in index.js:

   origin: (origin, cb) => {
     const allowedOrigins = [
       "http://localhost:5173",
       "http://localhost:3000",
       // Add your production domain
     ];
     // ...
   }
   

2. Verify credentials are sent:

   • Check frontend/src/utils/axios.js:

     withCredentials: true
     

Check Middleware

1. Verify authenticate middleware:

   // In routes/admin-management.js
   preHandler: [authenticate, isAdmin]
   

2. Test middleware manually:

   • Add console.log to middleware/auth.js
   • Check server logs when accessing admin routes

Issue 4: Admin Panel Blank/White Screen

Symptoms

• Admin panel loads but is blank
• Console shows component errors
• Components not rendering

Solutions

1. Check browser console for errors:

   • Press F12 → Console tab
   • Look for Vue component errors
   • Look for import/module errors

2. Verify all components exist:

   ls frontend/src/components/Admin*.vue
   ls frontend/src/components/ToggleSwitch.vue
   

3. Check component imports:

   // In AdminPage.vue
   import AdminUsersPanel from '@/components/AdminUsersPanel.vue'
   import AdminConfigPanel from '@/components/AdminConfigPanel.vue'
   

4. Rebuild with clean slate:

   cd frontend
   rm -rf node_modules dist .vite
   npm install
   npm run build
   

Issue 5: Config Not Saving

Symptoms

• Clicking "Save" doesn't work
• No success/error messages
• Changes don't persist

Solutions

1. Check SiteConfig model exists:

   // Should exist: models/SiteConfig.js
   

2. Initialize config in database:

   // In MongoDB
   db.siteconfigs.insertOne({
     maintenance: {
       enabled: false,
       message: "",
       allowedSteamIds: [],
       scheduledStart: null,
       scheduledEnd: null
     },
     trading: {
       enabled: true,
       depositEnabled: true,
       withdrawEnabled: true,
       minDeposit: 0.1,
       minWithdraw: 0.5,
       withdrawFee: 0.05,
       maxItemsPerTrade: 50
     },
     market: {
       enabled: true,
       commission: 0.1,
       minListingPrice: 0.01,
       maxListingPrice: 100000,
       autoUpdatePrices: true,
       priceUpdateInterval: 3600000
     },
     announcements: [],
     promotions: []
   })
   

3. Check network requests:

   • Open DevTools → Network tab
   • Click save button
   • Check for POST/PATCH requests
   • Look at response status and body

Quick Diagnostic Commands

Backend Health Check

# Check if server is running
curl http://localhost:3000/health

# Check authentication
curl -b cookies.txt http://localhost:3000/api/auth/me

# Check admin access (should get 401 if not logged in)
curl http://localhost:3000/api/admin/config

Database Check

// Check user permissions
db.users.find({ staffLevel: { $gte: 3 } })

// Check site config exists
db.siteconfigs.findOne()

// Manually set user as admin
db.users.updateOne(
  { steamId: "YOUR_STEAM_ID" },
  { $set: { staffLevel: 5 } }
)

Frontend Check

# Check if dependencies are installed
cd frontend && npm list vue vue-router pinia

# Rebuild everything
npm install && npm run build

# Start dev server
npm run dev

Common Error Messages

"Admin access required"

Cause: User doesn't have staffLevel >= 3
Fix: Update user's staffLevel in database or add to ADMIN_STEAM_IDS

"Authentication required"

Cause: Not logged in or session expired
Fix: Log in via Steam OAuth, check cookies

"Network error"

Cause: Backend not running or CORS issue
Fix: Start backend, check CORS configuration

"Failed to fetch"

Cause: API endpoint doesn't exist or wrong URL
Fix: Check route registration in index.js, verify API base URL

Testing Admin Access

Test Script

Create a test file test-admin.js:

import axios from 'axios';

const API_URL = 'http://localhost:3000';

async function testAdmin() {
  try {
    // Test 1: Health check
    console.log('Testing health endpoint...');
    const health = await axios.get(`${API_URL}/health`);
    console.log('✅ Health check passed');

    // Test 2: Auth check (will fail if not logged in)
    console.log('\nTesting auth endpoint...');
    try {
      const auth = await axios.get(`${API_URL}/api/auth/me`, {
        withCredentials: true
      });
      console.log('✅ Authenticated:', auth.data.user.username);
      console.log('   Staff Level:', auth.data.user.staffLevel);
      console.log('   Is Admin:', auth.data.user.staffLevel >= 3);
    } catch (e) {
      console.log('❌ Not authenticated');
    }

    // Test 3: Admin config (will fail if not admin)
    console.log('\nTesting admin config endpoint...');
    try {
      const config = await axios.get(`${API_URL}/api/admin/config`, {
        withCredentials: true
      });
      console.log('✅ Admin access granted');
    } catch (e) {
      console.log('❌ Admin access denied:', e.response?.data?.message);
    }

  } catch (error) {
    console.error('Error:', error.message);
  }
}

testAdmin();

Run with: node test-admin.js

Still Having Issues?

1. Check all environment variables:

   cat .env | grep -E "(MONGO|PORT|SESSION|ADMIN)"
   

2. Restart everything:

   # Backend
   npm run dev
   
   # Frontend (in another terminal)
   cd frontend && npm run dev
   

3. Check logs:

   • Backend: Look at console output
   • Frontend: Check browser console (F12)
   • Network: Check DevTools Network tab

4. Verify versions:

   node --version  # Should be >= 18
   npm --version   # Should be >= 9
   

5. Create a minimal test:

   • Create new test user with staffLevel 5
   • Log in with that user
   • Navigate to /admin
   • Check browser console for errors

Contact/Support

If you're still experiencing issues after trying these solutions:

1. Check the server logs for error messages
2. Check browser console for JavaScript errors
3. Verify all files mentioned in this guide exist
4. Ensure MongoDB is running and accessible
5. Check that all npm packages are installed
6. Try accessing from a different browser
7. Review the ADMIN_SYSTEM.md for implementation details

---

Last Updated: Based on the latest admin panel implementation
Version: 2.0 with improved toggle switches and debugging