Add useCsrfToken composable

frontend/components/SubmitAnalysis.vue

@@ -6,7 +6,7 @@ import { useField, useForm } from "vee-validate";
 // import { toTypedSchema } from '@vee-validate/yup';
 
 const router = useRouter();
-const csrfToken = useCookie("csrftoken");
+// const csrfToken = useCookie("csrftoken");
 const workflowSubmissionPending = ref(false);
 const uppyComponentRef = ref(null)
 // const genome = ref<any>(null)
@@ -31,9 +31,6 @@ const { meta, handleSubmit } = useForm({
 const analysisName = useField<string>("analysisName");
 const files = useField("files");
 
-console.log(analysisName)
-
-
 const submit = handleSubmit(async (values) => {
   workflowSubmissionPending.value = true;
   if (uppyComponentRef.value) {
@@ -82,7 +79,7 @@ const submit = handleSubmit(async (values) => {
       <v-card-text>
         <v-text-field v-model="analysisName.value.value" clearable label="Name" variant="outlined" :counter="50"
           :error-messages="analysisName.errorMessage.value"></v-text-field>
-        <UppyGenomeUpload v-model="files.value.value" :analysis-name="analysisName.value.value" :csrf-token="csrfToken"
+        <UppyGenomeUpload v-model="files.value.value" :analysis-name="analysisName.value.value"
           ref="uppyComponentRef" />
       </v-card-text>
       <v-card-actions>

frontend/components/UppyGenomeUpload.vue

@@ -3,7 +3,6 @@
 // import DragDrop from '@uppy/vue/lib/drag-drop.js'
 // import StatusBar from '@uppy/vue/lib/status-bar.js'
 import { Dashboard, DragDrop } from '@uppy/vue';
-console.log(DragDrop)
 import Uppy from '@uppy/core';
 import XHR from '@uppy/xhr-upload';
 // import Form from '@uppy/form';
@@ -16,10 +15,12 @@ import XHR from '@uppy/xhr-upload';
 import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
 import '@uppy/drag-drop/dist/style.css';
+import { useCsrfToken } from "@/composables/useCsrfToken"
 // import '@uppy/progress-bar/dist/style.css';
 // import '@uppy/status-bar/dist/style.css';
-const props = defineProps(['modelValue', 'csrfToken', 'analysisName'])
+const props = defineProps(['modelValue', 'analysisName'])
 const emit = defineEmits(['update:modelValue'])
+const { csrfToken } = await useCsrfToken()
 const uppyCovar = new Uppy({
     autoProceed: false,
     restrictions: { maxFileSize: 10000000 },
@@ -31,7 +32,7 @@ const uppyCovar = new Uppy({
         fieldName: "genomefile",
         formData: true,
         method: "POST",
-        headers: { "X-CSRFToken": props.csrfToken },
+        headers: { "X-CSRFToken": csrfToken.value },
     })
     // .use(Form, {
     //     target: '#form-upload-genome',

frontend/composables/useCsrfToken.ts

+export const useCsrfToken = async () => {
+    console.log('dans use csrfTken')
+    const csrfToken = useCookie('csrftoken')
+    const pending = ref()
+    const error = ref()
+    console.log(csrfToken.value)
+    if (!csrfToken.value) {
+        console.log("no csrf token")
+        const { data, error: errorCsrf, pending: pendingCsrf } = await useFetch<{ token: string }>(
+            "/api/analysis/csrf")
+        console.log(data.value)
+        if (data.value) {
+            csrfToken.value = data.value.token
+        }
+        error.value = errorCsrf
+        pending.value = pendingCsrf
+    }
+
+    return { csrfToken, pending, error }
+}   
\ No newline at end of file

frontend/composables/useFetchAnalysis.ts

@@ -31,9 +31,6 @@ export const useFetchAnalysis = async (analysisId: number, interval = 5000, poll
     const pause = ref<Fn | null>(null)
     const resume = ref<Fn | null>(null)
     const isActive = ref<Boolean | null>(null)
-
-    console.log("dans le composable")
-    console.log(analysisId)
     const {
         data,
         error,
@@ -43,9 +40,7 @@ export const useFetchAnalysis = async (analysisId: number, interval = 5000, poll
         `/api/analysis/${analysisId}`,
 
     );
-    console.log("dansns s")
     if (polling) {
-        console.log("he staret un polling")
         // Start a polling function to get invocation updates
         const { pause: pausePolling, resume: resumePolling, isActive: isPollingActive } = useIntervalFn(() => {
             if (!pending.value) {

frontend/pages/index.vue

-<script setup lang="ts">
-const { data } = await useFetch<{ token: string }>("/api/analysis/csrf")
-console.log(data.value)
-const title = ref("Defense Finder");
-if (data.value) {
-  const csrftoken = useCookie('csrftoken')
-  csrftoken.value = data.value.token
-}
-</script>
+
 <template>
   <v-card flat>
     <v-card-title>{{ title }}</v-card-title>