feat(listener): handle verify change to prevent update error

src/components/ListenerDrawer/ListenerDrawer.vue

@@ -96,6 +96,7 @@
               :is-edit="isEdit"
               :base-path="SSLConfigKey"
               :verify-label="t('Base.tlsVerifyClient')"
+              @verify-change="handleTLSVerifyChange"
             />
           </el-col>
           <template v-if="!isQUIC && listenerRecord[SSLConfigKey].verify !== 'verify_none'">
@@ -440,6 +441,7 @@ const {
   listenerFormRules,
   submit,
   onDelete,
+  handleTLSVerifyChange,
 } = useListenerDialog(props, emit)
 
 const isUDP = computed(() => listenerRecord.value.type === ListenerTypeForGateway.UDP)

src/components/TLSConfig/TLSEnableConfig.vue

@@ -6,6 +6,7 @@
         :disabled="readonly || disabledVerify"
         :active-value="SSL_VERIFY_VALUE_MAP.get(true)"
         :inactive-value="SSL_VERIFY_VALUE_MAP.get(false)"
+        @change="handleVerifyChange"
       />
     </el-form-item>
     <CustomFormItem
@@ -152,7 +153,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'verifyChange'])
 
 const record: WritableComputedRef<SSL> = computed({
   get() {
@@ -180,6 +181,10 @@ const getFormItemProp = (key: string) => {
   }
   return undefined
 }
+
+const handleVerifyChange = (val: string | number | boolean) => {
+  emit('verifyChange', val)
+}
 </script>
 
 <style lang="scss">

src/hooks/Config/useListenerDialog.ts

@@ -52,6 +52,7 @@ interface UseListenerDialogReturns {
   submit: () => Promise<void>
   onDelete: () => void
   transPort: (port: string) => string
+  handleTLSVerifyChange: (val: string | number | boolean) => void
 }
 
 export default (props: Props, emit: Emit): UseListenerDialogReturns => {
@@ -316,6 +317,14 @@ export default (props: Props, emit: Emit): UseListenerDialogReturns => {
     }
   })
 
+  // If 'fail_if_no_peer_cert' is true while TLS verification is 'verify_none', it will cause an update error
+  const handleTLSVerifyChange = (val: string | number | boolean) => {
+    const { fail_if_no_peer_cert } = listenerRecord.value[SSLConfigKey.value]
+    if (val === 'verify_none' && fail_if_no_peer_cert === true) {
+      listenerRecord.value[SSLConfigKey.value].fail_if_no_peer_cert = false
+    }
+  }
+
   return {
     showDialog,
     isLoading,
@@ -339,5 +348,6 @@ export default (props: Props, emit: Emit): UseListenerDialogReturns => {
     submit,
     onDelete,
     transPort,
+    handleTLSVerifyChange,
   }
 }