shopdb-flask/plugins/warranty/frontend/views/DellWarrantySettings.vue

<template>
  <div>
    <div class="page-header">
      <h2>Integrations</h2>
      <p class="header-description">Configure external service connections and APIs</p>
    </div>

    <div class="integration-tabs">
      <router-link
        :to="{ name: 'servicenow-settings' }"
        class="integration-tab"
        :class="{ active: $route.name === 'servicenow-settings' }"
      >
        ServiceNow
      </router-link>
      <router-link
        :to="{ name: 'zabbix-settings' }"
        class="integration-tab"
        :class="{ active: $route.name === 'zabbix-settings' }"
      >
        Zabbix Supplies
      </router-link>
      <router-link
        :to="{ name: 'dell-warranty-settings' }"
        class="integration-tab"
        :class="{ active: $route.name === 'dell-warranty-settings' }"
      >
        Dell Warranty
      </router-link>
    </div>

    <div class="section-card">
      <div class="setting-group">
        <p class="setting-description">
          How far ahead the dashboard counts a warranty as expiring.
        </p>
        <div class="setting-row">
          <label>
            <span>Expiring window (days)</span>
            <input type="number" min="1"
                   v-model.number="settings.warranty_expiringdays"
                   @blur="saveSetting('warranty_expiringdays', settings.warranty_expiringdays)"
                   :disabled="saving">
          </label>
        </div>
      </div>
    </div>

    <div class="section-card">
      <div class="setting-group">
        <p class="setting-description">
          Look up Dell coverage by service tag via the Dell TechDirect Warranty API.
          When enabled, the Refresh button on a Dell warranty pulls the current service
          level and end date. Requires a Dell TechDirect API client id and secret.
        </p>

        <div class="setting-row">
          <label class="toggle-label">
            <span>Enable Dell Warranty Lookup</span>
            <button
              class="toggle-btn"
              :class="{ active: settings.warranty_dell_enabled }"
              @click="toggleSetting('warranty_dell_enabled')"
              :disabled="saving"
            >
              <span class="toggle-slider"></span>
            </button>
          </label>
        </div>

        <div class="setting-row" v-if="settings.warranty_dell_enabled">
          <label>
            <span>Client ID</span>
            <input
              type="text"
              v-model="settings.warranty_dell_clientid"
              placeholder="Dell TechDirect client id"
              @blur="saveSetting('warranty_dell_clientid', settings.warranty_dell_clientid)"
              :disabled="saving"
            >
          </label>
        </div>

        <div class="setting-row" v-if="settings.warranty_dell_enabled">
          <label>
            <span>Client Secret</span>
            <input
              type="password"
              v-model="settings.warranty_dell_clientsecret"
              placeholder="Enter client secret"
              @blur="saveSetting('warranty_dell_clientsecret', settings.warranty_dell_clientsecret)"
              :disabled="saving"
            >
          </label>
        </div>

        <div class="setting-row" v-if="settings.warranty_dell_enabled">
          <label>
            <span>Token URL <small>(blank = Dell default)</small></span>
            <input
              type="url"
              v-model="settings.warranty_dell_tokenurl"
              placeholder="https://apigtwb2c.us.dell.com/auth/oauth/v2/token"
              @blur="saveSetting('warranty_dell_tokenurl', settings.warranty_dell_tokenurl)"
              :disabled="saving"
            >
          </label>
        </div>

        <div class="setting-row" v-if="settings.warranty_dell_enabled">
          <label>
            <span>API URL <small>(blank = Dell default)</small></span>
            <input
              type="url"
              v-model="settings.warranty_dell_apiurl"
              placeholder="https://apigtwb2c.us.dell.com/PROD/sbil/eapi/v5/asset-entitlements"
              @blur="saveSetting('warranty_dell_apiurl', settings.warranty_dell_apiurl)"
              :disabled="saving"
            >
          </label>
        </div>

        <div class="status-indicator" v-if="settings.warranty_dell_enabled">
          <span class="status-dot" :class="dellStatus"></span>
          <span>{{ dellMessage }}</span>
        </div>
      </div>
    </div>

    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="success" class="settings-success">{{ success }}</div>
  </div>
</template>

<script setup>
import { onMounted, computed } from 'vue'
import { useSystemSettings } from '@/composables/systemSettings'

const {
  settings, saving, error, success,
  loadSettings, saveSetting, toggleSetting,
} = useSystemSettings()

// Per-page connection status (stays with the page, not the composable).
const dellStatus = computed(() => {
  if (!settings.warranty_dell_enabled) return 'inactive'
  if (!settings.warranty_dell_clientid || !settings.warranty_dell_clientsecret) return 'warning'
  return 'pending'
})

const dellMessage = computed(() => {
  if (!settings.warranty_dell_enabled) return 'Disabled'
  if (!settings.warranty_dell_clientid) return 'Client id not configured'
  if (!settings.warranty_dell_clientsecret) return 'Client secret not configured'
  return 'Configured (used when you refresh a Dell warranty)'
})

onMounted(loadSettings)
</script>

<style scoped>
.header-description {
  margin: 0.5rem 0 0;
  color: var(--text-light);
  font-size: 0.95rem;
}

.integration-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  margin: 2rem 0;
}

.integration-tab {
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: var(--text-light);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-weight: 500;
  font-size: 0.95rem;
}

.integration-tab:hover {
  color: var(--text);
  background: var(--hover-bg);
}

.integration-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
</style>