Adding username validation for subscriptions

src/components/user/User.tsx

@@ -9,6 +9,7 @@ import { put } from '~/lib/put';
 import { del } from '~/lib/del';
 import { isFunction } from 'lodash';
 import { userId } from '~/lib/user-id';
+import { userExists } from '~/lib/user-exists';
 
 interface Props {
   values?: () => any;
@@ -47,6 +48,7 @@ const User: Component<Props> = (props) => {
       roles: [],
     };
     await put(couchUserId, userDoc, isNew(), '_users');
+
     if (isNew()) {
       navigate(`/user/${id}`);
     }
@@ -86,33 +88,46 @@ const User: Component<Props> = (props) => {
       return errors;
     }
 
-    if (isNew()) {
+    const subscriptions = values.subscriptions ?? [];
-      const authString = `${username}:${password}`;
+
-      const headers = new Headers();
+    for (let i = 0; i < subscriptions.length; i++) {
-      headers.set('Authorization', 'Basic ' + btoa(authString));
+      let subscription = subscriptions[i];
-      const response = await fetch(
+      if (
-        `${database}/_users/org.couchdb.user:${values.username}`,
+        !!subscription.username &&
-        {
+        !(await userExists(subscription.username))
-          method: 'HEAD',
+      ) {
-          mode: 'cors',
+        if (!errors.subscriptions) {
-          headers,
+          errors.subscriptions = [];
         }
-      );
+        errors.subscriptions[i] = { username: "User doesn't exist" };
-      if (response.status === 200) {
-        errors.username = 'The user is already existing';
       }
     }
 
+    if (isNew()) {
+      if (await userExists(values.username)) {
+        errors.username = 'The user is already existing';
+      }
+    }
+    console.log({ caller: 'Users / validationHandler', values, errors });
     return errors;
   };
 
-  const { form, data, setData, setInitialValues, reset, addField, unsetField } =
+  const {
-    createForm({
+    form,
-      onSubmit: submitHandler,
+    data,
-      extend: reporter(),
+    setData,
-      validate: validationHandler,
+    setInitialValues,
-      initialValues: getValues(),
+    reset,
-    });
+    addField,
+    unsetField,
+    isDirty,
+    isValid,
+  } = createForm({
+    onSubmit: submitHandler,
+    extend: reporter(),
+    validate: validationHandler,
+    initialValues: getValues(),
+  });
 
   const createUserHandler = async () => {
     console.log({
@@ -226,14 +241,18 @@ const User: Component<Props> = (props) => {
         </table>
         <Switch>
           <Match when={!isNew()}>
-            <Button.Root type='submit'>Save</Button.Root>
+            <Button.Root type='submit' disabled={!isDirty() || !isValid()}>
+              Save
+            </Button.Root>
             <Button.Root onclick={deleteHandler}>Delete</Button.Root>
           </Match>
           <Match when={isNew()}>
-            <Button.Root type='submit'>Create</Button.Root>
+            <Button.Root type='submit' isDisabled={!isValid()}>
+              Create
+            </Button.Root>
           </Match>
         </Switch>
-        <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
+        <Button.Root onclick={cancelHandler}>Back</Button.Root>
       </form>
     </>
   );