corrosion-admin-panel/frontend/src/views/admin/SettingsView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useApi } from '@/composables/useApi'
import { Settings, Key, Globe, User, Save, Loader2 } from 'lucide-vue-next'

const auth = useAuthStore()
const api = useApi()

const saving = ref(false)
const section = ref<'account' | 'license' | 'domain'>('account')

const accountForm = ref({
  username: '',
  email: '',
})

const domainForm = ref({
  subdomain: '',
  custom_domain: '',
})

function loadForms() {
  if (auth.user) {
    accountForm.value.username = auth.user.username
    accountForm.value.email = auth.user.email
  }
  if (auth.license) {
    domainForm.value.subdomain = auth.license.subdomain || ''
    domainForm.value.custom_domain = auth.license.custom_domain || ''
  }
}

async function saveAccount() {
  saving.value = true
  try {
    await api.put('/auth/profile', accountForm.value)
  } catch {
    // Handle error
  } finally {
    saving.value = false
  }
}

async function saveDomain() {
  saving.value = true
  try {
    await api.put('/settings/domain', domainForm.value)
  } catch {
    // Handle error
  } finally {
    saving.value = false
  }
}

onMounted(() => {
  loadForms()
})
</script>

<template>
  <div class="p-6 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-3">
      <Settings class="w-5 h-5 text-oxide-500" />
      <h1 class="text-2xl font-bold text-neutral-100">Settings</h1>
    </div>

    <!-- Section tabs -->
    <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden w-fit">
      <button
        v-for="tab in ([
          { key: 'account', label: 'Account', icon: User },
          { key: 'license', label: 'License', icon: Key },
          { key: 'domain', label: 'Domain', icon: Globe },
        ] as const)"
        :key="tab.key"
        @click="section = tab.key"
        class="flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors"
        :class="section === tab.key
          ? 'bg-oxide-500/15 text-oxide-400'
          : 'text-neutral-400 hover:text-neutral-200'"
      >
        <component :is="tab.icon" class="w-4 h-4" />
        {{ tab.label }}
      </button>
    </div>

    <!-- Account -->
    <div v-if="section === 'account'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Account Details</h2>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-xs text-neutral-500 mb-1">Username</label>
          <input
            v-model="accountForm.username"
            type="text"
            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
          />
        </div>
        <div>
          <label class="block text-xs text-neutral-500 mb-1">Email</label>
          <input
            v-model="accountForm.email"
            type="email"
            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
          />
        </div>
      </div>
      <div class="flex items-center gap-3">
        <p class="text-xs text-neutral-500">
          2FA: <span :class="auth.user?.totp_enabled ? 'text-green-400' : 'text-yellow-400'">
            {{ auth.user?.totp_enabled ? 'Enabled' : 'Not configured' }}
          </span>
        </p>
      </div>
      <button
        @click="saveAccount"
        :disabled="saving"
        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
      >
        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
        <Save v-else class="w-4 h-4" />
        Save
      </button>
    </div>

    <!-- License -->
    <div v-if="section === 'license'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">License Information</h2>
      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
        <div>
          <p class="text-xs text-neutral-500 mb-1">License Key</p>
          <p class="text-sm font-mono text-neutral-300">{{ auth.license?.license_key || '\u2014' }}</p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Status</p>
          <span
            class="text-xs font-medium px-2 py-0.5 rounded-full"
            :class="{
              'bg-green-500/10 text-green-400': auth.license?.status === 'active',
              'bg-yellow-500/10 text-yellow-400': auth.license?.status === 'suspended',
              'bg-red-500/10 text-red-400': auth.license?.status === 'expired' || auth.license?.status === 'revoked',
            }"
          >
            {{ auth.license?.status || 'Unknown' }}
          </span>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Expires</p>
          <p class="text-sm text-neutral-300">
            {{ auth.license?.expires_at ? new Date(auth.license.expires_at).toLocaleDateString() : 'Never' }}
          </p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Server Name</p>
          <p class="text-sm text-neutral-300">{{ auth.license?.server_name || 'Not set' }}</p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Webstore</p>
          <p class="text-sm text-neutral-300">{{ auth.license?.webstore_active ? 'Active' : 'Inactive' }}</p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Modules</p>
          <p class="text-sm text-neutral-300">{{ auth.license?.modules_enabled?.length ?? 0 }} enabled</p>
        </div>
      </div>
    </div>

    <!-- Domain -->
    <div v-if="section === 'domain'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Domain & Subdomain</h2>
      <div class="space-y-4">
        <div>
          <label class="block text-xs text-neutral-500 mb-1">Subdomain</label>
          <div class="flex items-center gap-0">
            <input
              v-model="domainForm.subdomain"
              type="text"
              placeholder="my-server"
              class="flex-1 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-l-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
            />
            <span class="px-3 py-2 bg-neutral-700 border border-l-0 border-neutral-700 rounded-r-lg text-sm text-neutral-400">
              .corrosionmgmt.com
            </span>
          </div>
        </div>
        <div>
          <label class="block text-xs text-neutral-500 mb-1">Custom Domain (optional)</label>
          <input
            v-model="domainForm.custom_domain"
            type="text"
            placeholder="panel.myserver.com"
            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
          />
          <p class="text-xs text-neutral-600 mt-1">Point a CNAME record to panel.corrosionmgmt.com</p>
        </div>
      </div>
      <button
        @click="saveDomain"
        :disabled="saving"
        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
      >
        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
        <Save v-else class="w-4 h-4" />
        Save
      </button>
    </div>
  </div>
</template>