feat: Add public status page with 10-second polling

Implement status.corrosionmgmt.com public status page showcasing all
Corrosion servers that opt-in. Drives platform visibility and attracts
new customers.

Backend:
- Migration 007: status_page_description TEXT column
- models/public.rs: PublicServerStatus, PlatformHealth, StatusPageResponse
- db/public.rs: get_public_servers() with uptime calculations (24h/7d/30d)
- api/public.rs: GET /api/public/status (no auth)
- api/settings.rs: public site config endpoints (auth required)

Frontend:
- StatusPageView.vue: Server grid with live stats, uptime badges, wipe schedules
- Platform health header: total servers, online count, total players
- Auto-refresh every 10 seconds via polling
- Mobile-responsive design
- SettingsView.vue: Public Status tab with opt-in toggle

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-15 14:24:32 -05:00
parent 1f5516bbec
commit dfa605f44f
9 changed files with 954 additions and 8 deletions

View File

@@ -2,13 +2,13 @@
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useApi } from '@/composables/useApi'
import { Settings, Key, Globe, User, Save, Loader2 } from 'lucide-vue-next'
import { Settings, Key, Globe, User, Save, Loader2, Eye } from 'lucide-vue-next'
const auth = useAuthStore()
const api = useApi()
const saving = ref(false)
const section = ref<'account' | 'license' | 'domain'>('account')
const section = ref<'account' | 'license' | 'domain' | 'public'>('account')
const accountForm = ref({
username: '',
@@ -20,7 +20,12 @@ const domainForm = ref({
custom_domain: '',
})
function loadForms() {
const publicSiteForm = ref({
show_on_status_page: false,
status_page_description: '',
})
async function loadForms() {
if (auth.user) {
accountForm.value.username = auth.user.username
accountForm.value.email = auth.user.email
@@ -29,6 +34,15 @@ function loadForms() {
domainForm.value.subdomain = auth.license.subdomain || ''
domainForm.value.custom_domain = auth.license.custom_domain || ''
}
// Load public site config
try {
const config = await api.get<any>('/settings/public-site')
publicSiteForm.value.show_on_status_page = config.show_on_status_page
publicSiteForm.value.status_page_description = config.status_page_description || ''
} catch (err) {
console.error('Failed to load public site settings:', err)
}
}
async function saveAccount() {
@@ -53,6 +67,17 @@ async function saveDomain() {
}
}
async function savePublicSite() {
saving.value = true
try {
await api.put('/settings/public-site', publicSiteForm.value)
} catch {
// Handle error
} finally {
saving.value = false
}
}
onMounted(() => {
loadForms()
})
@@ -73,6 +98,7 @@ onMounted(() => {
{ key: 'account', label: 'Account', icon: User },
{ key: 'license', label: 'License', icon: Key },
{ key: 'domain', label: 'Domain', icon: Globe },
{ key: 'public', label: 'Public Status', icon: Eye },
] as const)"
:key="tab.key"
@click="section = tab.key"
@@ -206,5 +232,58 @@ onMounted(() => {
Save
</button>
</div>
<!-- Public Status Page -->
<div v-if="section === 'public'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Public Status Page</h2>
<p class="text-xs text-neutral-500">
Showcase your server on the public Corrosion status page at
<a href="https://status.corrosionmgmt.com" target="_blank" class="text-oxide-400 hover:text-oxide-300">
status.corrosionmgmt.com
</a>
</p>
<div class="space-y-4">
<!-- Toggle -->
<div class="flex items-center justify-between p-4 bg-neutral-800 rounded-lg border border-neutral-700">
<div>
<p class="text-sm font-medium text-neutral-200">Show on status page</p>
<p class="text-xs text-neutral-500 mt-1">Display your server publicly with live stats</p>
</div>
<button
@click="publicSiteForm.show_on_status_page = !publicSiteForm.show_on_status_page"
:class="publicSiteForm.show_on_status_page ? 'bg-oxide-600' : 'bg-neutral-700'"
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-oxide-500 focus:ring-offset-2 focus:ring-offset-neutral-900"
>
<span
:class="publicSiteForm.show_on_status_page ? 'translate-x-6' : 'translate-x-1'"
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
></span>
</button>
</div>
<!-- Description -->
<div>
<label class="block text-xs text-neutral-500 mb-1">Description (optional)</label>
<textarea
v-model="publicSiteForm.status_page_description"
placeholder="Friendly 10x modded server with custom plugins..."
rows="3"
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
></textarea>
<p class="text-xs text-neutral-600 mt-1">Brief description shown on the status page</p>
</div>
</div>
<button
@click="savePublicSite"
:disabled="saving"
class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
>
<Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
<Save v-else class="w-4 h-4" />
Save
</button>
</div>
</div>
</template>