Merge pull request #17 from radek00/modal

Modal

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

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    class="w-3 h-3"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 14 14"
+  >
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+    />
+  </svg>
+</template>

SecureSend/ClientApp/src/components/ConfirmModal.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import CloseIcon from "@/assets/icons/CloseIcon.vue";
+defineEmits(["closeClick"]);
+</script>
+
+<template>
+  <!-- Main modal -->
+  <div
+    tabindex="-1"
+    aria-hidden="true"
+    class="absolute h-screen w-screen flex items-center justify-center bg-gray-900/50"
+  >
+    <div class="relative w-full max-w-2xl max-h-full">
+      <!-- Modal content -->
+      <div class="relative rounded-lg shadow bg-gray-700">
+        <!-- Modal header -->
+        <div
+          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+        >
+          <h3 class="text-xl font-semibold text-white">
+            <slot name="header"></slot>
+          </h3>
+          <button
+            @click="$emit('closeClick')"
+            type="button"
+            class="text-gray-400 bg-transparent rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center hover:bg-gray-600 hover:text-white"
+          >
+            <CloseIcon></CloseIcon>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+
+        <div
+          class="p-6 space-y-6 overflow-x-hidden overflow-y-auto max-h-[200px]"
+        >
+          <p class="text-base leading-relaxed text-gray-400">
+            <slot name="body"></slot>
+          </p>
+        </div>
+
+        <!-- Modal footer -->
+        <div
+          class="flex items-center p-4 space-x-2 border-t rounded-b border-gray-600"
+        >
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

SecureSend/ClientApp/src/utils/composables/useConfirmDialog.ts

@@ -0,0 +1,56 @@
+import { type Ref, ref, computed, type ComputedRef } from "vue";
+
+export type UseConfirmDialogRevealResult<C, D> =
+  | {
+      data?: C;
+      isCanceled: false;
+    }
+  | {
+      data?: D;
+      isCanceled: true;
+    };
+
+export interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
+  isRevealed: ComputedRef<boolean>;
+  reveal: (
+    data?: RevealData
+  ) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>;
+  confirm: (data?: ConfirmData) => void;
+  cancel: (data?: CancelData) => void;
+}
+
+export function useConfirmDialog<ConfirmData, CancelData>(
+  revealed: Ref<boolean> = ref(false)
+) {
+  let _resolve: (
+    arg0: UseConfirmDialogRevealResult<ConfirmData, CancelData>
+  ) => void;
+
+  const reveal = () => {
+    revealed.value = true;
+
+    return new Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>(
+      (resolve) => {
+        _resolve = resolve;
+      }
+    );
+  };
+
+  const confirm = (data: ConfirmData) => {
+    revealed.value = false;
+
+    _resolve({ data, isCanceled: false });
+  };
+
+  const cancel = (data?: CancelData) => {
+    revealed.value = false;
+    _resolve({ data, isCanceled: true });
+  };
+
+  return {
+    isRevealed: computed(() => revealed.value),
+    reveal,
+    confirm,
+    cancel,
+  };
+}

SecureSend/ClientApp/src/views/FileUploadView.vue

@@ -37,6 +37,21 @@
       </StyledButton>
     </div>
   </div>
+  <ConfirmModalVue v-if="isRevealed" @close-click="confirm(true)">
+    <template #header>Share your files</template>
+    <template #body>
+      <SimpleInput
+        :value="createDownloadUrl()"
+        label="Share your files"
+        name="downloadUrl"
+      ></SimpleInput>
+    </template>
+    <template #footer>
+      <StyledButton @click="copyToClipboard()" :type="ButtonType.primary"
+        >Copy to clipboard</StyledButton
+      >
+    </template>
+  </ConfirmModalVue>
 </template>
 
 <script setup lang="ts">
@@ -51,17 +66,24 @@ import FileInput from "@/components/FileUploadForm/FileInput.vue";
 import FormStepper from "@/components/FileUploadForm/FormStepper.vue";
 import StyledButton from "@/components/FileUploadForm/StyledButton.vue";
 import { ButtonType } from "@/models/enums/ButtonType";
+import ConfirmModalVue from "@/components/ConfirmModal.vue";
+import { useConfirmDialog } from "@/utils/composables/useConfirmDialog";
+import SimpleInput from "@/components/SimpleInput.vue";
 
 interface IMappedFormValues {
   expiryDate: string;
   password: string;
 }
 
+const { isRevealed, reveal, confirm } = useConfirmDialog();
+
 const salt = crypto.getRandomValues(new Uint8Array(16));
 console.log(salt);
 let keychain: AuthenticatedSecretKeyCryptography;
 const step = ref<number>(0);
 
+let downloadUrl: string;
+
 const stepZeroschema = {
   password(value: string) {
     if (value) return true;
@@ -89,7 +111,7 @@ const getInitialValues = (): IMappedFormValues => {
   };
 };
 
-const { handleSubmit, meta } = useForm({
+const { handleSubmit, meta, resetForm } = useForm({
   validationSchema: currentSchema,
   initialValues: getInitialValues(),
   keepValuesOnUnmount: true,
@@ -102,11 +124,20 @@ const onSubmit = handleSubmit(async (values: IMappedFormValues) => {
     keychain = new AuthenticatedSecretKeyCryptography(values.password, salt);
     await keychain.start();
     await encryptFile();
-    alert(`Heres your link to share files: ${createDownloadUrl()}`);
+    const { data } = await reveal();
+    console.log(data);
+    if (data) {
+      resetForm({ values: getInitialValues() });
+      step.value = 0;
+      return;
+    }
+    console.log("dialog closed");
   }
   if (step.value < 2) step.value++;
 });
 
+const copyToClipboard = () => navigator.clipboard.writeText(downloadUrl);
+
 const uuid = self.crypto.randomUUID();
 const uploadStatus = ref<number>();
 
@@ -123,9 +154,10 @@ const onFilesChange = (event: any) => {
 
 const createDownloadUrl = () => {
   const base64Salt = btoa(String.fromCharCode.apply(null, salt as any));
-  return window.location
+  downloadUrl = window.location
     .toString()
     .concat(`download/${uuid}#${base64Salt}_${keychain.hash}`);
+  return downloadUrl;
 };
 
 const encryptFile = async () => {