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

const showLayout = computed(() => route.name !== "Maintenance");

• Conditionally hides NavBar, Footer, and AnnouncementBanner
• Only shows these components when NOT on maintenance page

MaintenancePage.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

// 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:

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