Merge pull request #37 from radek00/keyboard-navigation

Better support for keyboard navigation
radek00 · Oct 18, 2023 · 6e3f2a8 · 6e3f2a8
2 parents 0eb869a + 51ec7a0
commit 6e3f2a8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/SecureSend/ClientApp/src/components/StyledButton.vue b/SecureSend/ClientApp/src/components/StyledButton.vue
@@ -1,14 +1,13 @@
 <template>
   <button
-    type="submit"
     class="text-white focus:ring-4 focus:enabled::outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center disabled:cursor-not-allowed disabled:bg-gray-700"
     :class="{
       'bg-blue-600 hover:enabled::bg-blue-700 focus:enabled:ring-blue-800 hover:enabled:bg-blue-800':
-        type === ButtonType.primary,
+        category === ButtonType.primary,
       'bg-gray-800 hover:enabled:bg-gray-900 focus:enabled:ring-gray-700':
-        type === ButtonType.back,
+        category === ButtonType.back,
       'bg-red-600 hover:bg-red-700 focus:ring-red-900':
-        type === ButtonType.cancel,
+        category === ButtonType.cancel,
     }"
   >
     <slot>Submit</slot>
@@ -19,6 +18,6 @@
 import { ButtonType } from "@/models/enums/ButtonType";
 
 defineProps<{
-  type: ButtonType;
+  category: ButtonType;
 }>();
 </script>
diff --git a/SecureSend/ClientApp/src/views/FileDownloadView.vue b/SecureSend/ClientApp/src/views/FileDownloadView.vue
@@ -110,7 +110,7 @@ const isPasswordValidComputed = computed(
             errorMessage="Invalid password"
           ></SimpleInput>
         </div>
-        <StyledButton @click="verifyPassword()" :type="ButtonType.primary"
+        <StyledButton @click="verifyPassword()" :category="ButtonType.primary"
           >Unlock</StyledButton
         >
       </div>

diff --git a/SecureSend/ClientApp/src/views/FileUploadView.vue b/SecureSend/ClientApp/src/views/FileUploadView.vue
@@ -1,5 +1,6 @@
 <template>
-  <div
+  <form
+    @submit="onSubmit"
     class="w-11/12 lg:w-6/12 flex flex-col justify-between gap-4 h-11/12 p-6 border rounded-lg shadow bg-gray-800 border-gray-800"
   >
     <FormStepper class="px-[10px]" :step="step"></FormStepper>
@@ -12,7 +13,6 @@
         :style="{ transform }"
       >
         <SchemaInput
-          @keyup.enter="onSubmit"
           name="password"
           type="password"
           label="Encryption password"
@@ -30,7 +30,6 @@
       >
         <SchemaInput
           :tabindex="step !== 1 ? -1 : 0"
-          @keyup.enter="onSubmit"
           name="expiryDate"
           type="date"
           label="Expiry date"
@@ -61,25 +60,27 @@
     >
       <div class="flex gap-3 flex-col md:flex-row w-full md:w-auto md:gap-2">
         <StyledButton
+          type="button"
           class="w-full md:w-auto"
-          :type="ButtonType.primary"
+          :category="ButtonType.primary"
           :disabled="step === 0 || isLoading || isUploadSetup"
           @click="step -= 1"
           >Back</StyledButton
         >
         <StyledButton
+          type="button"
           :disabled="(step === 0 && !meta.dirty) || isLoading"
-          :type="ButtonType.cancel"
+          :category="ButtonType.cancel"
           class="w-full md:w-auto"
           @click="formReset()"
           >Reset</StyledButton
         >
       </div>
       <StyledButton
         class="w-full md:w-auto"
-        :type="ButtonType.primary"
+        :category="ButtonType.primary"
         :disabled="!meta.valid || isLoading"
-        @click="onSubmit()"
+        type="submit"
       >
         <span class="flex items-center justify-center">
           {{ step < 2 ? "Next" : "Upload" }}
@@ -90,7 +91,7 @@
         </span>
       </StyledButton>
     </div>
-  </div>
+  </form>
   <ConfirmModalVue v-if="isRevealed" @close-click="confirm(true)">
     <template #header>Share your files</template>
     <template #body>
@@ -101,7 +102,7 @@
       ></SimpleInput>
     </template>
     <template #footer>
-      <StyledButton @click="copyToClipboard()" :type="ButtonType.primary"
+      <StyledButton @click="copyToClipboard()" :category="ButtonType.primary"
         >Copy to clipboard</StyledButton
       >
     </template>