feat: Implement 6 views + updated hero — Server, Chat, Team, Notifications, Settings, Setup Wizard
Server: Connection status, start/stop/restart controls, config editor with edit mode, automation toggles (crash recovery, force wipe, auto-update). Chat Log: Message feed with channel filter (global/team/server), search, flag/unflag per message, timestamped entries with channel badges. Team: Member table with role badges, invite form with role select, pending/active status, remove action. Notifications: Discord webhook, Pushbullet, email toggle cards. 6 event triggers (wipe start/complete/fail, crash, offline, purchase). Settings: 3-tab layout (Account, License, Domain). Account editing, license info display, subdomain + custom domain config with CNAME hint. Setup Wizard: 3-step flow (Configure → Install Agent → Done). Connection type radio cards, RCON/game port config, companion agent install instructions with license key pre-filled. Also swaps hero graphic to corrected version (two-column Control vs Infrastructure layout per brand brief). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
@@ -1,10 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
// TODO: Implement real-time chat feed from the game server
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import type { ChatMessage } from '@/types'
|
||||
import { MessageSquare, Search, Flag, RefreshCw } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
const messages = ref<ChatMessage[]>([])
|
||||
const isLoading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const channelFilter = ref<'all' | 'global' | 'team' | 'server'>('all')
|
||||
|
||||
const filteredMessages = computed(() => {
|
||||
let result = messages.value
|
||||
|
||||
if (channelFilter.value !== 'all') {
|
||||
result = result.filter(m => m.channel === channelFilter.value)
|
||||
}
|
||||
|
||||
if (searchQuery.value.trim()) {
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
result = result.filter(m =>
|
||||
m.player_name.toLowerCase().includes(q) ||
|
||||
m.message.toLowerCase().includes(q) ||
|
||||
m.steam_id.includes(q)
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
function channelBadgeClass(channel: string): string {
|
||||
switch (channel) {
|
||||
case 'global': return 'bg-oxide-500/15 text-oxide-400'
|
||||
case 'team': return 'bg-blue-500/15 text-blue-400'
|
||||
case 'server': return 'bg-neutral-700/50 text-neutral-400'
|
||||
default: return 'bg-neutral-700/50 text-neutral-400'
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(iso: string): string {
|
||||
return new Date(iso).toLocaleTimeString('en-US', { hour12: false })
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
|
||||
}
|
||||
|
||||
async function fetchMessages() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const data = await api.get<{ messages: ChatMessage[] }>('/chat')
|
||||
messages.value = data.messages
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleFlag(msg: ChatMessage) {
|
||||
try {
|
||||
await api.put(`/chat/${msg.id}/flag`, { flagged: !msg.flagged })
|
||||
msg.flagged = !msg.flagged
|
||||
} catch {
|
||||
// Handle error
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMessages()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold text-neutral-100 mb-4">Chat Log</h1>
|
||||
<p class="text-neutral-400">Real-time chat feed from your Rust server with search and filtering.</p>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<MessageSquare class="w-5 h-5 text-oxide-500" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Chat Log</h1>
|
||||
<p class="text-sm text-neutral-500 mt-0.5">{{ messages.length }} messages</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="fetchMessages"
|
||||
:disabled="isLoading"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 rounded-lg transition-colors"
|
||||
>
|
||||
<RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative flex-1 max-w-sm">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search messages, players, or Steam IDs..."
|
||||
class="w-full pl-10 pr-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"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<button
|
||||
v-for="opt in (['all', 'global', 'team', 'server'] as const)"
|
||||
:key="opt"
|
||||
@click="channelFilter = opt"
|
||||
class="px-3 py-2 text-sm font-medium transition-colors capitalize"
|
||||
:class="channelFilter === opt
|
||||
? 'bg-oxide-500/15 text-oxide-400'
|
||||
: 'text-neutral-400 hover:text-neutral-200'"
|
||||
>
|
||||
{{ opt }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg divide-y divide-neutral-800">
|
||||
<div v-if="filteredMessages.length === 0" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
<template v-if="isLoading">Loading chat messages...</template>
|
||||
<template v-else-if="searchQuery">No messages matching "{{ searchQuery }}"</template>
|
||||
<template v-else>No chat messages yet. Messages will appear when the server is active.</template>
|
||||
</div>
|
||||
<div
|
||||
v-for="msg in filteredMessages"
|
||||
:key="msg.id"
|
||||
class="flex items-start gap-4 px-4 py-3 hover:bg-neutral-800/50 transition-colors"
|
||||
:class="{ 'bg-red-500/5 border-l-2 border-l-red-500/30': msg.flagged }"
|
||||
>
|
||||
<div class="shrink-0 text-right w-20">
|
||||
<p class="text-xs text-neutral-500">{{ formatDate(msg.created_at) }}</p>
|
||||
<p class="text-xs text-neutral-600">{{ formatTime(msg.created_at) }}</p>
|
||||
</div>
|
||||
<span
|
||||
class="shrink-0 text-xs font-medium px-2 py-0.5 rounded-full mt-0.5"
|
||||
:class="channelBadgeClass(msg.channel)"
|
||||
>
|
||||
{{ msg.channel }}
|
||||
</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-sm font-medium text-oxide-400">{{ msg.player_name }}</span>
|
||||
<span class="text-sm text-neutral-500 ml-2 font-mono">{{ msg.steam_id }}</span>
|
||||
<p class="text-sm text-neutral-300 mt-0.5 break-words">{{ msg.message }}</p>
|
||||
</div>
|
||||
<button
|
||||
@click="toggleFlag(msg)"
|
||||
class="shrink-0 p-1 rounded transition-colors"
|
||||
:class="msg.flagged ? 'text-red-400 hover:text-red-300' : 'text-neutral-600 hover:text-neutral-400'"
|
||||
:title="msg.flagged ? 'Unflag message' : 'Flag message'"
|
||||
>
|
||||
<Flag class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,183 @@
|
||||
<script setup lang="ts">
|
||||
// TODO: Implement notification channel configuration for Discord and Pushbullet
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import type { NotificationConfig } from '@/types'
|
||||
import { Bell, Save, Loader2 } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
const config = ref<NotificationConfig>({
|
||||
discord_webhook_url: null,
|
||||
discord_enabled: false,
|
||||
pushbullet_api_key: null,
|
||||
pushbullet_enabled: false,
|
||||
email_alerts_enabled: false,
|
||||
notify_wipe_start: true,
|
||||
notify_wipe_complete: true,
|
||||
notify_wipe_failed: true,
|
||||
notify_server_crash: true,
|
||||
notify_server_offline: true,
|
||||
notify_store_purchase: false,
|
||||
})
|
||||
|
||||
const saving = ref(false)
|
||||
const isLoading = ref(false)
|
||||
|
||||
const eventToggles = [
|
||||
{ key: 'notify_wipe_start' as const, label: 'Wipe Started', desc: 'When a wipe begins' },
|
||||
{ key: 'notify_wipe_complete' as const, label: 'Wipe Complete', desc: 'When a wipe finishes successfully' },
|
||||
{ key: 'notify_wipe_failed' as const, label: 'Wipe Failed', desc: 'When a wipe fails or rolls back' },
|
||||
{ key: 'notify_server_crash' as const, label: 'Server Crash', desc: 'When the server process crashes' },
|
||||
{ key: 'notify_server_offline' as const, label: 'Server Offline', desc: 'When the server goes unreachable' },
|
||||
{ key: 'notify_store_purchase' as const, label: 'Store Purchase', desc: 'When a player buys from the store' },
|
||||
]
|
||||
|
||||
async function fetchConfig() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const data = await api.get<{ config: NotificationConfig }>('/notifications/config')
|
||||
config.value = data.config
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveConfig() {
|
||||
saving.value = true
|
||||
try {
|
||||
await api.put('/notifications/config', config.value)
|
||||
} catch {
|
||||
// Handle error
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchConfig()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold text-neutral-100 mb-4">Notifications</h1>
|
||||
<p class="text-neutral-400">Configure Discord webhooks, Pushbullet, and other notification channels.</p>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Bell class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Notifications</h1>
|
||||
</div>
|
||||
<button
|
||||
@click="saveConfig"
|
||||
: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" />
|
||||
{{ saving ? 'Saving...' : 'Save Changes' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Discord -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-sm font-medium text-neutral-200">Discord Webhook</h2>
|
||||
<p class="text-xs text-neutral-500 mt-0.5">Send notifications to a Discord channel</p>
|
||||
</div>
|
||||
<button
|
||||
@click="config.discord_enabled = !config.discord_enabled"
|
||||
class="w-9 h-5 rounded-full transition-colors"
|
||||
:class="config.discord_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
|
||||
:class="config.discord_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
v-model="config.discord_webhook_url"
|
||||
type="url"
|
||||
placeholder="https://discord.com/api/webhooks/..."
|
||||
:disabled="!config.discord_enabled"
|
||||
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 disabled:opacity-40"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Pushbullet -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-sm font-medium text-neutral-200">Pushbullet</h2>
|
||||
<p class="text-xs text-neutral-500 mt-0.5">Push notifications to your devices</p>
|
||||
</div>
|
||||
<button
|
||||
@click="config.pushbullet_enabled = !config.pushbullet_enabled"
|
||||
class="w-9 h-5 rounded-full transition-colors"
|
||||
:class="config.pushbullet_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
|
||||
:class="config.pushbullet_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
v-model="config.pushbullet_api_key"
|
||||
type="text"
|
||||
placeholder="Pushbullet API key"
|
||||
:disabled="!config.pushbullet_enabled"
|
||||
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 disabled:opacity-40"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-sm font-medium text-neutral-200">Email Alerts</h2>
|
||||
<p class="text-xs text-neutral-500 mt-0.5">Send critical alerts to your registered email</p>
|
||||
</div>
|
||||
<button
|
||||
@click="config.email_alerts_enabled = !config.email_alerts_enabled"
|
||||
class="w-9 h-5 rounded-full transition-colors"
|
||||
:class="config.email_alerts_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
|
||||
:class="config.email_alerts_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Toggles -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Event Triggers</h2>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="toggle in eventToggles"
|
||||
:key="toggle.key"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm text-neutral-200">{{ toggle.label }}</p>
|
||||
<p class="text-xs text-neutral-500">{{ toggle.desc }}</p>
|
||||
</div>
|
||||
<button
|
||||
@click="config[toggle.key] = !config[toggle.key]"
|
||||
class="w-9 h-5 rounded-full transition-colors"
|
||||
:class="config[toggle.key] ? 'bg-oxide-500' : 'bg-neutral-700'"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
|
||||
:class="config[toggle.key] ? 'translate-x-4.5' : 'translate-x-0.5'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,296 @@
|
||||
<script setup lang="ts">
|
||||
// TODO: Implement server configuration and start/stop/restart controls
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useServerStore } from '@/stores/server'
|
||||
import {
|
||||
Server,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
Play,
|
||||
Square,
|
||||
RotateCcw,
|
||||
Save,
|
||||
Loader2,
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const server = useServerStore()
|
||||
|
||||
const editMode = ref(false)
|
||||
const saving = ref(false)
|
||||
const actionLoading = ref<string | null>(null)
|
||||
|
||||
const form = ref({
|
||||
server_name: '',
|
||||
max_players: 0,
|
||||
world_size: 0,
|
||||
current_seed: 0,
|
||||
})
|
||||
|
||||
function loadFormFromConfig() {
|
||||
if (server.config) {
|
||||
form.value = {
|
||||
server_name: server.config.server_name || '',
|
||||
max_players: server.config.max_players ?? 100,
|
||||
world_size: server.config.world_size ?? 4000,
|
||||
current_seed: server.config.current_seed ?? 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function saveConfig() {
|
||||
saving.value = true
|
||||
try {
|
||||
await server.updateConfig(form.value)
|
||||
editMode.value = false
|
||||
} catch {
|
||||
// Handle error
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function serverAction(action: 'start' | 'stop' | 'restart') {
|
||||
actionLoading.value = action
|
||||
try {
|
||||
if (action === 'start') await server.startServer()
|
||||
else if (action === 'stop') await server.stopServer()
|
||||
else await server.restartServer()
|
||||
await server.fetchServer()
|
||||
} catch {
|
||||
// Handle error
|
||||
} finally {
|
||||
actionLoading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await server.fetchServer()
|
||||
loadFormFromConfig()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold text-neutral-100 mb-4">Server Management</h1>
|
||||
<p class="text-neutral-400">Configure server settings and control start, stop, and restart operations.</p>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<Server class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Server Management</h1>
|
||||
</div>
|
||||
|
||||
<!-- Connection Status Card -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Connection</h2>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Status</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<component
|
||||
:is="server.connection?.connection_status === 'connected' ? Wifi : WifiOff"
|
||||
class="w-4 h-4"
|
||||
:class="server.connection?.connection_status === 'connected' ? 'text-green-400' : 'text-red-400'"
|
||||
/>
|
||||
<span class="text-sm font-medium text-neutral-100 capitalize">
|
||||
{{ server.connection?.connection_status || 'Unknown' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Connection Type</p>
|
||||
<p class="text-sm font-medium text-neutral-100 uppercase">
|
||||
{{ server.connection?.connection_type || '\u2014' }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Server IP</p>
|
||||
<p class="text-sm font-mono text-neutral-300">
|
||||
{{ server.connection?.server_ip || '\u2014' }}:{{ server.connection?.server_port || '' }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Game Port</p>
|
||||
<p class="text-sm font-mono text-neutral-300">
|
||||
{{ server.connection?.game_port || '\u2014' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server Controls -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Controls</h2>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button
|
||||
@click="serverAction('start')"
|
||||
:disabled="server.connection?.connection_status === 'connected' || actionLoading !== null"
|
||||
class="flex items-center gap-2 px-4 py-2.5 bg-green-600/20 hover:bg-green-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-green-400 border border-green-600/30 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
<Loader2 v-if="actionLoading === 'start'" class="w-4 h-4 animate-spin" />
|
||||
<Play v-else class="w-4 h-4" />
|
||||
Start Server
|
||||
</button>
|
||||
<button
|
||||
@click="serverAction('stop')"
|
||||
:disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
|
||||
class="flex items-center gap-2 px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-red-400 border border-red-600/30 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
<Loader2 v-if="actionLoading === 'stop'" class="w-4 h-4 animate-spin" />
|
||||
<Square v-else class="w-4 h-4" />
|
||||
Stop Server
|
||||
</button>
|
||||
<button
|
||||
@click="serverAction('restart')"
|
||||
:disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
|
||||
class="flex items-center gap-2 px-4 py-2.5 bg-oxide-600/20 hover:bg-oxide-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-oxide-400 border border-oxide-600/30 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
<Loader2 v-if="actionLoading === 'restart'" class="w-4 h-4 animate-spin" />
|
||||
<RotateCcw v-else class="w-4 h-4" />
|
||||
Restart Server
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Configuration</h2>
|
||||
<button
|
||||
v-if="!editMode"
|
||||
@click="editMode = true; loadFormFromConfig()"
|
||||
class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Read mode -->
|
||||
<div v-if="!editMode" class="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Server Name</p>
|
||||
<p class="text-sm text-neutral-200">{{ server.config?.server_name || 'Not configured' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Max Players</p>
|
||||
<p class="text-sm text-neutral-200">{{ server.config?.max_players ?? '\u2014' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">World Size</p>
|
||||
<p class="text-sm text-neutral-200">{{ server.config?.world_size ?? '\u2014' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Current Seed</p>
|
||||
<p class="text-sm text-neutral-200">{{ server.config?.current_seed ?? '\u2014' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit mode -->
|
||||
<form v-else @submit.prevent="saveConfig" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs text-neutral-500 mb-1">Server Name</label>
|
||||
<input
|
||||
v-model="form.server_name"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Max Players</label>
|
||||
<input
|
||||
v-model.number="form.max_players"
|
||||
type="number"
|
||||
min="1"
|
||||
max="500"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">World Size</label>
|
||||
<input
|
||||
v-model.number="form.world_size"
|
||||
type="number"
|
||||
min="1000"
|
||||
max="8000"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Current Seed</label>
|
||||
<input
|
||||
v-model.number="form.current_seed"
|
||||
type="number"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
: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"
|
||||
>
|
||||
<Save class="w-4 h-4" />
|
||||
{{ saving ? 'Saving...' : 'Save Changes' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="editMode = false"
|
||||
class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Settings -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Automation</h2>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-neutral-200">Auto-Restart</p>
|
||||
<p class="text-xs text-neutral-500">Restart on crash detection</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-9 h-5 rounded-full transition-colors cursor-pointer"
|
||||
:class="server.config?.crash_recovery_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
|
||||
:class="server.config?.crash_recovery_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-neutral-200">Auto-Update on Force Wipe</p>
|
||||
<p class="text-xs text-neutral-500">Update when Facepunch pushes</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-9 h-5 rounded-full transition-colors cursor-pointer"
|
||||
:class="server.config?.auto_update_on_force_wipe ? 'bg-oxide-500' : 'bg-neutral-700'"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
|
||||
:class="server.config?.auto_update_on_force_wipe ? 'translate-x-4.5' : 'translate-x-0.5'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-neutral-200">Force Wipe Eligible</p>
|
||||
<p class="text-xs text-neutral-500">Server participates in force wipes</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-9 h-5 rounded-full transition-colors cursor-pointer"
|
||||
:class="server.config?.force_wipe_eligible ? 'bg-oxide-500' : 'bg-neutral-700'"
|
||||
>
|
||||
<div
|
||||
class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
|
||||
:class="server.config?.force_wipe_eligible ? 'translate-x-4.5' : 'translate-x-0.5'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,210 @@
|
||||
<script setup lang="ts">
|
||||
// TODO: Implement settings for license, subdomain, and account management
|
||||
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'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const api = useApi()
|
||||
|
||||
const saving = ref(false)
|
||||
const section = ref<'account' | 'license' | 'domain'>('account')
|
||||
|
||||
const accountForm = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
})
|
||||
|
||||
const domainForm = ref({
|
||||
subdomain: '',
|
||||
custom_domain: '',
|
||||
})
|
||||
|
||||
function loadForms() {
|
||||
if (auth.user) {
|
||||
accountForm.value.username = auth.user.username
|
||||
accountForm.value.email = auth.user.email
|
||||
}
|
||||
if (auth.license) {
|
||||
domainForm.value.subdomain = auth.license.subdomain || ''
|
||||
domainForm.value.custom_domain = auth.license.custom_domain || ''
|
||||
}
|
||||
}
|
||||
|
||||
async function saveAccount() {
|
||||
saving.value = true
|
||||
try {
|
||||
await api.put('/auth/profile', accountForm.value)
|
||||
} catch {
|
||||
// Handle error
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveDomain() {
|
||||
saving.value = true
|
||||
try {
|
||||
await api.put('/settings/domain', domainForm.value)
|
||||
} catch {
|
||||
// Handle error
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadForms()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold text-neutral-100 mb-4">Settings</h1>
|
||||
<p class="text-neutral-400">Manage your license, subdomain configuration, and account settings.</p>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<Settings class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Settings</h1>
|
||||
</div>
|
||||
|
||||
<!-- Section tabs -->
|
||||
<div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden w-fit">
|
||||
<button
|
||||
v-for="tab in ([
|
||||
{ key: 'account', label: 'Account', icon: User },
|
||||
{ key: 'license', label: 'License', icon: Key },
|
||||
{ key: 'domain', label: 'Domain', icon: Globe },
|
||||
] as const)"
|
||||
:key="tab.key"
|
||||
@click="section = tab.key"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors"
|
||||
:class="section === tab.key
|
||||
? 'bg-oxide-500/15 text-oxide-400'
|
||||
: 'text-neutral-400 hover:text-neutral-200'"
|
||||
>
|
||||
<component :is="tab.icon" class="w-4 h-4" />
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Account -->
|
||||
<div v-if="section === 'account'" 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">Account Details</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Username</label>
|
||||
<input
|
||||
v-model="accountForm.username"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Email</label>
|
||||
<input
|
||||
v-model="accountForm.email"
|
||||
type="email"
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<p class="text-xs text-neutral-500">
|
||||
2FA: <span :class="auth.user?.totp_enabled ? 'text-green-400' : 'text-yellow-400'">
|
||||
{{ auth.user?.totp_enabled ? 'Enabled' : 'Not configured' }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@click="saveAccount"
|
||||
: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>
|
||||
|
||||
<!-- License -->
|
||||
<div v-if="section === 'license'" 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">License Information</h2>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">License Key</p>
|
||||
<p class="text-sm font-mono text-neutral-300">{{ auth.license?.license_key || '\u2014' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Status</p>
|
||||
<span
|
||||
class="text-xs font-medium px-2 py-0.5 rounded-full"
|
||||
:class="{
|
||||
'bg-green-500/10 text-green-400': auth.license?.status === 'active',
|
||||
'bg-yellow-500/10 text-yellow-400': auth.license?.status === 'suspended',
|
||||
'bg-red-500/10 text-red-400': auth.license?.status === 'expired' || auth.license?.status === 'revoked',
|
||||
}"
|
||||
>
|
||||
{{ auth.license?.status || 'Unknown' }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Expires</p>
|
||||
<p class="text-sm text-neutral-300">
|
||||
{{ auth.license?.expires_at ? new Date(auth.license.expires_at).toLocaleDateString() : 'Never' }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Server Name</p>
|
||||
<p class="text-sm text-neutral-300">{{ auth.license?.server_name || 'Not set' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Webstore</p>
|
||||
<p class="text-sm text-neutral-300">{{ auth.license?.webstore_active ? 'Active' : 'Inactive' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500 mb-1">Modules</p>
|
||||
<p class="text-sm text-neutral-300">{{ auth.license?.modules_enabled?.length ?? 0 }} enabled</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Domain -->
|
||||
<div v-if="section === 'domain'" 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">Domain & Subdomain</h2>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Subdomain</label>
|
||||
<div class="flex items-center gap-0">
|
||||
<input
|
||||
v-model="domainForm.subdomain"
|
||||
type="text"
|
||||
placeholder="my-server"
|
||||
class="flex-1 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-l-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"
|
||||
/>
|
||||
<span class="px-3 py-2 bg-neutral-700 border border-l-0 border-neutral-700 rounded-r-lg text-sm text-neutral-400">
|
||||
.corrosionmgmt.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Custom Domain (optional)</label>
|
||||
<input
|
||||
v-model="domainForm.custom_domain"
|
||||
type="text"
|
||||
placeholder="panel.myserver.com"
|
||||
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"
|
||||
/>
|
||||
<p class="text-xs text-neutral-600 mt-1">Point a CNAME record to panel.corrosionmgmt.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="saveDomain"
|
||||
: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>
|
||||
|
||||
@@ -1,10 +1,202 @@
|
||||
<script setup lang="ts">
|
||||
// TODO: Implement team management with role-based access control
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import type { TeamMember, Role } from '@/types'
|
||||
import { UserPlus, Shield, Mail, Trash2, RefreshCw } from 'lucide-vue-next'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
const members = ref<TeamMember[]>([])
|
||||
const roles = ref<Role[]>([])
|
||||
const isLoading = ref(false)
|
||||
const showInvite = ref(false)
|
||||
const inviteEmail = ref('')
|
||||
const inviteRole = ref('')
|
||||
const inviting = ref(false)
|
||||
|
||||
function roleBadgeClass(roleName: string): string {
|
||||
switch (roleName.toLowerCase()) {
|
||||
case 'owner': return 'bg-oxide-500/15 text-oxide-400'
|
||||
case 'admin': return 'bg-purple-500/15 text-purple-400'
|
||||
case 'moderator': return 'bg-blue-500/15 text-blue-400'
|
||||
default: return 'bg-neutral-700/50 text-neutral-400'
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchTeam() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const data = await api.get<{ members: TeamMember[]; roles: Role[] }>('/team')
|
||||
members.value = data.members
|
||||
roles.value = data.roles
|
||||
} catch {
|
||||
// API not wired yet
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function sendInvite() {
|
||||
if (!inviteEmail.value.trim() || !inviteRole.value) return
|
||||
inviting.value = true
|
||||
try {
|
||||
await api.post('/team/invite', {
|
||||
email: inviteEmail.value.trim(),
|
||||
role_id: inviteRole.value,
|
||||
})
|
||||
inviteEmail.value = ''
|
||||
inviteRole.value = ''
|
||||
showInvite.value = false
|
||||
await fetchTeam()
|
||||
} catch {
|
||||
// Handle error
|
||||
} finally {
|
||||
inviting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function removeMember(member: TeamMember) {
|
||||
if (!confirm(`Remove ${member.username} from the team?`)) return
|
||||
try {
|
||||
await api.del(`/team/${member.id}`)
|
||||
await fetchTeam()
|
||||
} catch {
|
||||
// Handle error
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTeam()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold text-neutral-100 mb-4">Team Management</h1>
|
||||
<p class="text-neutral-400">Invite team members and manage role-based access to the panel.</p>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<UserPlus class="w-5 h-5 text-oxide-500" />
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Team Management</h1>
|
||||
<p class="text-sm text-neutral-500 mt-0.5">{{ members.length }} members</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="fetchTeam"
|
||||
:disabled="isLoading"
|
||||
class="flex items-center gap-2 px-3 py-2 text-sm text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
|
||||
>
|
||||
<RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
|
||||
</button>
|
||||
<button
|
||||
@click="showInvite = !showInvite"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<Mail class="w-4 h-4" />
|
||||
Invite Member
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invite form -->
|
||||
<div v-if="showInvite" class="bg-neutral-900 border border-oxide-500/20 rounded-lg p-5">
|
||||
<h3 class="text-sm font-medium text-neutral-200 mb-3">Invite a Team Member</h3>
|
||||
<form @submit.prevent="sendInvite" class="flex items-end gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs text-neutral-500 mb-1">Email Address</label>
|
||||
<input
|
||||
v-model="inviteEmail"
|
||||
type="email"
|
||||
required
|
||||
placeholder="team@example.com"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-48">
|
||||
<label class="block text-xs text-neutral-500 mb-1">Role</label>
|
||||
<select
|
||||
v-model="inviteRole"
|
||||
required
|
||||
class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
>
|
||||
<option value="" disabled>Select role...</option>
|
||||
<option v-for="role in roles" :key="role.id" :value="role.id">
|
||||
{{ role.role_name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="inviting"
|
||||
class="px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
{{ inviting ? 'Sending...' : 'Send Invite' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Team table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-neutral-800 text-left">
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Member</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Email</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Role</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-if="members.length === 0">
|
||||
<td colspan="5" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
<template v-if="isLoading">Loading team...</template>
|
||||
<template v-else>No team members yet. Invite someone to get started.</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="member in members"
|
||||
:key="member.id"
|
||||
class="hover:bg-neutral-800/50 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<Shield class="w-4 h-4 text-neutral-600" />
|
||||
<span class="text-sm font-medium text-neutral-100">{{ member.username }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ member.email }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="text-xs font-medium px-2 py-0.5 rounded-full"
|
||||
:class="roleBadgeClass(member.role_name)"
|
||||
>
|
||||
{{ member.role_name }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="text-xs font-medium px-2 py-0.5 rounded-full"
|
||||
:class="member.accepted_at
|
||||
? 'bg-green-500/10 text-green-400'
|
||||
: 'bg-yellow-500/10 text-yellow-400'"
|
||||
>
|
||||
{{ member.accepted_at ? 'Active' : 'Pending' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button
|
||||
@click="removeMember(member)"
|
||||
class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
|
||||
title="Remove member"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,237 @@
|
||||
<script setup lang="ts">
|
||||
// TODO: Implement multi-step setup wizard for initial server configuration
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Server, Wifi, CheckCircle, ArrowRight, Loader2 } from 'lucide-vue-next'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const api = useApi()
|
||||
|
||||
const step = ref(1)
|
||||
const isLoading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const serverForm = ref({
|
||||
server_name: '',
|
||||
connection_type: 'bare_metal' as 'amp' | 'pterodactyl' | 'bare_metal',
|
||||
server_ip: '',
|
||||
server_port: 28016,
|
||||
game_port: 28015,
|
||||
})
|
||||
|
||||
const connectionTypes = [
|
||||
{ value: 'bare_metal', label: 'Bare Metal / VPS', desc: 'Direct connection via Companion Agent' },
|
||||
{ value: 'amp', label: 'AMP (CubeCoders)', desc: 'Connect through AMP panel API' },
|
||||
{ value: 'pterodactyl', label: 'Pterodactyl', desc: 'Connect through Pterodactyl panel API' },
|
||||
]
|
||||
|
||||
async function submitServerConfig() {
|
||||
if (!serverForm.value.server_name.trim()) {
|
||||
error.value = 'Server name is required.'
|
||||
return
|
||||
}
|
||||
|
||||
error.value = ''
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
await api.post('/setup/server', serverForm.value)
|
||||
step.value = 2
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : 'Setup failed. Please try again.'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function completeSetup() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
await api.post('/setup/complete')
|
||||
router.push('/')
|
||||
} catch {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold text-neutral-100 mb-4">Setup Your Server</h1>
|
||||
<p class="text-neutral-400">Multi-step wizard to configure your Rust server for the first time.</p>
|
||||
<div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-lg">
|
||||
<!-- Progress -->
|
||||
<div class="flex items-center justify-center gap-3 mb-8">
|
||||
<div
|
||||
class="flex items-center gap-2 text-sm"
|
||||
:class="step >= 1 ? 'text-oxide-400' : 'text-neutral-600'"
|
||||
>
|
||||
<Server class="w-4 h-4" />
|
||||
Server
|
||||
</div>
|
||||
<div class="w-8 h-px" :class="step >= 2 ? 'bg-oxide-500' : 'bg-neutral-700'" />
|
||||
<div
|
||||
class="flex items-center gap-2 text-sm"
|
||||
:class="step >= 2 ? 'text-oxide-400' : 'text-neutral-600'"
|
||||
>
|
||||
<Wifi class="w-4 h-4" />
|
||||
Connect
|
||||
</div>
|
||||
<div class="w-8 h-px" :class="step >= 3 ? 'bg-oxide-500' : 'bg-neutral-700'" />
|
||||
<div
|
||||
class="flex items-center gap-2 text-sm"
|
||||
:class="step >= 3 ? 'text-oxide-400' : 'text-neutral-600'"
|
||||
>
|
||||
<CheckCircle class="w-4 h-4" />
|
||||
Done
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Server Config -->
|
||||
<div v-if="step === 1" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
|
||||
<div class="text-center mb-6">
|
||||
<img src="/logo.png" alt="Corrosion" class="h-12 w-12 mx-auto mb-3" />
|
||||
<h1 class="text-xl font-bold text-neutral-100">Configure Your Server</h1>
|
||||
<p class="text-sm text-neutral-500 mt-1">Let's get your Rust server connected to Corrosion.</p>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submitServerConfig" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Server Name</label>
|
||||
<input
|
||||
v-model="serverForm.server_name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="My Rust Server"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-2">Connection Type</label>
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
v-for="ct in connectionTypes"
|
||||
:key="ct.value"
|
||||
class="flex items-start gap-3 p-3 bg-neutral-800 border rounded-lg cursor-pointer transition-colors"
|
||||
:class="serverForm.connection_type === ct.value
|
||||
? 'border-oxide-500/50 bg-oxide-500/5'
|
||||
: 'border-neutral-700 hover:border-neutral-600'"
|
||||
>
|
||||
<input
|
||||
v-model="serverForm.connection_type"
|
||||
:value="ct.value"
|
||||
type="radio"
|
||||
name="connection_type"
|
||||
class="mt-0.5 accent-oxide-500"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-200">{{ ct.label }}</p>
|
||||
<p class="text-xs text-neutral-500">{{ ct.desc }}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="col-span-1">
|
||||
<label class="block text-xs text-neutral-500 mb-1">Server IP</label>
|
||||
<input
|
||||
v-model="serverForm.server_ip"
|
||||
type="text"
|
||||
placeholder="0.0.0.0"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">RCON Port</label>
|
||||
<input
|
||||
v-model.number="serverForm.server_port"
|
||||
type="number"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Game Port</label>
|
||||
<input
|
||||
v-model.number="serverForm.game_port"
|
||||
type="number"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
class="w-full flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<Loader2 v-if="isLoading" class="w-4 h-4 animate-spin" />
|
||||
<template v-else>
|
||||
Continue
|
||||
<ArrowRight class="w-4 h-4" />
|
||||
</template>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Connection Instructions -->
|
||||
<div v-if="step === 2" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
|
||||
<div class="text-center mb-6">
|
||||
<Wifi class="w-10 h-10 text-oxide-500 mx-auto mb-3" />
|
||||
<h1 class="text-xl font-bold text-neutral-100">Install the Companion Agent</h1>
|
||||
<p class="text-sm text-neutral-500 mt-1">
|
||||
The Companion Agent runs on your server and connects to Corrosion securely — no inbound ports required.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 mb-6">
|
||||
<p class="text-neutral-500 mb-2"># Download and install the Companion Agent</p>
|
||||
<p class="text-oxide-400">curl -sSL https://get.corrosionmgmt.com | sh</p>
|
||||
<p class="text-neutral-500 mt-3 mb-2"># Start the agent with your license key</p>
|
||||
<p class="text-oxide-400">corrosion-agent start --key {{ auth.license?.license_key || 'YOUR-LICENSE-KEY' }}</p>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-neutral-500 text-center mb-6">
|
||||
The agent will automatically register with your panel. You can also use the uMod plugin for lightweight integration.
|
||||
</p>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
@click="step = 3"
|
||||
class="flex-1 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-medium rounded-lg text-sm transition-colors text-center"
|
||||
>
|
||||
Skip for Now
|
||||
</button>
|
||||
<button
|
||||
@click="step = 3"
|
||||
class="flex-1 flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 text-white font-medium rounded-lg text-sm transition-colors"
|
||||
>
|
||||
I've Installed It
|
||||
<ArrowRight class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Complete -->
|
||||
<div v-if="step === 3" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 text-center">
|
||||
<CheckCircle class="w-12 h-12 text-green-400 mx-auto mb-4" />
|
||||
<h1 class="text-xl font-bold text-neutral-100 mb-2">You're All Set</h1>
|
||||
<p class="text-sm text-neutral-500 mb-6">
|
||||
Your server is configured. Head to the dashboard to start managing your Rust server.
|
||||
</p>
|
||||
<button
|
||||
@click="completeSetup"
|
||||
:disabled="isLoading"
|
||||
class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Go to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user