# 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
```bash
curl http://localhost:3000/api/config/announcements
```
Should return:
```json
{
  "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)
```bash
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
```bash
GET /api/config/public
# Returns: maintenance status, features, trading/market settings
```

### Announcements
```bash
GET /api/config/announcements
# Returns: list of active announcements
```

### Status
```bash
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