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