feat: Implement login, register, and dashboard views

Build complete auth flow with dark-themed CORROSION branding,
loading states, error handling, client-side validation, and
placeholder dashboard with stat cards and quick actions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-14 21:46:35 -05:00
parent e2f2f64d33
commit 9217f77998
3 changed files with 393 additions and 12 deletions

View File

@@ -1,10 +1,72 @@
<script setup lang="ts">
// TODO: Implement server overview dashboard with key metrics and status
import { useAuthStore } from '@/stores/auth'
const auth = useAuthStore()
</script>
<template>
<div class="p-6">
<h1 class="text-2xl font-bold text-neutral-100 mb-4">Dashboard</h1>
<p class="text-neutral-400">Server overview players online, performance metrics, and quick actions.</p>
<div class="p-6 space-y-8">
<!-- Welcome header -->
<div>
<h1 class="text-2xl font-bold text-neutral-100">
Welcome back, {{ auth.user?.username }}
</h1>
<p class="text-sm text-neutral-500 mt-1">Here's what's happening with your server.</p>
</div>
<!-- Stat cards grid -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Server Status -->
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
<p class="text-sm text-neutral-400 mb-2">Server Status</p>
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-red-500"></span>
<span class="text-2xl font-bold text-neutral-100">Offline</span>
</div>
</div>
<!-- Players Online -->
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
<p class="text-sm text-neutral-400 mb-2">Players Online</p>
<p class="text-2xl font-bold text-neutral-100">0/0</p>
</div>
<!-- Next Wipe -->
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
<p class="text-sm text-neutral-400 mb-2">Next Wipe</p>
<p class="text-2xl font-bold text-neutral-100">Not Scheduled</p>
</div>
<!-- Uptime -->
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
<p class="text-sm text-neutral-400 mb-2">Uptime</p>
<p class="text-2xl font-bold text-neutral-100">&mdash;</p>
</div>
</div>
<!-- Quick Actions -->
<div>
<h2 class="text-lg font-semibold text-neutral-200 mb-4">Quick Actions</h2>
<div class="flex flex-wrap gap-3">
<button
disabled
class="px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed text-neutral-300 rounded-lg text-sm font-medium transition-colors"
>
Start Server
</button>
<button
disabled
class="px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed text-neutral-300 rounded-lg text-sm font-medium transition-colors"
>
Stop Server
</button>
<button
disabled
class="px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed text-neutral-300 rounded-lg text-sm font-medium transition-colors"
>
Trigger Wipe
</button>
</div>
</div>
</div>
</template>