good form validator

web/src/api/asset_interfaces/datasources/interfaces.ts

@@ -59,16 +59,16 @@ export enum DataSourceEnvironment {
 export const PostgresCredentialsSchema = v.object({
   name: v.pipe(v.string(), v.minLength(3, 'Name must be at least 3 characters')),
   type: v.union([v.literal('postgres'), v.literal('supabase')]),
-  host: v.string(),
+  host: v.pipe(v.string(), v.minLength(1, 'Host must not be empty')),
   port: v.pipe(
     v.number(),
     v.minValue(1, 'Port must be greater than 0'),
     v.maxValue(65535, 'Port must be less than or equal to 65535')
   ),
-  username: v.string(),
-  password: v.string(),
-  default_database: v.string(), // postgres
-  default_schema: v.string() // public
+  username: v.pipe(v.string(), v.minLength(1, 'Username must not be empty')),
+  password: v.pipe(v.string(), v.minLength(1, 'Password must not be empty')),
+  default_database: v.pipe(v.string(), v.minLength(1, 'Database must not be empty')), // postgres
+  default_schema: v.pipe(v.string(), v.minLength(1, 'Schema must not be empty')) // public
 });
 
 export type PostgresCredentials = v.InferOutput<typeof PostgresCredentialsSchema>;

web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/PostgresForm.tsx

@@ -27,23 +27,22 @@ export const PostgresForm: React.FC<{
 
   const form = useAppForm({
     defaultValues: {
-      host: credentials?.host || '',
+      host: credentials?.host,
       port: credentials?.port || 5432,
-      username: credentials?.username || '',
-      password: credentials?.password || '',
-      default_database: credentials?.default_database || '',
-      default_schema: credentials?.default_schema || '',
+      username: credentials?.username,
+      password: credentials?.password,
+      default_database: credentials?.default_database,
+      default_schema: credentials?.default_schema,
       type: credentials?.type || 'postgres',
-      name: dataSource?.name || credentials?.name || ''
-    } satisfies PostgresCredentials,
+      name: dataSource?.name || credentials?.name
+    } as PostgresCredentials,
     onSubmit: async ({ value, ...rest }) => {
-      console.log(rest);
-      // await dataSourceFormSubmit({
-      //   flow,
-      //   dataSourceId: dataSource?.id,
-      //   onUpdate: () => updateDataSource({ id: dataSource!.id, ...value }),
-      //   onCreate: () => createDataSource(value)
-      // });
+      await dataSourceFormSubmit({
+        flow,
+        dataSourceId: dataSource?.id,
+        onUpdate: () => updateDataSource({ id: dataSource!.id, ...value }),
+        onCreate: () => createDataSource(value)
+      });
     },
     validators: {
       onChangeAsyncDebounceMs: 1000,

web/src/components/ui/form/FormBase.tsx

@@ -176,6 +176,8 @@ export function PasswordField({
   const isFormSubmitted = field.form.state.submissionAttempts > 1;
   const showError = !!error && (isFormSubmitted || isTouched);
 
+  console.log(field);
+
   const InputComponent = (
     <div className={cn('relative flex w-full flex-col', className)}>
       <InputPassword