vantzs/corrosion-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feat: Implement 6 views + updated hero — Server, Chat, Team, Notifications, Settings, Setup Wizard

Browse Source 
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
2026-02-14 23:12:24 -05:00
parent b767cce6ec
commit c45567670e
7 changed files with 1254 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
frontend/src/views/admin/SettingsView.vue
View File

@@ -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>