From b53e4cf52400ff102f803e6817355e28a8261381 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Wed, 2 Aug 2023 15:00:47 -0500
Subject: [PATCH] fix create form errors

---
 frontend/components/Form/Password.vue        |  2 +-
 frontend/components/Item/CreateModal.vue     | 30 +++++++-------------
 frontend/components/Label/CreateModal.vue    | 30 +++++++-------------
 frontend/components/Location/CreateModal.vue | 30 +++++++-------------
 frontend/pages/profile.vue                   | 28 +++++++++---------
 5 files changed, 49 insertions(+), 71 deletions(-)

diff --git a/frontend/components/Form/Password.vue b/frontend/components/Form/Password.vue
index 0c03c91..6ea5313 100644
--- a/frontend/components/Form/Password.vue
+++ b/frontend/components/Form/Password.vue
@@ -15,7 +15,7 @@
 <script setup lang="ts">
   type Props = {
     modelValue: string;
-    placeholder: string;
+    placeholder?: string;
     label: string;
   };
 
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index 5c1bdee..6b13625 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -1,14 +1,14 @@
 <template>
   <BaseModal v-model="modal">
     <template #title> Create Item </template>
-    <div @keyup="keySubmit">
+    <form @submit.prevent="create()">
       <LocationSelector v-model="form.location" />
       <FormTextField ref="nameInput" v-model="form.name" :trigger-focus="focused" :autofocus="true" label="Item Name" />
       <FormTextArea v-model="form.description" label="Item Description" />
       <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
       <div class="modal-action">
         <div class="flex justify-center">
-          <BaseButton class="rounded-r-none" :loading="loading" @click="create(true)">
+          <BaseButton class="rounded-r-none" :loading="loading" type="submit">
             <template #icon>
               <Icon name="mdi-package-variant" class="swap-off h-5 w-5" />
               <Icon name="mdi-package-variant-closed" class="swap-on h-5 w-5" />
@@ -21,13 +21,13 @@
             </label>
             <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
               <li>
-                <button type="button" @click.prevent="create(false)">Create and Add Another</button>
+                <button type="button" @click="create(false)">Create and Add Another</button>
               </li>
             </ul>
           </div>
         </div>
       </div>
-    </div>
+    </form>
     <p class="text-sm text-center mt-4">
       use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
     </p>
@@ -84,6 +84,8 @@
     labels: [] as LabelOut[],
   });
 
+  const { shift } = useMagicKeys();
+
   whenever(
     () => modal.value,
     () => {
@@ -102,11 +104,15 @@
     }
   );
 
