archy/neode-ui/src/views/settings/SystemDangerZone.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { rpcClient } from '@/api/rpc-client'

const router = useRouter()
const { t } = useI18n()

// Reboot
const showRebootConfirm = ref(false)
const rebooting = ref(false)
const rebootPassword = ref('')
const rebootError = ref('')

async function performReboot() {
  if (!rebootPassword.value) return
  rebooting.value = true
  rebootError.value = ''
  try {
    await rpcClient.call({ method: 'system.reboot', params: { password: rebootPassword.value } })
    showRebootConfirm.value = false
    rebootPassword.value = ''
  } catch (e) {
    rebootError.value = e instanceof Error ? e.message : 'Reboot failed'
    rebooting.value = false
  }
}

// Factory Reset
const showFactoryResetConfirm = ref(false)
const factoryResetLoading = ref(false)

async function performFactoryReset() {
  factoryResetLoading.value = true
  try {
    await rpcClient.call({ method: 'system.factory-reset', params: { confirm: true } })
    localStorage.clear()
    showFactoryResetConfirm.value = false
    router.push('/onboarding/intro')
  } catch {
    localStorage.clear()
    showFactoryResetConfirm.value = false
    router.push('/onboarding/intro')
  }
}
</script>

<template>
  <!-- Network Diagnostics Link -->
  <div data-controller-container tabindex="0" class="glass-card px-6 py-6 mb-6">
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-xl font-semibold text-white/96">{{ t('common.network') }}</h2>
        <p class="text-sm text-white/60 mt-1">{{ t('settings.networkDesc') }}</p>
      </div>
      <button @click="router.push('/dashboard/server')" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
        {{ t('common.networkDiagnostics') }}
      </button>
    </div>
  </div>

  <!-- Reboot Section -->
  <div data-controller-container tabindex="0" class="path-option-card px-6 py-6 mt-6">
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-xl font-semibold text-white/90 mb-1">Reboot</h2>
        <p class="text-sm text-white/60">Restart the machine. All containers will restart automatically.</p>
      </div>
      <button
        class="glass-button px-6 py-2 text-sm"
        :disabled="rebooting"
        @click="showRebootConfirm = true"
      >
        {{ rebooting ? 'Rebooting...' : 'Reboot' }}
      </button>
    </div>
  </div>

  <!-- Reboot Confirmation Modal -->
  <Teleport to="body">
    <div v-if="showRebootConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showRebootConfirm = false">
      <div class="glass-card px-8 py-8 max-w-md mx-4">
        <h3 class="text-lg font-semibold text-white/90 mb-3">Reboot Node</h3>
        <p class="text-sm text-white/60 mb-4">Enter your password to confirm reboot. The node will be temporarily unavailable.</p>
        <input
          v-model="rebootPassword"
          type="password"
          class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 mb-4"
          placeholder="Password"
          @keydown.enter="performReboot"
        />
        <p v-if="rebootError" class="text-sm text-red-400 mb-3">{{ rebootError }}</p>
        <div class="flex gap-3 justify-end">
          <button class="glass-button" @click="showRebootConfirm = false">Cancel</button>
          <button
            class="glass-button px-6"
            :disabled="rebooting || !rebootPassword"
            @click="performReboot"
          >
            {{ rebooting ? 'Rebooting...' : 'Confirm Reboot' }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>

  <!-- Factory Reset Section -->
  <div data-controller-container tabindex="0" class="path-option-card px-6 py-6 mt-6 border-red-500/30">
    <h2 class="text-xl font-semibold text-red-400/90 mb-3">Factory Reset</h2>
    <p class="text-sm text-white/60 mb-4">
      Wipe all user data, identities, and credentials. Container images are preserved. The node will restart and show the onboarding screen.
    </p>
    <button
      class="glass-button glass-button-danger"
      @click="showFactoryResetConfirm = true"
    >
      Factory Reset
    </button>
  </div>

  <!-- Factory Reset Confirmation Modal -->
  <Teleport to="body">
    <div v-if="showFactoryResetConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div class="glass-card px-8 py-8 max-w-md mx-4">
        <h3 class="text-lg font-semibold text-white/90 mb-3">Are you sure?</h3>
        <p class="text-sm text-white/60 mb-6">
          This will delete all identities, credentials, and settings. This cannot be undone.
        </p>
        <div class="flex gap-3 justify-end">
          <button class="glass-button" @click="showFactoryResetConfirm = false">Cancel</button>
          <button
            class="glass-button glass-button-danger"
            :disabled="factoryResetLoading"
            @click="performFactoryReset"
          >
            {{ factoryResetLoading ? 'Resetting...' : 'Yes, Reset' }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>