From 60191a3c6fb8c6a9a0bcc3f507ba1bf63aacad88 Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Wed, 24 Apr 2024 15:34:33 +0800
Subject: [PATCH] feat(listener): handle verify change to prevent update error

---
 src/components/ListenerDrawer/ListenerDrawer.vue |  2 ++
 src/components/TLSConfig/TLSEnableConfig.vue     |  7 ++++++-
 src/hooks/Config/useListenerDialog.ts            | 10 ++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/ListenerDrawer/ListenerDrawer.vue b/src/components/ListenerDrawer/ListenerDrawer.vue
index ad28fc4c3..6da347395 100644
--- a/src/components/ListenerDrawer/ListenerDrawer.vue
+++ b/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)
diff --git a/src/components/TLSConfig/TLSEnableConfig.vue b/src/components/TLSConfig/TLSEnableConfig.vue
index 1e73e1685..7d68a371c 100644
--- a/src/components/TLSConfig/TLSEnableConfig.vue
+++ b/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">
diff --git a/src/hooks/Config/useListenerDialog.ts b/src/hooks/Config/useListenerDialog.ts
index b3592e06f..bbf342673 100644
--- a/src/hooks/Config/useListenerDialog.ts
+++ b/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,
   }
 }