feat(openvpn): add OIDC browser authentication and setup guide

frontend/src/views/TunnelEditor.vue

@@ -29,6 +29,7 @@
         <el-input v-else v-model="form.config[field.key]" :placeholder="field.placeholder || field.default" />
         <div v-if="field.tip" class="field-tip">{{ $t(field.tip) }}</div>
       </el-form-item>
+      <OpenVPNOIDCGuide v-if="isOpenVPN && form.config.auth_mode === 'oidc'" :config="form.config" :editing="originalAuthMode === 'oidc'" />
       <template v-if="isOpenVPN">
         <el-form-item :label="$t('tunnelEditor.trafficMode')">
           <el-radio-group v-model="trafficMode">
@@ -77,6 +78,7 @@ import { ElMessage } from 'element-plus'
 import { useI18n } from 'vue-i18n'
 import api from '../api'
 import RouteListInput from '../components/RouteListInput.vue'
+import OpenVPNOIDCGuide from '../components/OpenVPNOIDCGuide.vue'
 import { CUSTOM_FIELDS, PROTOCOL_META, protocolColor, protocolDisplay, optionValue, optionLabel } from '../protocols'
 
 const { t } = useI18n()
@@ -85,6 +87,7 @@ const router = useRouter()
 const loading = ref(true)
 const saving = ref(false)
 const protocol = ref('')
+const originalAuthMode = ref('')
 const form = ref(null)
 const advancedOpen = ref([])
 const routeListRef = ref(null)
@@ -134,6 +137,7 @@ async function load() {
     const tunnel = data.tunnel
     protocol.value = tunnel.protocol
     const config = parseConfig(tunnel.config)
+    originalAuthMode.value = config.auth_mode || ''
     for (const field of (PROTOCOL_META[protocol.value]?.fields || CUSTOM_FIELDS)) {
       if (config[field.key] === undefined && field.default !== undefined) config[field.key] = field.default
     }
@@ -154,6 +158,11 @@ async function load() {
 
 async function save() {
   if (!form.value.name) return ElMessage.warning(t('tunnelEditor.fillName'))
+  if (isOpenVPN.value && form.value.config.auth_mode === 'oidc') {
+    for (const key of ['oidc_issuer', 'oidc_client_id', 'oidc_base_url', ...(originalAuthMode.value === 'oidc' ? [] : ['oidc_client_secret'])]) {
+      if (!form.value.config[key]) return ElMessage.warning(t('oidcGuide.fillRequired'))
+    }
+  }
   trafficMode.value = trafficMode.value
   if (isOpenVPN.value && routeListRef.value && !routeListRef.value.validate()) return
   saving.value = true