Add managed Nginx HTTP-01 gateway activation and certificate status

frontend/src/views/Settings.vue

@@ -55,7 +55,7 @@
           </template>
           <el-button :loading="hostLoading" @click="loadHostReadiness">{{ $t('tls.refresh') }}</el-button>
         </el-card>
-        <el-steps :active="nginxSetup?.nginx_installed && nginxSetup?.certbot_installed && nginxSetup?.webroot_ready ? 2 : 1" finish-status="success" style="margin-bottom:16px">
+        <el-steps :active="nginxSetup?.site_stage === 'https' ? 3 : nginxSetup?.nginx_installed && nginxSetup?.certbot_installed && nginxSetup?.webroot_ready ? 2 : 1" finish-status="success" style="margin-bottom:16px">
           <el-step :title="$t('tls.setupStepCheck')" />
           <el-step :title="$t('tls.setupStepInstall')" />
           <el-step :title="$t('tls.setupStepConfigure')" />
@@ -65,6 +65,7 @@
           <template v-if="nginxSetup">
             <p class="tls-hint">{{ $t('tls.detectedSystem') }}：{{ nginxSetup.os }} {{ nginxSetup.version }} · {{ nginxSetup.package_manager || '—' }}</p>
             <p class="tls-hint">Nginx：{{ nginxSetup.nginx_installed ? '✓' : '—' }} · Certbot：{{ nginxSetup.certbot_installed ? '✓' : '—' }} · HTTP-01 webroot：{{ nginxSetup.webroot_ready ? '✓' : '—' }}</p>
+            <p class="tls-hint">{{ $t('tls.siteStage') }}：{{ $t(`tls.stage_${nginxSetup.site_stage || 'none'}`) }}</p>
             <el-alert v-if="!nginxSetup.supported || !nginxSetup.root" type="warning" :closable="false" :title="$t('tls.setupUnsupported')" style="margin-bottom:12px" />
           </template>
           <el-alert type="info" :closable="false" :title="$t('tls.setupScope')" style="margin-bottom:12px" />
@@ -92,7 +93,7 @@
         <el-descriptions :column="1" size="small" border v-if="tlsStatus">
           <el-descriptions-item :label="$t('tls.domain')">{{ tlsStatus.configured_domain || $t('tls.notConfigured') }}</el-descriptions-item>
           <el-descriptions-item :label="$t('tls.mode')">{{ tlsStatus.mode === 'nginx' ? $t('tls.nginxMode') : $t('tls.goMode') }}</el-descriptions-item>
-          <el-descriptions-item :label="$t('tls.activeDomain')">{{ tlsStatus.domain || $t('tls.notConfigured') }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('tls.activeDomain')">{{ tlsStatus.mode === 'nginx' && nginxSetup?.site_stage !== 'https' ? $t('tls.notConfigured') : tlsStatus.domain || $t('tls.notConfigured') }}</el-descriptions-item>
           <el-descriptions-item :label="$t('tls.dns')">{{ tlsStatus.dns?.join(', ') || '—' }}</el-descriptions-item>
           <el-descriptions-item :label="$t('tls.certificate')">
             <el-tag :type="tlsStatus.certificate_valid ? 'success' : 'warning'">{{ tlsStatus.certificate_valid ? $t('tls.valid') : tlsStatus.enabled ? $t('tls.pending') : $t('tls.notConfigured') }}</el-tag>
@@ -104,7 +105,10 @@
         </el-descriptions>
         <p class="tls-hint">{{ $t('tls.setupHint') }}</p>
         <el-button :loading="tlsLoading" @click="loadTLS">{{ $t('tls.refresh') }}</el-button>
-        <el-button v-if="tlsStatus?.enabled" type="primary" tag="a" :href="`https://${tlsStatus.domain}/api/health`" target="_blank" rel="noopener noreferrer">{{ $t('tls.openHttps') }}</el-button>
+        <el-button v-if="tlsStatus?.enabled || (tlsStatus?.certificate_valid && nginxSetup?.site_stage === 'https')" type="primary" tag="a" :href="`https://${tlsStatus.domain}/api/health`" target="_blank" rel="noopener noreferrer">{{ $t('tls.openHttps') }}</el-button>
+        <el-button type="primary" :loading="nginxActivating" :disabled="!nginxSetup?.root || !nginxSetup?.nginx_installed || !nginxSetup?.certbot_installed || !nginxSetup?.webroot_ready || nginxSetup?.running || tlsStatus?.mode !== 'nginx' || tlsStatus?.restart_required || !tlsStatus?.configured_domain" @click="activateNginx">{{ $t('tls.activateSite') }}</el-button>
+        <p class="tls-hint">{{ $t('tls.activateHint') }}</p>
+        <pre v-if="nginxActivateLog" ref="nginxActivateLogView" class="nginx-preview" role="log" aria-live="polite">{{ nginxActivateLog }}</pre>
         <el-button :loading="nginxLoading" :disabled="!tlsStatus?.configured_domain" @click="loadNginxPreview">{{ $t('tls.previewNginx') }}</el-button>
         <template v-if="nginxPreview">
           <p class="tls-hint">{{ $t('tls.previewOnly') }}</p>
@@ -188,6 +192,52 @@ const nginxSetupLoading = ref(false)
 const nginxInstalling = ref(false)
 const nginxInstallLog = ref('')
 const nginxLogView = ref(null)
+const nginxActivating = ref(false)
+const nginxActivateLog = ref('')
+const nginxActivateLogView = ref(null)
+
+async function activateNginx() {
+  nginxActivating.value = true
+  nginxActivateLog.value = ''
+  let completed = false
+  try {
+    const response = await fetch('/api/system/tls/nginx-activate', {
+      method: 'POST', headers: { Authorization: `Bearer ${auth.token}` }
+    })
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}))
+      throw new Error(body.error || `${response.status} ${response.statusText}`)
+    }
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+    const show = (line) => {
+      if (!line) return
+      const event = JSON.parse(line)
+      nginxActivateLog.value = (nginxActivateLog.value + (event.message || '')).slice(-100000)
+      if (event.type === 'done') completed = true
+      if (event.type === 'error') throw new Error(event.message)
+      nextTick(() => { if (nginxActivateLogView.value) nginxActivateLogView.value.scrollTop = nginxActivateLogView.value.scrollHeight })
+    }
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      buffer += decoder.decode(value, { stream: true })
+      const lines = buffer.split('\n')
+      buffer = lines.pop()
+      for (const line of lines) show(line)
+    }
+    if (buffer) show(buffer)
+    if (!completed) throw new Error(t('tls.setupInterrupted'))
+    ElMessage.success(t('tls.siteReady'))
+  } catch (e) {
+    nginxActivateLog.value += `\n${e.message}\n`
+    ElMessage.error(t('tls.siteFailed'))
+  } finally {
+    nginxActivating.value = false
+    await Promise.all([loadNginxSetup(), loadTLS()])
+  }
+}
 
 async function loadNginxSetup() {
   nginxSetupLoading.value = true