TurboTrades/docs/TESTING_MAINTENANCE_AND_ANNOUNCEMENTS.md

Testing Maintenance Mode and Announcements

Overview

This document provides testing instructions for the maintenance mode and announcement features.

Issues Fixed

1. Maintenance Mode

Problem: When maintenance mode was enabled and users tried to log in via Steam OAuth (/auth/steam), they received a JSON response instead of being shown a proper maintenance page.

Solution:

• Updated middleware/maintenance.js to allow all authentication routes
• Added maintenance mode check in router's beforeEach guard
• Created proper maintenance page redirect flow
• Updated axios interceptor to handle 503 maintenance responses

2. Announcements Not Showing

Problem: Announcements were stored in the database but weren't displaying on the frontend.

Solution:

• Verified AnnouncementBanner.vue component is properly imported in App.vue
• Ensured /api/config/announcements endpoint returns correct data format
• Component now fetches announcements on mount and displays them at the top of the page

Testing Instructions

Prerequisites

1. Backend server running: npm run dev (in project root)
2. Frontend server running: cd frontend && npm run dev
3. Database connected with test data

Test 1: Announcement Display

Current Status

There's an active announcement in the database:

• Type: warning
• Message: "Im gay"
• Enabled: true
• Dismissible: true

Steps to Test

1. Open your browser and navigate to http://localhost:5173
2. You should see a yellow/orange warning banner at the top of the page (below the navbar)
3. The banner should display the message and have an X button to dismiss it
4. Click the X button - the announcement should disappear
5. Refresh the page - the announcement should stay dismissed (stored in localStorage)
6. Open browser DevTools > Application > Local Storage
7. Clear dismissedAnnouncements and refresh - announcement should reappear

Verify API

curl http://localhost:3000/api/config/announcements

Should return:

{
  "success": true,
  "announcements": [
    {
      "id": "6004923a-e732-4e74-a39c-fc8588489fdf",
      "type": "warning",
      "message": "Im gay",
      "dismissible": true,
      "createdAt": "2026-01-10T20:26:29.779Z"
    }
  ]
}

Test 2: Maintenance Mode (Non-Admin User)

Current Status

Maintenance mode is ENABLED in the database.

Steps to Test

1. Log out from your current session (if logged in as admin)
2. Open an incognito/private window
3. Navigate to http://localhost:5173
4. You should be redirected to the Maintenance Page showing:
   • Rotating gear icon
   • "We'll Be Right Back!" title
   • Maintenance message
   • Loading animation dots

Try Different Routes

In the incognito window, try accessing:

• http://localhost:5173/market → Should redirect to maintenance
• http://localhost:5173/inventory → Should redirect to maintenance
• http://localhost:5173/profile → Should redirect to maintenance

Try Steam Login

1. In incognito window, try clicking "Login with Steam" button (if visible)
2. Or navigate directly to http://localhost:5173/api/auth/steam
3. You should still be able to complete the Steam OAuth flow
4. After successful login, if you're not an admin, you should be redirected to maintenance page

Test 3: Maintenance Mode (Admin User)

Steps to Test

1. In your normal browser window (not incognito), log in as an admin user
2. You should see a purple "Admin Notice" box on the maintenance page saying:
   • "You can access the site as an admin"
   • "Continue to Dashboard" button
3. Click "Continue to Dashboard" - you should be able to access the site normally
4. Navigate to different pages - everything should work for you as admin

Alternative: Check Admin Status

Your current logged-in user should have staffLevel >= 3 to bypass maintenance.

Test 4: Disable Maintenance Mode

Via Admin Panel

1. As admin, navigate to http://localhost:5173/admin
2. Find the "Maintenance Mode" section
3. Toggle the switch to OFF
4. Click "Save Maintenance Settings"

Via Database (Alternative)

