fix: validate

web/app/components/base/form/components/base/base-form.tsx

@@ -70,25 +70,33 @@ const BaseForm = ({
     return null
   }, [formSchemas, fieldClassName, labelClassName, inputContainerClassName, inputClassName, disabled])
 
+  const renderFieldWrapper = useCallback((formSchema: FormSchema) => {
+    const {
+      name,
+    } = formSchema
+
+    return (
+      <form.Field
+        key={name}
+        name={name}
+      >
+        {renderField}
+      </form.Field>
+    )
+  }, [renderField, form])
+
   if (!formSchemas?.length)
     return null
 
   return (
     <form
       className={cn(formClassName)}
+      onSubmit={(e) => {
+        e.preventDefault()
+        form?.handleSubmit()
+      }}
     >
-      {
-        formSchemas.map((formSchema) => {
-          return (
-            <form.Field
-              key={formSchema.name}
-              name={formSchema.name}
-            >
-              {renderField}
-            </form.Field>
-          )
-        })
-      }
+      {formSchemas.map(renderFieldWrapper)}
     </form>
   )
 }

web/app/components/base/form/types.ts

@@ -2,7 +2,10 @@ import type {
   ForwardedRef,
   ReactNode,
 } from 'react'
-import type { AnyFormApi } from '@tanstack/react-form'
+import type {
+  AnyFormApi,
+  FieldValidators,
+} from '@tanstack/react-form'
 
 export type TypeWithI18N<T = string> = {
   en_US: T
@@ -52,6 +55,7 @@ export type FormSchema = {
   placeholder?: string | TypeWithI18N
   options?: FormOption[]
   labelClassName?: string
+  validators?: FieldValidators<any, any, any, any, any, any, any, any, any, any>
 }
 
 export type FormValues = Record<string, any>

web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx

@@ -217,6 +217,7 @@ const AddOAuthButton = ({
             disabled={disabled}
             schemas={memorizedSchemas}
             onAuth={handleOAuth}
+            editValues={client_params}
           />
         )
       }

web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx

@@ -72,13 +72,21 @@ const ApiKeyModal = ({
       ...values
     } = store?.state.values
     const isPristineSecretInputNames: string[] = []
-    formSchemas.forEach((schema) => {
+    for (let i = 0; i < formSchemas.length; i++) {
+      const schema = formSchemas[i]
+      if (schema.required && !values[schema.name]) {
+        notify({
+          type: 'error',
+          message: t('common.errorMsg.fieldRequired', { field: schema.name }),
+        })
+        return
+      }
       if (schema.type === FormTypeEnum.secretInput) {
         const fieldMeta = form?.getFieldMeta(schema.name)
         if (fieldMeta?.isPristine)
           isPristineSecretInputNames.push(schema.name)
       }
-    })
+    }
 
     const transformedValues = transformFormSchemasSecretInput(isPristineSecretInputNames, values)
 

web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx

@@ -53,13 +53,21 @@ const OAuthClientSettings = ({
       ...values
     } = store?.state.values
     const isPristineSecretInputNames: string[] = []
-    schemas.forEach((schema) => {
+    for (let i = 0; i < schemas.length; i++) {
+      const schema = schemas[i]
+      if (schema.required && !values[schema.name]) {
+        notify({
+          type: 'error',
+          message: t('common.errorMsg.fieldRequired', { field: schema.name }),
+        })
+        return
+      }
       if (schema.type === FormTypeEnum.secretInput) {
         const fieldMeta = form?.getFieldMeta(schema.name)
         if (fieldMeta?.isPristine)
           isPristineSecretInputNames.push(schema.name)
       }
-    })
+    }
 
     const transformedValues = transformFormSchemasSecretInput(isPristineSecretInputNames, values)
 

web/app/components/plugins/plugin-auth/authorized/index.tsx

@@ -282,8 +282,7 @@ const Authorized = ({
         deleteCredentialId && (
           <Confirm
             isShow
-            title='Are you sure?'
-            content='content'
+            title={t('datasetDocuments.list.delete.title')}
             onCancel={closeConfirm}
             onConfirm={handleConfirm}
           />