perf: Improve Form Validation on Third-Party Authentication Platforms

Author: fit2cloud-chenyw

frontend/src/views/system/authentication/CasEditor.vue

@@ -128,8 +128,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         name: 'cas',
       }
       const method = id.value
-        ? request.put('/system/authentication', data)
-        : request.post('/system/authentication', data)
+        ? request.put('/system/authentication', data, { requestOptions: { silent: true } })
+        : request.post('/system/authentication', data, { requestOptions: { silent: true } })
       showLoading()
       method
         .then((res) => {
@@ -138,9 +138,16 @@ const submitForm = async (formEl: FormInstance | undefined) => {
             emits('saved')
             reset()
           }
-          closeLoading()
         })
-        .catch(() => {
+        .catch((e: any) => {
+          if (
+            e.message?.startsWith('sqlbot_authentication_connect_error') ||
+            e.response?.data?.startsWith('sqlbot_authentication_connect_error')
+          ) {
+            ElMessage.error(t('ds.connection_failed'))
+          }
+        })
+        .finally(() => {
           closeLoading()
         })
     }

frontend/src/views/system/authentication/LdapEditor.vue

@@ -119,8 +119,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         name: 'ldap',
       }
       const method = id.value
-        ? request.put('/system/authentication', data)
-        : request.post('/system/authentication', data)
+        ? request.put('/system/authentication', data, { requestOptions: { silent: true } })
+        : request.post('/system/authentication', data, { requestOptions: { silent: true } })
       showLoading()
       method
         .then((res) => {
@@ -129,9 +129,16 @@ const submitForm = async (formEl: FormInstance | undefined) => {
             emits('saved')
             reset()
           }
-          closeLoading()
         })
-        .catch(() => {
+        .catch((e: any) => {
+          if (
+            e.message?.startsWith('sqlbot_authentication_connect_error') ||
+            e.response?.data?.startsWith('sqlbot_authentication_connect_error')
+          ) {
+            ElMessage.error(t('ds.connection_failed'))
+          }
+        })
+        .finally(() => {
           closeLoading()
         })
     }

frontend/src/views/system/authentication/Oauth2Editor.vue

@@ -232,8 +232,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         name: 'oauth2',
       }
       const method = id.value
-        ? request.put('/system/authentication', data)
-        : request.post('/system/authentication', data)
+        ? request.put('/system/authentication', data, { requestOptions: { silent: true } })
+        : request.post('/system/authentication', data, { requestOptions: { silent: true } })
       showLoading()
       method
         .then((res) => {
@@ -242,9 +242,16 @@ const submitForm = async (formEl: FormInstance | undefined) => {
             emits('saved')
             reset()
           }
-          closeLoading()
         })
-        .catch(() => {
+        .catch((e: any) => {
+          if (
+            e.message?.startsWith('sqlbot_authentication_connect_error') ||
+            e.response?.data?.startsWith('sqlbot_authentication_connect_error')
+          ) {
+            ElMessage.error(t('ds.connection_failed'))
+          }
+        })
+        .finally(() => {
           closeLoading()
         })
     }

frontend/src/views/system/authentication/OidcEditor.vue

@@ -174,8 +174,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         name: 'oidc',
       }
       const method = id.value
-        ? request.put('/system/authentication', data)
-        : request.post('/system/authentication', data)
+        ? request.put('/system/authentication', data, { requestOptions: { silent: true } })
+        : request.post('/system/authentication', data, { requestOptions: { silent: true } })
       showLoading()
       method
         .then((res) => {
@@ -184,9 +184,16 @@ const submitForm = async (formEl: FormInstance | undefined) => {
             emits('saved')
             reset()
           }
-          closeLoading()
         })
-        .catch(() => {
+        .catch((e: any) => {
+          if (
+            e.message?.startsWith('sqlbot_authentication_connect_error') ||
+            e.response?.data?.startsWith('sqlbot_authentication_connect_error')
+          ) {
+            ElMessage.error(t('ds.connection_failed'))
+          }
+        })
+        .finally(() => {
           closeLoading()
         })
     }