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