From e1efd3faddea2e184c4d1db68938cbb2d1e15ffd Mon Sep 17 00:00:00 2001
From: Liam Keegan <liam@keegan.ch>
Date: Mon, 21 Oct 2024 11:48:01 +0200
Subject: [PATCH] Add conditions of use modal

- when user clicks submit, modal opens that displays conditions of use with a checkbox and submit button
- user needs to check "I agree to the conditions of use" to enable submit button
- resolves #12
---
 frontend/src/components/AccountComponent.vue | 10 +++---
 frontend/src/views/SamplesView.vue           | 33 +++++++++++++++++++-
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/AccountComponent.vue b/frontend/src/components/AccountComponent.vue
index d4cd7c0..0240c5a 100644
--- a/frontend/src/components/AccountComponent.vue
+++ b/frontend/src/components/AccountComponent.vue
@@ -3,7 +3,7 @@ import { ref, computed } from "vue";
 import { apiClient, logout } from "@/utils/api-client";
 import { validate_password } from "@/utils/validation";
 import { useUserStore } from "@/stores/user";
-import ListItem from "@/components/ListItem.vue";
+import CardComponent from "@/components/CardComponent.vue";
 import { FwbInput, FwbButton, FwbAlert } from "flowbite-vue";
 const userStore = useUserStore();
 const current_email = ref("");
@@ -51,7 +51,7 @@ function do_change_password() {
 </script>
 
 <template v-if="userStore.user != null">
-  <ListItem title="My account">
+  <CardComponent title="My account">
     <p>You are currently logged in as {{ current_email }}</p>
     <p>
       <fwb-button
@@ -64,8 +64,8 @@ function do_change_password() {
         Logout
       </fwb-button>
     </p>
-  </ListItem>
-  <ListItem title="Change password">
+  </CardComponent>
+  <CardComponent title="Change password">
     <fwb-input
       v-model="current_password"
       label="Current password"
@@ -128,5 +128,5 @@ function do_change_password() {
     <fwb-alert type="info" v-if="response_message.length > 0">
       {{ response_message }}
     </fwb-alert>
-  </ListItem>
+  </CardComponent>
 </template>
diff --git a/frontend/src/views/SamplesView.vue b/frontend/src/views/SamplesView.vue
index 6a03f05..7370438 100644
--- a/frontend/src/views/SamplesView.vue
+++ b/frontend/src/views/SamplesView.vue
@@ -11,6 +11,8 @@ import {
   FwbFileInput,
   FwbInput,
   FwbAlert,
+  FwbModal,
+  FwbCheckbox,
 } from "flowbite-vue";
 
 const tumor_types = [
@@ -25,6 +27,16 @@ const sources = [
 ];
 const required_columns = ["barcode", "cdr3", "chain"];
 
+function closeModalSubmit() {
+  agree_to_conditions.value = false;
+  showModalSubmit.value = false;
+}
+function openModalSubmit() {
+  showModalSubmit.value = true;
+}
+const showModalSubmit = ref(false);
+const agree_to_conditions = ref(false);
+
 const sample_name = ref("");
 const tumor_type = ref("lung");
 const source = ref("TIL");
@@ -162,6 +174,7 @@ function add_sample() {
       }
       new_sample_error_message.value = error.response.data.message;
     });
+  closeModalSubmit();
   sample_name.value = "";
   selected_h5_file.value = null;
   h5_file_input_key.value++;
@@ -225,7 +238,7 @@ function add_sample() {
               class="mb-2"
             />
             <fwb-button
-              @click="add_sample"
+              @click="openModalSubmit"
               :disabled="
                 selected_h5_file === null ||
                 selected_csv_file === null ||
@@ -253,4 +266,22 @@ function add_sample() {
       </ListItem>
     </ListComponent>
   </main>
+
+  <fwb-modal size="md" v-if="showModalSubmit" @close="closeModalSubmit">
+    <template #header>
+      <div class="flex items-center text-lg">Conditions of use</div>
+    </template>
+    <template #body>
+      This service is provided for non-commercial use only, and is not to be
+      used for training models.
+      <fwb-checkbox
+        v-model="agree_to_conditions"
+        label="I agree to the conditions of use"
+        class="py-4"
+      />
+      <fwb-button @click="add_sample" :disabled="!agree_to_conditions"
+        >Submit</fwb-button
+      >
+    </template>
+  </fwb-modal>
 </template>