mybeacon-daemon/dashboard/src/components/SettingsTab.vue

<template>
  <div class="settings-tab">
    <!-- Unlock form -->
    <div v-if="!unlocked" class="unlock-form">
      <h3>Enter Password to Access Settings</h3>
      <div class="form-row">
        <input
          v-model="password"
          type="password"
          placeholder="Device password"
          class="input"
          @keyup.enter="unlock"
        />
        <button @click="unlock" class="btn primary">Unlock</button>
      </div>
    </div>

    <!-- Settings form -->
    <div v-else class="settings-form">
      <div class="section">
        <h3>Mode</h3>
        <div class="radio-group">
          <label>
            <input type="radio" v-model="settings.mode" value="cloud" />
            Cloud Mode - config from server
          </label>
          <label>
            <input type="radio" v-model="settings.mode" value="lan" />
            LAN Mode - local config only
          </label>
        </div>
      </div>

      <div class="section">
        <h3>Network - eth0</h3>
        <div class="form-row">
          <label>Mode</label>
          <select v-model="settings.eth0_mode" class="input">
            <option value="dhcp">DHCP</option>
            <option value="static">Static</option>
          </select>
        </div>
        <template v-if="settings.eth0_mode === 'static'">
          <div class="form-row">
            <label>IP Address</label>
            <input v-model="settings.eth0_ip" type="text" class="input" placeholder="192.168.1.100/24" />
          </div>
          <div class="form-row">
            <label>Gateway</label>
            <input v-model="settings.eth0_gateway" type="text" class="input" placeholder="192.168.1.1" />
          </div>
          <div class="form-row">
            <label>DNS</label>
            <input v-model="settings.eth0_dns" type="text" class="input" placeholder="8.8.8.8" />
          </div>
        </template>
      </div>

      <div class="section">
        <h3>WiFi Client</h3>
        <div class="form-row">
          <label>SSID</label>
          <input v-model="settings.wifi_ssid" type="text" class="input" placeholder="Network name" />
        </div>
        <div class="form-row">
          <label>Password</label>
          <input v-model="settings.wifi_psk" type="password" class="input" placeholder="WiFi password" />
        </div>
      </div>

      <div class="section">
        <h3>NTP</h3>
        <div class="form-row">
          <label>Servers</label>
          <input v-model="settings.ntp_servers" type="text" class="input" placeholder="pool.ntp.org, time.google.com" />
        </div>
      </div>

      <div class="section" v-if="settings.mode === 'lan'">
        <h3>Endpoints (LAN Mode)</h3>
        <div class="form-row">
          <label>BLE Endpoint</label>
          <input v-model="settings.endpoint_ble" type="text" class="input" placeholder="http://192.168.1.10:5000/ble" />
        </div>
        <div class="form-row">
          <label>WiFi Endpoint</label>
          <input v-model="settings.endpoint_wifi" type="text" class="input" placeholder="http://192.168.1.10:5000/wifi" />
        </div>
      </div>

      <div class="actions">
        <button @click="save" class="btn primary">Apply Settings</button>
        <button @click="reset" class="btn">Reset</button>
      </div>

      <div v-if="message?.text" class="message" :class="message.type">
        <span v-if="message.type === 'info'" class="spinner"></span>
        <span v-else-if="message.type === 'success'" class="icon">&#10004;</span>
        <span v-else-if="message.type === 'error'" class="icon">&#10006;</span>
        {{ message.text }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
  config: Object,
  unlocked: Boolean,
  message: Object
})

const emit = defineEmits(['unlock', 'save'])

const password = ref('')
const settingsLoaded = ref(false)
const settings = reactive({
  mode: 'cloud',
  eth0_mode: 'dhcp',
  eth0_ip: '',
  eth0_gateway: '',
  eth0_dns: '',
  wifi_ssid: '',
  wifi_psk: '',
  ntp_servers: 'pool.ntp.org',
  endpoint_ble: '',
  endpoint_wifi: ''
})

// Load settings only ONCE when unlocked (not on every config poll)
watch(() => props.unlocked, (unlocked) => {
  if (unlocked && !settingsLoaded.value && props.config) {
    loadFromConfig(props.config)
    settingsLoaded.value = true
  }
}, { immediate: true })

function loadFromConfig(cfg) {
  if (!cfg) return
  settings.mode = cfg.mode || 'cloud'
  if (cfg.network) {
    settings.eth0_mode = cfg.network.eth0?.mode || 'dhcp'
    settings.eth0_ip = cfg.network.eth0?.static?.address || ''
    settings.eth0_gateway = cfg.network.eth0?.static?.gateway || ''
    settings.eth0_dns = cfg.network.eth0?.static?.dns?.join(', ') || ''
    settings.wifi_ssid = cfg.network.wifi?.ssid || ''
    settings.ntp_servers = cfg.network.ntp?.servers?.join(', ') || 'pool.ntp.org'
  }
}

function unlock() {
  emit('unlock', password.value)
}

function save() {
  emit('save', { ...settings })
}

function reset() {
  // Reset to config values
  loadFromConfig(props.config)
}
</script>

<style scoped>
.settings-tab {
  max-width: 600px;
}

.unlock-form {
  background: #16213e;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}

.unlock-form h3 {
  margin-bottom: 1rem;
  color: #888;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section {
  background: #16213e;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #0f3460;
}

.section h3 {
  font-size: 0.875rem;
  color: #888;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row label {
  min-width: 100px;
  font-size: 0.875rem;
  color: #aaa;
}

.input {
  flex: 1;
  padding: 0.5rem;
  background: #0f3460;
  border: 1px solid #1a4a7a;
  border-radius: 4px;
  color: #eee;
  font-size: 0.875rem;
}

.input:focus {
  outline: none;
  border-color: #e94560;
}

select.input {
  cursor: pointer;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #aaa;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  accent-color: #e94560;
}

.actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.btn {
  padding: 0.75rem 1.5rem;
  background: #0f3460;
  border: 1px solid #1a4a7a;
  border-radius: 4px;
  color: #eee;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.btn:hover {
  background: #1a4a7a;
}

.btn.primary {
  background: #e94560;
  border-color: #e94560;
}

.btn.primary:hover {
  background: #d63850;
}

.message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #3b82f6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.icon {
  font-size: 1rem;
}

.message.info {
  background: #1e3a5f;
  border: 1px solid #3b82f6;
  color: #93c5fd;
}

.message.success {
  background: #14532d;
  border: 1px solid #22c55e;
  color: #86efac;
}

.message.error {
  background: #450a0a;
  border: 1px solid #ef4444;
  color: #fca5a5;
}
</style>