feat: Complete admin panel implementation
- Add user management system with all CRUD operations - Add promotion statistics dashboard with export - Simplify Trading & Market settings UI - Fix promotion schema (dates now optional) - Add missing API endpoints and PATCH support - Add comprehensive documentation - Fix critical bugs (deletePromotion, duplicate endpoints) All features tested and production-ready.
This commit is contained in:
261
docs/TESTING_MAINTENANCE_AND_ANNOUNCEMENTS.md
Normal file
261
docs/TESTING_MAINTENANCE_AND_ANNOUNCEMENTS.md
Normal file
@@ -0,0 +1,261 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user