feat(redesign): re-skin auth + account views to DS (Phase D batch 1)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Auth (Login/Register/ForgotPassword/SetupWizard) + account cluster (Settings/Team/Notifications) re-skinned onto design-system components + tokens. JPEG login banner replaced with the C-gauge mark + Oxanium wordmark. All logic/store/router/handlers preserved (TOTP flow, validators, save handlers, API endpoints). Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
@@ -1,9 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import type { NotificationConfig } from '@/types'
|
||||
import { Bell, Save, Loader2 } from 'lucide-vue-next'
|
||||
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Switch from '@/components/ds/forms/Switch.vue'
|
||||
|
||||
const api = useApi()
|
||||
const toast = useToastStore()
|
||||
@@ -26,12 +30,12 @@ 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' },
|
||||
{ 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() {
|
||||
@@ -58,129 +62,114 @@ async function saveConfig() {
|
||||
}
|
||||
}
|
||||
|
||||
// Coerce nullable string fields to string for DS Input (which expects string, not string|null)
|
||||
const discordWebhookUrl = computed<string>({
|
||||
get: () => config.value.discord_webhook_url ?? '',
|
||||
set: (v) => { config.value.discord_webhook_url = v || null },
|
||||
})
|
||||
const pushbulletApiKey = computed<string>({
|
||||
get: () => config.value.pushbullet_api_key ?? '',
|
||||
set: (v) => { config.value.pushbullet_api_key = v || null },
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchConfig()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 class="notifs">
|
||||
<!-- Page head -->
|
||||
<div class="page__head">
|
||||
<div>
|
||||
<div class="t-eyebrow">Monitoring</div>
|
||||
<h1 class="page__title">Notifications</h1>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
size="sm"
|
||||
icon="save"
|
||||
:loading="saving"
|
||||
@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>
|
||||
{{ 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"
|
||||
<!-- Discord webhook -->
|
||||
<Panel title="Discord webhook" subtitle="Send notifications to a Discord channel" eyebrow="Channel">
|
||||
<template #actions>
|
||||
<Switch v-model="config.discord_enabled" />
|
||||
</template>
|
||||
<Input
|
||||
v-model="discordWebhookUrl"
|
||||
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"
|
||||
:mono="true"
|
||||
/>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- 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"
|
||||
<Panel title="Pushbullet" subtitle="Push notifications to your devices" eyebrow="Channel">
|
||||
<template #actions>
|
||||
<Switch v-model="config.pushbullet_enabled" />
|
||||
</template>
|
||||
<Input
|
||||
v-model="pushbulletApiKey"
|
||||
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"
|
||||
:mono="true"
|
||||
/>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Email alerts -->
|
||||
<Panel title="Email alerts" subtitle="Send critical alerts to your registered email" eyebrow="Channel">
|
||||
<template #actions>
|
||||
<Switch v-model="config.email_alerts_enabled" />
|
||||
</template>
|
||||
<!-- No additional fields for email — toggle only -->
|
||||
</Panel>
|
||||
|
||||
<!-- 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">
|
||||
<!-- Event triggers -->
|
||||
<Panel title="Event triggers" subtitle="Choose which events fire notifications" eyebrow="Routing">
|
||||
<div class="triggers">
|
||||
<div
|
||||
v-for="toggle in eventToggles"
|
||||
:key="toggle.key"
|
||||
class="flex items-center justify-between"
|
||||
class="trigger-row"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm text-neutral-200">{{ toggle.label }}</p>
|
||||
<p class="text-xs text-neutral-500">{{ toggle.desc }}</p>
|
||||
<div class="trigger-text">
|
||||
<span class="trigger-label">{{ toggle.label }}</span>
|
||||
<span class="trigger-desc">{{ toggle.desc }}</span>
|
||||
</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>
|
||||
<Switch v-model="config[toggle.key]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notifs { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
|
||||
|
||||
.page__head {
|
||||
display: flex; align-items: flex-end; justify-content: space-between;
|
||||
gap: 16px; flex-wrap: wrap;
|
||||
}
|
||||
.page__title {
|
||||
font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
|
||||
color: var(--text-primary); margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Event triggers */
|
||||
.triggers { display: flex; flex-direction: column; gap: 2px; }
|
||||
.trigger-row {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||||
padding: 11px 4px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.trigger-row:last-child { border-bottom: 0; }
|
||||
.trigger-text { display: flex; flex-direction: column; gap: 2px; }
|
||||
.trigger-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
|
||||
.trigger-desc { font-size: var(--text-xs); color: var(--text-tertiary); }
|
||||
</style>
|
||||
|
||||
@@ -3,14 +3,20 @@ import { ref, onMounted } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Settings, Key, Globe, User, Save, Loader2, Eye } from 'lucide-vue-next'
|
||||
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Badge from '@/components/ds/core/Badge.vue'
|
||||
import Tabs from '@/components/ds/navigation/Tabs.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Switch from '@/components/ds/forms/Switch.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const toast = useToastStore()
|
||||
const api = useApi()
|
||||
|
||||
const saving = ref(false)
|
||||
const section = ref<'account' | 'license' | 'domain' | 'public'>('account')
|
||||
const section = ref<string>('account')
|
||||
|
||||
const accountForm = ref({
|
||||
username: '',
|
||||
@@ -86,209 +92,225 @@ async function savePublicSite() {
|
||||
onMounted(() => {
|
||||
loadForms()
|
||||
})
|
||||
|
||||
const tabItems = [
|
||||
{ value: 'account', label: 'Account', icon: 'user' },
|
||||
{ value: 'license', label: 'License', icon: 'key' },
|
||||
{ value: 'domain', label: 'Domain', icon: 'globe' },
|
||||
{ value: 'public', label: 'Public status', icon: 'eye' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 class="settings">
|
||||
<!-- Page head -->
|
||||
<div class="page__head">
|
||||
<div>
|
||||
<div class="t-eyebrow">Management</div>
|
||||
<h1 class="page__title">Settings</h1>
|
||||
</div>
|
||||
</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 },
|
||||
{ key: 'public', label: 'Public Status', icon: Eye },
|
||||
] 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>
|
||||
<Tabs v-model="section" :items="tabItems" />
|
||||
|
||||
<!-- 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>
|
||||
<Panel v-if="section === 'account'" title="Account details" eyebrow="Identity">
|
||||
<template #actions>
|
||||
<Button size="sm" :loading="saving" icon="save" @click="saveAccount">Save</Button>
|
||||
</template>
|
||||
<div class="form-grid">
|
||||
<Input
|
||||
v-model="accountForm.username"
|
||||
label="Username"
|
||||
placeholder="your-handle"
|
||||
:required="true"
|
||||
/>
|
||||
<Input
|
||||
v-model="accountForm.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
:required="true"
|
||||
/>
|
||||
</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 class="totp-row">
|
||||
<span class="field-label">2FA status</span>
|
||||
<Badge
|
||||
:tone="auth.user?.totp_enabled ? 'online' : 'warn'"
|
||||
:dot="true"
|
||||
>
|
||||
{{ auth.user?.totp_enabled ? 'Enabled' : 'Not configured' }}
|
||||
</Badge>
|
||||
</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>
|
||||
</Panel>
|
||||
|
||||
<!-- 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>
|
||||
<Panel v-if="section === 'license'" title="License information" eyebrow="Subscription">
|
||||
<div class="lic-grid">
|
||||
<div class="lic-field">
|
||||
<span class="field-label">License key</span>
|
||||
<span class="field-mono">{{ auth.license?.license_key ?? '—' }}</span>
|
||||
</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',
|
||||
}"
|
||||
<div class="lic-field">
|
||||
<span class="field-label">Status</span>
|
||||
<Badge
|
||||
:tone="auth.license?.status === 'active' ? 'online' : auth.license?.status === 'suspended' ? 'warn' : 'offline'"
|
||||
>
|
||||
{{ auth.license?.status || 'Unknown' }}
|
||||
{{ auth.license?.status ?? 'Unknown' }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="lic-field">
|
||||
<span class="field-label">Expires</span>
|
||||
<span class="field-value">
|
||||
{{ auth.license?.expires_at ? new Date(auth.license.expires_at).toLocaleDateString() : 'Never' }}
|
||||
</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 class="lic-field">
|
||||
<span class="field-label">Server name</span>
|
||||
<span class="field-value">{{ auth.license?.server_name ?? 'Not set' }}</span>
|
||||
</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 class="lic-field">
|
||||
<span class="field-label">Webstore</span>
|
||||
<Badge :tone="auth.license?.webstore_active ? 'online' : 'neutral'">
|
||||
{{ auth.license?.webstore_active ? 'Active' : 'Inactive' }}
|
||||
</Badge>
|
||||
</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 class="lic-field">
|
||||
<span class="field-label">Modules</span>
|
||||
<span class="field-mono">{{ auth.license?.modules_enabled?.length ?? 0 }} enabled</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- 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
|
||||
<Panel v-if="section === 'domain'" title="Domain & subdomain" eyebrow="Routing">
|
||||
<template #actions>
|
||||
<Button size="sm" :loading="saving" icon="save" @click="saveDomain">Save</Button>
|
||||
</template>
|
||||
<div class="domain-stack">
|
||||
<div class="cc-field">
|
||||
<span class="cc-field__label">Subdomain</span>
|
||||
<div class="subdomain-row">
|
||||
<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"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<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>
|
||||
<span class="subdomain-suffix">.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>
|
||||
<Input
|
||||
v-model="domainForm.custom_domain"
|
||||
label="Custom domain"
|
||||
placeholder="panel.myserver.com"
|
||||
hint="Point a CNAME record to panel.corrosionmgmt.com"
|
||||
/>
|
||||
</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>
|
||||
</Panel>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Public status page -->
|
||||
<Panel v-if="section === 'public'" title="Public status page" eyebrow="Visibility">
|
||||
<template #actions>
|
||||
<Button size="sm" :loading="saving" icon="save" @click="savePublicSite">Save</Button>
|
||||
</template>
|
||||
<div class="public-stack">
|
||||
<p class="section-note">
|
||||
Showcase your server on the public Corrosion status page at
|
||||
<a href="https://status.corrosionmgmt.com" target="_blank" class="link">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 class="toggle-row">
|
||||
<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>
|
||||
<p class="toggle-label">Show on status page</p>
|
||||
<p class="toggle-desc">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>
|
||||
<Switch v-model="publicSiteForm.show_on_status_page" />
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Description (optional)</label>
|
||||
<div class="cc-field">
|
||||
<span class="cc-field__label">Description <span class="optional">(optional)</span></span>
|
||||
<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>
|
||||
class="cc-textarea"
|
||||
/>
|
||||
<span class="cc-field__hint">Brief description shown on the status page</span>
|
||||
</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>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
||||
.page__title { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin-top: 5px; }
|
||||
|
||||
/* Account tab */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.totp-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
|
||||
|
||||
/* License tab */
|
||||
.lic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
|
||||
.lic-field { display: flex; flex-direction: column; gap: 5px; }
|
||||
|
||||
/* Domain tab */
|
||||
.domain-stack { display: flex; flex-direction: column; gap: 14px; }
|
||||
.subdomain-row { display: flex; align-items: center; gap: 0; }
|
||||
.subdomain-suffix {
|
||||
display: flex; align-items: center;
|
||||
height: var(--control-h-md); padding: 0 11px;
|
||||
background: var(--surface-raised-2); color: var(--text-muted);
|
||||
font-family: var(--font-mono); font-size: var(--text-xs);
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
box-shadow: var(--ring-default);
|
||||
white-space: nowrap; flex: none;
|
||||
}
|
||||
/* Remove the right-radius from the preceding Input's inner element */
|
||||
.subdomain-row :deep(.cc-input) { border-radius: var(--radius-md) 0 0 var(--radius-md); }
|
||||
|
||||
/* Public status tab */
|
||||
.public-stack { display: flex; flex-direction: column; gap: 16px; }
|
||||
.section-note { font-size: var(--text-sm); color: var(--text-tertiary); margin: 0; }
|
||||
.link { color: var(--accent-text); text-decoration: none; }
|
||||
.link:hover { text-decoration: underline; }
|
||||
.toggle-row {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||||
padding: 13px 14px;
|
||||
background: var(--surface-raised-2); border-radius: var(--radius-md); box-shadow: var(--ring-default);
|
||||
}
|
||||
.toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); margin: 0; }
|
||||
.toggle-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin: 3px 0 0; }
|
||||
|
||||
/* Shared field helpers */
|
||||
.field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
|
||||
.field-mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); font-variant-numeric: tabular-nums; }
|
||||
.field-value { font-size: var(--text-sm); color: var(--text-primary); }
|
||||
.optional { font-weight: 400; color: var(--text-muted); }
|
||||
|
||||
/* Textarea (no DS component for textarea — minimal consistent styling) */
|
||||
.cc-textarea {
|
||||
width: 100%; padding: 9px 11px; resize: vertical;
|
||||
background: var(--surface-inset); color: var(--text-primary);
|
||||
border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
|
||||
font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5;
|
||||
outline: 0; transition: var(--transition-colors);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cc-textarea::placeholder { color: var(--text-muted); }
|
||||
.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.lic-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import type { TeamMember, Role } from '@/types'
|
||||
import { UserPlus, Shield, Mail, Trash2, RefreshCw } from 'lucide-vue-next'
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Badge from '@/components/ds/core/Badge.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Select from '@/components/ds/forms/Select.vue'
|
||||
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
|
||||
const api = useApi()
|
||||
const toast = useToastStore()
|
||||
@@ -16,12 +21,11 @@ const inviteEmail = ref('')
|
||||
const inviteRole = ref('')
|
||||
const inviting = ref(false)
|
||||
|
||||
function roleBadgeClass(roleName: string): string {
|
||||
function roleTone(roleName: string): 'accent' | 'info' | 'neutral' {
|
||||
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'
|
||||
case 'owner': return 'accent'
|
||||
case 'admin': return 'info'
|
||||
default: return 'neutral'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,135 +76,173 @@ async function removeMember(member: TeamMember) {
|
||||
onMounted(() => {
|
||||
fetchTeam()
|
||||
})
|
||||
|
||||
const roleOptions = computed(() =>
|
||||
roles.value.map((r) => ({ value: r.id, label: r.role_name }))
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 class="team">
|
||||
<!-- Page head -->
|
||||
<div class="page__head">
|
||||
<div>
|
||||
<div class="t-eyebrow">Management</div>
|
||||
<h1 class="page__title">Team</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
<div class="page__actions">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
icon="refresh-cw"
|
||||
:loading="isLoading"
|
||||
@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
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
icon="mail"
|
||||
@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>
|
||||
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"
|
||||
<!-- Invite panel -->
|
||||
<Panel v-if="showInvite" title="Invite a team member" eyebrow="New invite">
|
||||
<form @submit.prevent="sendInvite" class="invite-form">
|
||||
<Input
|
||||
v-model="inviteEmail"
|
||||
label="Email address"
|
||||
type="email"
|
||||
placeholder="team@example.com"
|
||||
:required="true"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<div class="invite-role">
|
||||
<span class="cc-field__label">Role</span>
|
||||
<Select
|
||||
v-model="inviteRole"
|
||||
:options="[{ value: '', label: 'Select role...' }, ...roleOptions]"
|
||||
/>
|
||||
</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 class="invite-action">
|
||||
<!-- spacer to align with inputs -->
|
||||
<span class="cc-field__label"> </span>
|
||||
<Button type="submit" size="md" :loading="inviting">
|
||||
{{ inviting ? 'Sending...' : 'Send invite' }}
|
||||
</Button>
|
||||
</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>
|
||||
</Panel>
|
||||
|
||||
<!-- Team table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<table class="w-full">
|
||||
<Panel :flush-body="true" title="Members" :subtitle="members.length + ' total'">
|
||||
<!-- Empty state -->
|
||||
<EmptyState
|
||||
v-if="!isLoading && members.length === 0"
|
||||
icon="users"
|
||||
title="No team members"
|
||||
description="Invite someone to get started."
|
||||
>
|
||||
<template #action>
|
||||
<Button size="sm" icon="mail" @click="showInvite = true">Invite member</Button>
|
||||
</template>
|
||||
</EmptyState>
|
||||
|
||||
<!-- Loading skeleton -->
|
||||
<div v-else-if="isLoading" class="table-loading">
|
||||
<div v-for="i in 3" :key="i" class="skeleton-row" />
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table v-else class="cc-table">
|
||||
<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>
|
||||
<th>Member</th>
|
||||
<th>Email</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th class="col-actions">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>
|
||||
<tbody>
|
||||
<tr v-for="member in members" :key="member.id">
|
||||
<td>
|
||||
<div class="member-id">
|
||||
<span class="member-avatar">{{ (member.username ?? '?')[0]?.toUpperCase() ?? '?' }}</span>
|
||||
<span class="member-name">{{ 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 class="cell-mono">{{ member.email }}</td>
|
||||
<td>
|
||||
<Badge :tone="roleTone(member.role_name)">{{ member.role_name }}</Badge>
|
||||
</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'"
|
||||
>
|
||||
<td>
|
||||
<Badge :tone="member.accepted_at ? 'online' : 'warn'" :dot="true">
|
||||
{{ member.accepted_at ? 'Active' : 'Pending' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</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"
|
||||
<td class="col-actions">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
icon="trash-2"
|
||||
title="Remove member"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
@click="removeMember(member)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.team { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
|
||||
|
||||
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; row-gap: 10px; }
|
||||
.page__title { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin-top: 5px; }
|
||||
.page__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
|
||||
|
||||
/* Invite form */
|
||||
.invite-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
|
||||
.invite-role { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
|
||||
.invite-action { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
/* Table */
|
||||
.cc-table { width: 100%; border-collapse: collapse; }
|
||||
.cc-table th {
|
||||
padding: 10px 16px;
|
||||
text-align: left;
|
||||
font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
|
||||
text-transform: uppercase; letter-spacing: var(--tracking-wider);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.cc-table td {
|
||||
padding: 11px 16px;
|
||||
font-size: var(--text-sm); color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.cc-table tbody tr:last-child td { border-bottom: 0; }
|
||||
.cc-table tbody tr:hover td { background: var(--surface-hover); }
|
||||
.col-actions { text-align: right; width: 56px; }
|
||||
|
||||
.member-id { display: flex; align-items: center; gap: 10px; }
|
||||
.member-avatar {
|
||||
width: 28px; height: 28px; border-radius: var(--radius-sm);
|
||||
display: flex; align-items: center; justify-content: center; flex: none;
|
||||
background: var(--accent-soft); color: var(--accent-text);
|
||||
font-size: var(--text-xs); font-weight: 700;
|
||||
}
|
||||
.member-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
|
||||
.cell-mono { font-family: var(--font-mono); font-size: var(--text-xs) !important; color: var(--text-tertiary) !important; }
|
||||
|
||||
/* Loading skeleton */
|
||||
.table-loading { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.skeleton-row { height: 40px; border-radius: var(--radius-md); background: var(--surface-raised-2); animation: cc-skeleton 1.4s ease-in-out infinite; }
|
||||
@keyframes cc-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,10 @@
|
||||
import { ref } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Mail, ArrowLeft, CheckCircle2, Loader2 } from 'lucide-vue-next'
|
||||
import Logo from '@/components/ds/brand/Logo.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
|
||||
const api = useApi()
|
||||
const email = ref('')
|
||||
@@ -27,76 +30,149 @@ async function handleSubmit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-neutral-950 flex items-center justify-center p-6">
|
||||
<div class="w-full max-w-md">
|
||||
<!-- Logo -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="flex items-center justify-center gap-2 mb-2">
|
||||
<img src="/logo.png" alt="Corrosion" class="h-10 w-10" />
|
||||
<h1 class="text-2xl font-bold text-oxide-500 tracking-wider">CORROSION</h1>
|
||||
<div class="auth-shell">
|
||||
<div class="auth-card">
|
||||
<!-- Branding -->
|
||||
<div class="auth-brand">
|
||||
<div class="auth-brand__mark">
|
||||
<Logo :size="36" tagline="Game Server Operations" />
|
||||
</div>
|
||||
<p class="text-neutral-500 text-sm">Server Management Platform</p>
|
||||
</div>
|
||||
|
||||
<!-- Card -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
|
||||
<div v-if="success" class="text-center space-y-4">
|
||||
<CheckCircle2 class="w-12 h-12 text-green-500 mx-auto" />
|
||||
<h2 class="text-xl font-bold text-neutral-100">Check your email</h2>
|
||||
<p class="text-sm text-neutral-400">
|
||||
We've sent password reset instructions to <strong class="text-neutral-200">{{ email }}</strong>
|
||||
</p>
|
||||
<RouterLink
|
||||
to="/login"
|
||||
class="inline-flex items-center gap-2 text-sm text-oxide-400 hover:text-oxide-300 transition-colors"
|
||||
>
|
||||
<ArrowLeft class="w-4 h-4" />
|
||||
Back to login
|
||||
</RouterLink>
|
||||
<!-- Success state -->
|
||||
<div v-if="success" class="auth-success">
|
||||
<Alert tone="online" title="Check your email">
|
||||
Reset instructions sent to <strong class="auth-success__addr">{{ email }}</strong>
|
||||
</Alert>
|
||||
<RouterLink to="/login" class="auth-back-link">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M19 12H5M12 5l-7 7 7 7" />
|
||||
</svg>
|
||||
Back to sign in
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<template v-else>
|
||||
<div class="auth-form-header">
|
||||
<h1 class="auth-form-header__title">Forgot password?</h1>
|
||||
<p class="auth-form-header__sub">Enter your email to receive reset instructions.</p>
|
||||
</div>
|
||||
|
||||
<form v-else @submit.prevent="handleSubmit" class="space-y-6">
|
||||
<div class="text-center mb-6">
|
||||
<h2 class="text-xl font-bold text-neutral-100 mb-2">Forgot password?</h2>
|
||||
<p class="text-sm text-neutral-400">Enter your email to receive reset instructions</p>
|
||||
</div>
|
||||
<Alert v-if="errorMessage" tone="danger">{{ errorMessage }}</Alert>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-neutral-400 mb-2">Email</label>
|
||||
<div class="relative">
|
||||
<Mail class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-500" />
|
||||
<input
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
class="w-full pl-10 pr-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500"
|
||||
placeholder="admin@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<form class="auth-form" @submit.prevent="handleSubmit">
|
||||
<Input
|
||||
v-model="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="admin@example.com"
|
||||
icon="mail"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<div v-if="errorMessage" class="p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
|
||||
<p class="text-sm text-red-400">{{ errorMessage }}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
class="w-full flex items-center justify-center gap-2 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
|
||||
:loading="isLoading"
|
||||
:block="true"
|
||||
size="md"
|
||||
>
|
||||
<Loader2 v-if="isLoading" class="w-5 h-5 animate-spin" />
|
||||
<span>{{ isLoading ? 'Sending...' : 'Send Reset Link' }}</span>
|
||||
</button>
|
||||
|
||||
<RouterLink
|
||||
to="/login"
|
||||
class="flex items-center justify-center gap-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
|
||||
>
|
||||
<ArrowLeft class="w-4 h-4" />
|
||||
Back to login
|
||||
</RouterLink>
|
||||
Send reset link
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<RouterLink to="/login" class="auth-back-link">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M19 12H5M12 5l-7 7 7 7" />
|
||||
</svg>
|
||||
Back to sign in
|
||||
</RouterLink>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-shell {
|
||||
min-height: 100vh;
|
||||
background: var(--surface-canvas);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: var(--surface-base);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--ring-default), var(--shadow-lg);
|
||||
padding: var(--space-8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.auth-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.auth-brand__mark {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Success state */
|
||||
.auth-success {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
}
|
||||
.auth-success__addr {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Form header */
|
||||
.auth-form-header {
|
||||
text-align: center;
|
||||
}
|
||||
.auth-form-header__title {
|
||||
margin: 0 0 var(--space-1-5);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.auth-form-header__sub {
|
||||
margin: 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Back link */
|
||||
.auth-back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1-5);
|
||||
align-self: center;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 120ms ease;
|
||||
}
|
||||
.auth-back-link:hover { color: var(--text-secondary); }
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,10 @@ import { useRouter } from 'vue-router'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import type { AuthResponse } from '@/types'
|
||||
import Logo from '@/components/ds/brand/Logo.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const api = useApi()
|
||||
@@ -96,158 +100,221 @@ function handleBackToLogin() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
|
||||
<!-- Branding -->
|
||||
<div class="text-center mb-8">
|
||||
<img src="/logo-hero.png" alt="Corrosion Management" class="h-32 mx-auto mb-2" />
|
||||
<div class="auth-shell">
|
||||
<div class="auth-card">
|
||||
<!-- Branding -->
|
||||
<div class="auth-brand">
|
||||
<div class="auth-brand__mark">
|
||||
<Logo :size="40" :glow="true" tagline="Game Server Operations" />
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"
|
||||
>
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Login form -->
|
||||
<form v-if="!showTotpInput" @submit.prevent="handleLogin" class="space-y-5">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-neutral-400 mb-1.5">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
placeholder="admin@example.com"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg 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>
|
||||
<label for="password" class="block text-sm font-medium text-neutral-400 mb-1.5">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="Enter your password"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
v-if="loading"
|
||||
class="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
{{ loading ? 'Signing in...' : 'Sign In' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- TOTP verification form -->
|
||||
<div v-else class="space-y-5">
|
||||
<div class="text-center">
|
||||
<p class="text-sm text-neutral-400">
|
||||
Enter the 6-digit code from your authenticator app.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="totp" class="block text-sm font-medium text-neutral-400 mb-1.5">
|
||||
Authentication Code
|
||||
</label>
|
||||
<input
|
||||
id="totp"
|
||||
ref="totpInputEl"
|
||||
v-model="totpCode"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
autocomplete="one-time-code"
|
||||
placeholder="000000"
|
||||
maxlength="6"
|
||||
@keydown.enter="handleTotpVerify"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors text-center tracking-widest text-lg font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:disabled="totpCode.length !== 6 || loading"
|
||||
@click="handleTotpVerify"
|
||||
class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
v-if="loading"
|
||||
class="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
{{ loading ? 'Verifying...' : 'Verify Code' }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
@click="handleBackToLogin"
|
||||
class="w-full py-2 text-sm text-neutral-500 hover:text-neutral-300 transition-colors"
|
||||
>
|
||||
Back to sign in
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Register link -->
|
||||
<p v-if="!showTotpInput" class="mt-6 text-center text-sm text-neutral-500">
|
||||
Don't have an account?
|
||||
<router-link to="/register" class="text-oxide-400 hover:text-oxide-300 transition-colors">
|
||||
Create one
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<Alert v-if="error" tone="danger" class="auth-alert">{{ error }}</Alert>
|
||||
|
||||
<!-- Login form -->
|
||||
<form v-if="!showTotpInput" class="auth-form" @submit.prevent="handleLogin">
|
||||
<Input
|
||||
v-model="email"
|
||||
id="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="admin@example.com"
|
||||
autocomplete="email"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="password"
|
||||
id="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
autocomplete="current-password"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
:loading="loading"
|
||||
:block="true"
|
||||
size="md"
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<!-- TOTP verification -->
|
||||
<div v-else class="auth-form">
|
||||
<div class="auth-totp-hint">
|
||||
<p class="auth-totp-hint__text">Enter the 6-digit code from your authenticator app.</p>
|
||||
</div>
|
||||
|
||||
<div class="auth-totp-field">
|
||||
<label class="auth-totp-field__label" for="totp">Authentication code</label>
|
||||
<input
|
||||
id="totp"
|
||||
ref="totpInputEl"
|
||||
v-model="totpCode"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
autocomplete="one-time-code"
|
||||
placeholder="000000"
|
||||
maxlength="6"
|
||||
class="auth-totp-input"
|
||||
@keydown.enter="handleTotpVerify"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
:loading="loading"
|
||||
:disabled="totpCode.length !== 6"
|
||||
:block="true"
|
||||
size="md"
|
||||
@click="handleTotpVerify"
|
||||
>
|
||||
Verify code
|
||||
</Button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
class="auth-back-link"
|
||||
@click="handleBackToLogin"
|
||||
>
|
||||
Back to sign in
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Register link -->
|
||||
<p v-if="!showTotpInput" class="auth-footer">
|
||||
No account?
|
||||
<router-link to="/register" class="auth-footer__link">Create one</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-shell {
|
||||
min-height: 100vh;
|
||||
background: var(--surface-canvas);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: var(--surface-base);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--ring-default), var(--shadow-lg);
|
||||
padding: var(--space-8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.auth-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.auth-brand__mark {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.auth-alert {
|
||||
/* Alert component handles its own layout */
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* TOTP hint text */
|
||||
.auth-totp-hint {
|
||||
text-align: center;
|
||||
}
|
||||
.auth-totp-hint__text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-normal);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* TOTP bare input — monospace, centered, large tracking */
|
||||
.auth-totp-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
.auth-totp-field__label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.auth-totp-input {
|
||||
width: 100%;
|
||||
height: var(--control-h-md);
|
||||
padding: 0 var(--space-3);
|
||||
background: var(--surface-inset);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--ring-default);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.35em;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
transition: box-shadow 120ms ease;
|
||||
}
|
||||
.auth-totp-input:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
|
||||
}
|
||||
.auth-totp-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.35em;
|
||||
}
|
||||
|
||||
/* Ghost back link */
|
||||
.auth-back-link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
transition: color 120ms ease;
|
||||
}
|
||||
.auth-back-link:hover { color: var(--text-secondary); }
|
||||
.auth-back-link:disabled { opacity: 0.45; pointer-events: none; }
|
||||
|
||||
/* Footer link row */
|
||||
.auth-footer {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.auth-footer__link {
|
||||
color: var(--accent-text);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.auth-footer__link:hover { color: var(--accent-hover); }
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,10 @@ import { useRouter } from 'vue-router'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import type { AuthResponse } from '@/types'
|
||||
import Logo from '@/components/ds/brand/Logo.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const api = useApi()
|
||||
@@ -74,138 +78,149 @@ async function handleRegister() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
|
||||
<!-- Branding -->
|
||||
<div class="text-center mb-8">
|
||||
<img src="/logo-hero.png" alt="Corrosion Management" class="h-28 mx-auto mb-2" />
|
||||
<p class="text-sm text-neutral-500 mt-2">Create your account</p>
|
||||
<div class="auth-shell">
|
||||
<div class="auth-card">
|
||||
<!-- Branding -->
|
||||
<div class="auth-brand">
|
||||
<div class="auth-brand__mark">
|
||||
<Logo :size="36" tagline="Game Server Operations" />
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"
|
||||
>
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Register form -->
|
||||
<form @submit.prevent="handleRegister" class="space-y-5">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-neutral-400 mb-1.5">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
placeholder="you@example.com"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg 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>
|
||||
<label for="username" class="block text-sm font-medium text-neutral-400 mb-1.5">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
required
|
||||
autocomplete="username"
|
||||
placeholder="At least 3 characters"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg 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>
|
||||
<label for="password" class="block text-sm font-medium text-neutral-400 mb-1.5">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
placeholder="At least 8 characters"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg 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>
|
||||
<label for="confirm-password" class="block text-sm font-medium text-neutral-400 mb-1.5">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
placeholder="Re-enter your password"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg 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>
|
||||
<label for="license-key" class="block text-sm font-medium text-neutral-400 mb-1.5">
|
||||
License Key
|
||||
</label>
|
||||
<input
|
||||
id="license-key"
|
||||
v-model="licenseKey"
|
||||
type="text"
|
||||
required
|
||||
autocomplete="off"
|
||||
placeholder="XXXX-XXXX-XXXX-XXXX"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors font-mono tracking-wider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading || !formValid"
|
||||
class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
v-if="loading"
|
||||
class="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
{{ loading ? 'Creating account...' : 'Create Account' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Login link -->
|
||||
<p class="mt-6 text-center text-sm text-neutral-500">
|
||||
Already have an account?
|
||||
<router-link to="/login" class="text-oxide-400 hover:text-oxide-300 transition-colors">
|
||||
Sign in
|
||||
</router-link>
|
||||
</p>
|
||||
<p class="auth-brand__sub">Create your account</p>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<Alert v-if="error" tone="danger">{{ error }}</Alert>
|
||||
|
||||
<!-- Register form -->
|
||||
<form class="auth-form" @submit.prevent="handleRegister">
|
||||
<Input
|
||||
v-model="email"
|
||||
id="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
autocomplete="email"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="username"
|
||||
id="username"
|
||||
label="Username"
|
||||
type="text"
|
||||
placeholder="At least 3 characters"
|
||||
autocomplete="username"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="password"
|
||||
id="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="At least 8 characters"
|
||||
autocomplete="new-password"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="confirmPassword"
|
||||
id="confirm-password"
|
||||
label="Confirm password"
|
||||
type="password"
|
||||
placeholder="Re-enter your password"
|
||||
autocomplete="new-password"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="licenseKey"
|
||||
id="license-key"
|
||||
label="License key"
|
||||
type="text"
|
||||
placeholder="XXXX-XXXX-XXXX-XXXX"
|
||||
autocomplete="off"
|
||||
:mono="true"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
:loading="loading"
|
||||
:disabled="!formValid"
|
||||
:block="true"
|
||||
size="md"
|
||||
>
|
||||
Create account
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<!-- Login link -->
|
||||
<p class="auth-footer">
|
||||
Already have an account?
|
||||
<router-link to="/login" class="auth-footer__link">Sign in</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-shell {
|
||||
min-height: 100vh;
|
||||
background: var(--surface-canvas);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: var(--surface-base);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--ring-default), var(--shadow-lg);
|
||||
padding: var(--space-8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.auth-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.auth-brand__mark {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.auth-brand__sub {
|
||||
margin: 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.auth-footer__link {
|
||||
color: var(--accent-text);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.auth-footer__link:hover { color: var(--accent-hover); }
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,10 @@ 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'
|
||||
import Logo from '@/components/ds/brand/Logo.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
@@ -21,13 +24,25 @@ const serverForm = ref({
|
||||
game_port: 28015,
|
||||
})
|
||||
|
||||
// String mirrors for the DS Input component (which binds defineModel<string>).
|
||||
// Changes sync back to serverForm as numbers before submission.
|
||||
const serverPortStr = ref(String(serverForm.value.server_port))
|
||||
const gamePortStr = ref(String(serverForm.value.game_port))
|
||||
|
||||
function syncPorts() {
|
||||
serverForm.value.server_port = parseInt(serverPortStr.value, 10) || serverForm.value.server_port
|
||||
serverForm.value.game_port = parseInt(gamePortStr.value, 10) || serverForm.value.game_port
|
||||
}
|
||||
|
||||
const connectionTypes = [
|
||||
{ value: 'bare_metal', label: 'Bare Metal / VPS', desc: 'Direct connection via Companion Agent' },
|
||||
{ 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() {
|
||||
syncPorts()
|
||||
|
||||
if (!serverForm.value.server_name.trim()) {
|
||||
error.value = 'Server name is required.'
|
||||
return
|
||||
@@ -58,180 +73,464 @@ async function completeSetup() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 class="setup-shell">
|
||||
<div class="setup-wrap">
|
||||
<!-- Brand header -->
|
||||
<div class="setup-brand">
|
||||
<div class="setup-brand__mark">
|
||||
<Logo :size="30" tagline="Setup" />
|
||||
</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>
|
||||
<!-- Progress stepper -->
|
||||
<div class="setup-steps">
|
||||
<div
|
||||
v-for="(s, i) in [
|
||||
{ label: 'Server', icon: 'server' },
|
||||
{ label: 'Connect', icon: 'wifi' },
|
||||
{ label: 'Done', icon: 'check' },
|
||||
]"
|
||||
:key="i"
|
||||
class="setup-step"
|
||||
:class="{
|
||||
'setup-step--active': step === i + 1,
|
||||
'setup-step--done': step > i + 1,
|
||||
}"
|
||||
>
|
||||
<span class="setup-step__num">{{ step > i + 1 ? '✓' : i + 1 }}</span>
|
||||
<span class="setup-step__label">{{ s.label }}</span>
|
||||
<div v-if="i < 2" class="setup-step__connector" :class="step > i + 1 ? 'setup-step__connector--done' : ''" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Server config -->
|
||||
<div v-if="step === 1" class="setup-card">
|
||||
<div class="setup-card__head">
|
||||
<h1 class="setup-card__title">Configure your server</h1>
|
||||
<p class="setup-card__sub">Connect your Rust server 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>
|
||||
<Alert v-if="error" tone="danger">{{ error }}</Alert>
|
||||
|
||||
<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>
|
||||
<form class="setup-form" @submit.prevent="submitServerConfig">
|
||||
<Input
|
||||
v-model="serverForm.server_name"
|
||||
label="Server name"
|
||||
type="text"
|
||||
placeholder="My Rust Server"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-2">Connection Type</label>
|
||||
<div class="space-y-2">
|
||||
<!-- Connection type selector -->
|
||||
<div class="conn-group">
|
||||
<span class="conn-group__label">Connection type</span>
|
||||
<div class="conn-options">
|
||||
<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'"
|
||||
class="conn-option"
|
||||
:class="serverForm.connection_type === ct.value ? 'conn-option--active' : ''"
|
||||
>
|
||||
<input
|
||||
v-model="serverForm.connection_type"
|
||||
:value="ct.value"
|
||||
type="radio"
|
||||
name="connection_type"
|
||||
class="mt-0.5 accent-oxide-500"
|
||||
class="conn-option__radio"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-200">{{ ct.label }}</p>
|
||||
<p class="text-xs text-neutral-500">{{ ct.desc }}</p>
|
||||
<div class="conn-option__body">
|
||||
<span class="conn-option__name">{{ ct.label }}</span>
|
||||
<span class="conn-option__desc">{{ ct.desc }}</span>
|
||||
</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>
|
||||
<!-- Port / IP row -->
|
||||
<div class="setup-ports">
|
||||
<Input
|
||||
v-model="serverForm.server_ip"
|
||||
label="Server IP"
|
||||
type="text"
|
||||
placeholder="0.0.0.0"
|
||||
:mono="true"
|
||||
/>
|
||||
<Input
|
||||
v-model="serverPortStr"
|
||||
label="RCON port"
|
||||
type="text"
|
||||
placeholder="28016"
|
||||
:mono="true"
|
||||
/>
|
||||
<Input
|
||||
v-model="gamePortStr"
|
||||
label="Game port"
|
||||
type="text"
|
||||
placeholder="28015"
|
||||
:mono="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<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"
|
||||
:loading="isLoading"
|
||||
:block="true"
|
||||
size="md"
|
||||
icon-right="arrow-right"
|
||||
>
|
||||
<Loader2 v-if="isLoading" class="w-4 h-4 animate-spin" />
|
||||
<template v-else>
|
||||
Continue
|
||||
<ArrowRight class="w-4 h-4" />
|
||||
</template>
|
||||
</button>
|
||||
Continue
|
||||
</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>
|
||||
<!-- Step 2: Companion agent install -->
|
||||
<div v-if="step === 2" class="setup-card">
|
||||
<div class="setup-card__head setup-card__head--center">
|
||||
<div class="setup-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="setup-card__title">Install the Companion Agent</h1>
|
||||
<p class="setup-card__sub">The agent runs on your server and connects to Corrosion — 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 class="setup-code">
|
||||
<p class="setup-code__comment"># Download and install the Companion Agent</p>
|
||||
<p class="setup-code__cmd">curl -sSL https://get.corrosionmgmt.com | sh</p>
|
||||
<p class="setup-code__comment setup-code__comment--mt"># Start the agent with your license key</p>
|
||||
<p class="setup-code__cmd">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 class="setup-hint">
|
||||
The agent auto-registers with your panel. You can also use the uMod plugin for lightweight integration.
|
||||
</p>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
<div class="setup-actions">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="md"
|
||||
@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
|
||||
Skip for now
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="md"
|
||||
icon-right="arrow-right"
|
||||
@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>
|
||||
I've installed it
|
||||
</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
|
||||
<div v-if="step === 3" class="setup-card setup-card--center">
|
||||
<div class="setup-complete-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="setup-card__title">You're all set</h1>
|
||||
<p class="setup-card__sub">Your server is configured. Head to the dashboard to start managing your Rust server.</p>
|
||||
<Button
|
||||
type="button"
|
||||
:loading="isLoading"
|
||||
:block="true"
|
||||
size="md"
|
||||
@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>
|
||||
Go to dashboard
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.setup-shell {
|
||||
min-height: 100vh;
|
||||
background: var(--surface-canvas);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.setup-wrap {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
/* Brand */
|
||||
.setup-brand {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.setup-brand__mark {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Progress stepper */
|
||||
.setup-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.setup-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.setup-step__num {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--ring-default);
|
||||
color: var(--text-muted);
|
||||
flex: none;
|
||||
transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.setup-step--active .setup-step__num {
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--accent-border);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
|
||||
.setup-step--done .setup-step__num {
|
||||
background: var(--accent);
|
||||
box-shadow: none;
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.setup-step__label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.setup-step--active .setup-step__label,
|
||||
.setup-step--done .setup-step__label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.setup-step__connector {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--border-default);
|
||||
margin: 0 var(--space-2);
|
||||
flex: none;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.setup-step__connector--done {
|
||||
background: var(--accent-border);
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.setup-card {
|
||||
background: var(--surface-base);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--ring-default), var(--shadow-lg);
|
||||
padding: var(--space-8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.setup-card--center {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.setup-card__head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
|
||||
.setup-card__head--center {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.setup-card__title {
|
||||
margin: 0;
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
|
||||
.setup-card__sub {
|
||||
margin: 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
|
||||
/* Icon in step 2 header */
|
||||
.setup-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--accent-border);
|
||||
color: var(--accent-text);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Step 3 check icon */
|
||||
.setup-complete-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--status-online-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--status-online-border);
|
||||
color: var(--status-online);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.setup-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Connection type group */
|
||||
.conn-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
|
||||
.conn-group__label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.conn-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.conn-option {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
background: var(--surface-inset);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--ring-default);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.conn-option--active {
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--accent-border);
|
||||
}
|
||||
|
||||
.conn-option__radio {
|
||||
margin-top: 2px;
|
||||
accent-color: var(--accent);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.conn-option__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.conn-option__name {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.conn-option__desc {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Port grid */
|
||||
.setup-ports {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* Code block */
|
||||
.setup-code {
|
||||
background: var(--surface-sunken);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--ring-subtle);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.setup-code__comment {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.setup-code__comment--mt {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.setup-code__cmd {
|
||||
margin: 0;
|
||||
color: var(--accent-text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.setup-hint {
|
||||
margin: 0;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
text-align: center;
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
|
||||
.setup-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.setup-actions > * {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user