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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user