node -e "
import('mongoose').then(async (mongoose) => {
  await mongoose.default.connect('mongodb://localhost:27017/turbotrades');
  const SiteConfig = (await import('./models/SiteConfig.js')).default;
  const config = await SiteConfig.getConfig();
  config.maintenance.enabled = false;
  await config.save();
  console.log('✅ Maintenance mode disabled');
  process.exit(0);
});
"

Verify

1. In incognito window, refresh the page
2. You should now see the normal site (not maintenance page)
3. All features should be accessible to non-admin users

Test 5: Create New Announcement via Admin Panel

Steps

1. Navigate to http://localhost:5173/admin (as admin)
2. Scroll to "Announcements" section
3. Click "Create Announcement" button
4. Fill in the form:
   • Type: Info
   • Message: "Welcome to our new update!"
   • Enabled: Yes
   • Dismissible: Yes
   • Scheduling: Leave blank (or set start/end dates)
5. Click "Create"
6. The announcement should appear at the top of the page immediately

Test Announcement Types

Create announcements with different types to see color variations:

• Info: Blue gradient
• Warning: Orange/yellow gradient
• Success: Green gradient
• Error: Red gradient

Test 6: Scheduled Maintenance

Via Admin Panel

1. Go to Admin > Maintenance Mode
2. Enable "Schedule Maintenance"
3. Set "Scheduled End" to 10 minutes from now
4. Enable maintenance mode
5. In incognito window, you should see:
   • Maintenance page
   • Countdown timer showing hours:minutes:seconds
   • Estimated completion time below the countdown

Expected Behavior

• Countdown should update every second
• When countdown reaches zero, page should auto-reload
• After reload, maintenance page should disappear (site accessible)

API Endpoints Reference

Public Config

GET /api/config/public
# Returns: maintenance status, features, trading/market settings

Announcements

GET /api/config/announcements
# Returns: list of active announcements

Status

GET /api/config/status
# Returns: site operational status and service availability

Troubleshooting

Announcement Not Showing

1. Check browser console for errors
2. Verify API call: Open DevTools > Network > Look for /api/config/announcements
3. Check response data format
4. Clear localStorage and refresh
5. Verify announcement is enabled in database

Maintenance Mode Not Working

1. Check database: Run the maintenance status query above
2. Verify you're testing in incognito (not logged in as admin)
3. Check backend logs for middleware execution
4. Verify router guard is checking maintenance status
5. Hard refresh browser (Ctrl+Shift+R)

Getting JSON Response Instead of Page

This was the original bug - should now be fixed. If you still see JSON:

1. Clear browser cache completely
2. Restart both frontend and backend servers
3. Check that maintenance.js middleware is registered globally in index.js
4. Verify axios interceptor has the 503 handler

Admin Bypass Not Working

1. Verify your user's staffLevel >= 3
2. Check auth store: console.log(useAuthStore().isAdmin) in browser console
3. Ensure you're properly logged in (check /api/auth/me)

Files Modified

Backend

• middleware/maintenance.js - Added auth route exceptions
• routes/config.js - Announcements endpoint
• index.js - Registered maintenance middleware globally

Frontend

• router/index.js - Added maintenance check in beforeEach guard
• utils/axios.js - Added 503 maintenance handling
• views/MaintenancePage.vue - Fetches maintenance config on mount
• components/AnnouncementBanner.vue - Displays active announcements
• App.vue - Includes AnnouncementBanner component

Expected Results

✅ Announcements:

• Display at top of page below navbar
• Can be dismissed and stay dismissed
• Respect date ranges if scheduled
• Multiple announcements stack vertically

✅ Maintenance Mode:

• Non-admin users see maintenance page
• Admin users see notice but can bypass
• Steam OAuth still works during maintenance
• Proper page display (not JSON response)
• Countdown timer works if scheduled end is set

Next Steps

After testing, you may want to:

1. Update the test announcement message to something more appropriate
2. Test scheduled announcements with start/end dates
3. Add real social media links to maintenance page
4. Customize maintenance message per your needs
5. Test with multiple announcements active at once