-  async function create(close = false) {
+  async function create(close = true) {
     if (!form.location) {
       return;
     }
 
+    if (shift.value) {
+      close = false;
+    }
+
     const out: ItemCreate = {
       parentId: null,
       name: form.name,
@@ -135,18 +141,4 @@
       navigateTo(`/item/${data.id}`);
     }
   }
-
-  async function keySubmit(e: KeyboardEvent) {
-    // Shift + Enter
-    if (e.shiftKey && e.key === "Enter") {
-      console.log("Shift + Enter");
-      e.preventDefault();
-      await create(false);
-      focused.value = true;
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      console.log("Enter");
-      await create(true);
-    }
-  }
 </script>
diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue
index f97e3f0..da1a594 100644
--- a/frontend/components/Label/CreateModal.vue
+++ b/frontend/components/Label/CreateModal.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseModal v-model="modal">
     <template #title> Create Label </template>
-    <div @keyup="keySubmit">
+    <form @submit.prevent="create()">
       <FormTextField
         ref="locationNameRef"
         v-model="form.name"
@@ -12,22 +12,20 @@
       <FormTextArea v-model="form.description" label="Label Description" />
       <div class="modal-action">
         <div class="flex justify-center">
-          <BaseButton class="rounded-r-none" type="submit" :loading="loading" @click.prevent="create(true)">
-            Create
-          </BaseButton>
+          <BaseButton class="rounded-r-none" :loading="loading" type="submit"> Create </BaseButton>
           <div class="dropdown dropdown-top">
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
               <Icon class="h-5 w-5" name="mdi-chevron-down" />
             </label>
             <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
               <li>
-                <button @click.prevent="create(false)">Create and Add Another</button>
+                <button type="button" @click="create(false)">Create and Add Another</button>
               </li>
             </ul>
           </div>
         </div>
       </div>
-    </div>
+    </form>
     <p class="text-sm text-center mt-4">
       use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
     </p>
@@ -69,7 +67,13 @@
   const api = useUserApi();
   const toast = useNotifier();
 
-  async function create(close: boolean) {
+  const { shift } = useMagicKeys();
+
+  async function create(close = true) {
+    if (shift.value) {
+      close = false;
+    }
+
     const { error, data } = await api.labels.create(form);
     if (error) {
       toast.error("Couldn't create label");
@@ -84,16 +88,4 @@
       navigateTo(`/label/${data.id}`);
     }
   }
-
-  async function keySubmit(e: KeyboardEvent) {
-    // Shift + Enter
-    if (e.shiftKey && e.key === "Enter") {
-      e.preventDefault();
-      await create(false);
-      focused.value = true;
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      await create(true);
-    }
-  }
 </script>
diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index f87715a..d0dadbb 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseModal v-model="modal">
     <template #title> Create Location </template>
-    <div @keyup="keySubmit">
+    <form @submit.prevent="create()">
       <FormTextField
         ref="locationNameRef"
         v-model="form.name"
@@ -13,22 +13,20 @@
       <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <div class="flex justify-center">
-          <BaseButton class="rounded-r-none" type="submit" :loading="loading" @click="create(true)">
-            Create
-          </BaseButton>
+          <BaseButton class="rounded-r-none" type="submit" :loading="loading"> Create </BaseButton>
           <div class="dropdown dropdown-top">
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
               <Icon class="h-5 w-5" name="mdi-chevron-down" />
             </label>
             <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
               <li>
-                <button @click.prevent="create(false)">Create and Add Another</button>
+                <button type="button" @click="create(false)">Create and Add Another</button>
               </li>
             </ul>
           </div>
         </div>
       </div>
-    </div>
+    </form>
     <p class="text-sm text-center mt-4">
       use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
     </p>
@@ -71,9 +69,15 @@
   const api = useUserApi();
   const toast = useNotifier();
 
-  async function create(close: boolean) {
+  const { shift } = useMagicKeys();
+
+  async function create(close = true) {
     loading.value = true;
 
+    if (shift.value) {
+      close = false;
+    }
+
     const { data, error } = await api.locations.create({
       name: form.name,
       description: form.description,
@@ -94,16 +98,4 @@
       navigateTo(`/location/${data.id}`);
     }
   }
-
-  async function keySubmit(e: KeyboardEvent) {
-    // Shift + Enter
-    if (e.shiftKey && e.key === "Enter") {
-      e.preventDefault();
-      await create(false);
-      focused.value = true;
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      await create(true);
-    }
-  }
 </script>
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 5788d74..bc3273a 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -288,20 +288,22 @@
     <BaseModal v-model="passwordChange.dialog">
       <template #title> Change Password </template>
 
-      <FormPassword v-model="passwordChange.current" label="Current Password" />
-      <FormPassword v-model="passwordChange.new" label="New Password" />
-      <PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
+      <form @submit.prevent="changePassword">
+        <FormPassword v-model="passwordChange.current" label="Current Password" placeholder="" />
+        <FormPassword v-model="passwordChange.new" label="New Password" placeholder="" />
+        <PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
 
-      <div class="flex">
-        <BaseButton
-          class="ml-auto"
-          :loading="passwordChange.loading"
-          :disabled="!passwordChange.isValid"
-          @click="changePassword"
-        >
-          Submit
-        </BaseButton>
-      </div>
+        <div class="flex">
+          <BaseButton
+            class="ml-auto"
+            :loading="passwordChange.loading"
+            :disabled="!passwordChange.isValid"
+            type="submit"
+          >
+            Submit
+          </BaseButton>
+        </div>
+      </form>
     </BaseModal>
 
     <BaseModal v-model="notifierDialog">