TurboTrades/docs/MAINTENANCE_PAGE_UPDATE.md

# Maintenance Page Update - Quick Reference

## Changes Made

### 1. **Standalone Maintenance Page**
The maintenance page is now completely standalone - no header, no footer, just the maintenance content.

### 2. **Steam Login Button**
Added a Steam login button with the Steam logo so admins can authenticate and bypass maintenance mode.

### 3. **Auto-Redirect for Admins**
When an admin logs in successfully, they are automatically redirected to the home page and can access the full site.

## Visual Changes

### Before
- Maintenance page showed with full site layout (navbar, footer)
- Had "admin notice" box with "Continue to Dashboard" button
- Had social media links at bottom

### After
- Clean, standalone page with no navbar/footer
- Professional Steam login button styled like official Steam buttons
- Automatic redirect for admins after login
- Cleaner, more focused UI

## How It Works

### For Non-Admin Users
1. Visit site during maintenance
2. See maintenance page with countdown (if scheduled)
3. Can click "Login with Steam" button
4. After Steam auth, if not admin → stays on maintenance page
5. Site remains inaccessible until maintenance ends

### For Admin Users
1. Visit site during maintenance
2. See maintenance page
3. Click "Login with Steam" button
4. Complete Steam authentication
5. **Automatically redirected to home page**
6. Full site access restored
7. Can navigate normally while maintenance is active for others

## Technical Implementation

### App.vue
```vue
const showLayout = computed(() => route.name !== "Maintenance");
```
- Conditionally hides NavBar, Footer, and AnnouncementBanner
- Only shows these components when NOT on maintenance page

### MaintenancePage.vue
```vue
<a :href="steamLoginUrl" class="steam-login-btn">
  <svg class="steam-icon"><!-- Steam logo SVG --></svg>
  <span>Login with Steam</span>
</a>
```
- Added Steam login button with official Steam logo
- Links to `/api/auth/steam` for OAuth flow
- Styled to match Steam's branding (dark gray/blue gradient)

### router/index.js
```javascript
// If on maintenance page and user is admin, redirect to home
if (to.name === "Maintenance" && authStore.isAdmin) {
  next({ name: "Home" });
  return;
}
```
- Checks if logged-in user is admin
- Automatically redirects admins away from maintenance page
- Regular users stay on maintenance page

## Testing

### Test 1: Non-Admin Experience
1. Open incognito window
2. Go to `http://localhost:5173`
3. ✅ Should see maintenance page (no header/footer)
4. ✅ Should see Steam login button
5. Click "Login with Steam"
6. Complete authentication
7. ✅ If not admin, returns to maintenance page

### Test 2: Admin Experience
1. Open normal browser window
2. Enable maintenance mode in admin panel
3. Log out
4. Go to `http://localhost:5173`
5. ✅ Should see maintenance page (no header/footer)
6. ✅ Should see Steam login button
7. Click "Login with Steam"
8. Complete authentication as admin user
9. ✅ Should be automatically redirected to home page
10. ✅ Can navigate site normally
11. ✅ Other users still see maintenance page

### Test 3: Layout Visibility
1. While on maintenance page:
   - ✅ No navbar visible
   - ✅ No footer visible
   - ✅ No announcement banner visible
   - ✅ No WebSocket status indicator
2. After admin login and redirect:
   - ✅ Navbar appears
   - ✅ Footer appears
   - ✅ Announcements appear
   - ✅ WebSocket status shows

## Styling Details

### Steam Login Button
- **Background:** Dark gradient (#171a21 → #1b2838) matching Steam's branding
- **Hover:** Lighter gradient with elevation effect
- **Active:** Pressed state with reduced shadow
- **Icon:** Official Steam logo SVG (24x24px)
- **Font:** 600 weight, 1rem size
- **Border:** Subtle white border (10% opacity)
- **Shadow:** Depth with rgba(0,0,0,0.4)

### Color Scheme
- Button uses Steam's official dark blue-gray colors
- Maintains consistency with existing maintenance page design
- High contrast for accessibility

## Files Modified

1. **frontend/src/App.vue**
   - Added `showLayout` computed property
   - Conditionally renders NavBar, Footer, AnnouncementBanner

2. **frontend/src/views/MaintenancePage.vue**
   - Removed admin notice section
   - Removed social media links
   - Added Steam login button with logo
   - Added `steamLoginUrl` computed property

3. **frontend/src/router/index.js**
   - Added admin redirect logic
   - Automatically sends admins to home page after login

## Environment Variables

The Steam login button uses:
```javascript
const steamLoginUrl = computed(() => {
  return `${import.meta.env.VITE_API_URL || "/api"}/auth/steam`;
});
```

- If `VITE_API_URL` is set → uses that base URL
- Otherwise → uses `/api` and relies on Vite proxy

## Security Considerations

✅ **Auth routes allowed during maintenance** (in `middleware/maintenance.js`)
- Steam OAuth flow works during maintenance
- Users can authenticate
- Admin check happens after authentication
- Non-admins are still blocked from accessing site

✅ **No bypass vulnerabilities**
- Authentication required for admin access
- `staffLevel >= 3` check in middleware
- Router guard double-checks admin status
- No client-side only checks

## Next Steps

After testing, you may want to:
1. ✅ Test with real admin account
2. ✅ Test with regular user account
3. Update maintenance message to be more professional
4. Test scheduled maintenance with countdown
5. Verify mobile responsiveness
6. Test rapid login/logout cycles
7. Verify WebSocket reconnection after maintenance ends

## Success Criteria

✅ Maintenance page has no header/footer
✅ Steam login button visible and functional
✅ Admins automatically redirected after login
✅ Non-admins stay on maintenance page
✅ Clean, professional appearance
✅ Maintains Steam branding consistency