Mobile dropdown and improvements

SecureSend/ClientApp/src/assets/icons/ExpandIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    class="w-5 h-5 relative"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 16 3"
+  >
+    <path
+      d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"
+    />
+  </svg>
+</template>

SecureSend/ClientApp/src/components/FileCard.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="w-auto p-6 borde rounded-lg shadow bg-gray-800 border-gray-700">
     <div class="flex w-full gap-4 items-center">
-      <div>
+      <div class="hidden sm:block">
         <FileIcon></FileIcon>
       </div>
       <div class="flex-1 min-w-0">
-        <div class="flex justify-between gap-2 items-center">
-          <div class="flex-1 min-w-0">
+        <div class="flex justify-between gap-2 items-center flex-wrap">
+          <div class="w-full sm:flex-1 sm:w-auto md:min-w-0">
             <p class="truncate">{{ fileName }}</p>
           </div>
           <p v-if="size">{{ fileSize(size) }}</p>

SecureSend/ClientApp/src/components/FileUploadForm/FileInput.vue

@@ -12,6 +12,7 @@ import { inject } from "vue";
 import CloseIcon from "@/assets/icons/CloseIcon.vue";
 import PauseIcon from "@/assets/icons/PauseIcon.vue";
 import PlayIcon from "@/assets/icons/PlayIcon.vue";
+import OptionsDropdown from "@/components/OptionsDropdown.vue";
 
 const emit = defineEmits<{
   onFielsChange: [files: File[] | null];
@@ -83,12 +84,12 @@ const { isOverDropZone } = useDropZone(fileDropZone, { onDrop });
             v-if="!isLoading && value !== true"
             @click="emit('onFileRemove', key)"
             type="button"
-            class="m-0 border hover:enabled:bg-red-700 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center mr-2 border-red-500 hover:enabled:text-white focus:ring-red-800 hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-gray-600 disabled:border-gray-800"
+            class="hidden md:block m-0 border hover:enabled:bg-red-700 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center mr-2 border-red-500 hover:enabled:text-white focus:ring-red-800 hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-gray-600 disabled:border-gray-800"
           >
             <TrashIcon class="w-5 h-3"></TrashIcon>
             <span class="sr-only">Remove file</span>
           </button>
-          <div v-if="isLoading" class="flex gap-1 justify-between">
+          <div v-if="isLoading" class="hidden md:flex gap-1 justify-between">
             <button
               @click="emit('onCancel', key)"
               type="button"
@@ -120,6 +121,35 @@ const { isOverDropZone } = useDropZone(fileDropZone, { onDrop });
             </button>
           </div>
 
+          <div class="block md:hidden">
+            <OptionsDropdown>
+              <li
+                class="px-4 py-2 hover:bg-gray-600 hover:text-white"
+                v-if="!isLoading && value !== true"
+              >
+                <a href="#" @click="emit('onFileRemove', key)">Remove</a>
+              </li>
+              <li
+                class="px-4 py-2 hover:bg-gray-600 hover:text-white"
+                v-if="isUploadSetup"
+              >
+                <a href="#" @click="emit('onCancel', key)">Cancel</a>
+              </li>
+              <li
+                class="px-4 py-2 hover:bg-gray-600 hover:text-white"
+                v-if="isUploadSetup && value !== UploadStatus.paused"
+              >
+                <a href="#" @click="emit('onPause', key)">Pause</a>
+              </li>
+              <li
+                class="px-4 py-2 hover:bg-gray-600 hover:text-white"
+                v-if="isUploadSetup && value === UploadStatus.paused"
+              >
+                <a href="#" @click="emit('onResume', key)">Resume</a>
+              </li>
+            </OptionsDropdown>
+          </div>
+
           <LoadingIndicator
             v-if="value === 100"
             class="w-8 h-5 mr-2"

SecureSend/ClientApp/src/components/OptionsDropdown.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    @click="isExpanded = !isExpanded"
+    class="inline-flex items-center p-2 text-sm font-medium text-center rounded-lg focus:ring-4 focus:outline-none text-white focus:ring-gray-50 bg-gray-800 hover:bg-gray-700"
+    type="button"
+  >
+    <ExpandIcon></ExpandIcon>
+  </button>
+  <div
+    v-if="isExpanded"
+    id="dropdown"
+    class="z-10 absolute divide-y divide-gray-100 rounded-lg shadow w-auto bg-gray-900"
+  >
+    <ul
+      class="py-2 text-sm text-gray-200"
+      aria-labelledby="dropdownDefaultButton"
+    >
+      <slot></slot>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import ExpandIcon from "@/assets/icons/ExpandIcon.vue";
+
+const isExpanded = ref<boolean>(false);
+</script>

SecureSend/ClientApp/src/components/StyledButton.vue

@@ -1,7 +1,7 @@
 <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-600"
+    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,

SecureSend/ClientApp/src/main.ts

@@ -13,7 +13,8 @@ const isLoading = ref<boolean>(false);
 
 app.provide("isLoading", isLoading);
 
-app.config.errorHandler = () => {
+app.config.errorHandler = (err) => {
+  if (import.meta.env.DEV) console.log(err);
   isLoading!.value = false;
   openDanger("Something went wrong");
 };

SecureSend/ClientApp/src/utils/AuthenticatedSecretKeyCryptography.ts

@@ -21,8 +21,8 @@ export default class AuthenticatedSecretKeyCryptography {
   private readonly requirePassword: boolean;
 
   constructor(
-    salt: Uint8Array,
     password?: encryptionKey,
+    salt = crypto.getRandomValues(new Uint8Array(16)),
     tagLengthInBytes = AuthenticatedSecretKeyCryptography.TAG_LENGTH_IN_BYTES
   ) {
     this.tagLengthInBytes = tagLengthInBytes;
@@ -175,4 +175,8 @@ export default class AuthenticatedSecretKeyCryptography {
     this.hash = generateHash(this.keyData, this.salt);
     return this.hash;
   }
+
+  getSalt() {
+    return this.salt;
+  }
 }

SecureSend/ClientApp/src/utils/streams/StreamDecryptor.ts

@@ -5,7 +5,7 @@ export default class StreamDecryptor {
   private readonly keychain: AuthenticatedSecretKeyCryptography;
 
   constructor(masterKey: encryptionKey, salt: Uint8Array) {
-    this.keychain = new AuthenticatedSecretKeyCryptography(salt, masterKey);
+    this.keychain = new AuthenticatedSecretKeyCryptography(masterKey, salt);
   }
 
   public async transform(