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