finalize download pdf cv component

components/DownloadPdfBtn.client.vue

@@ -1,75 +1,63 @@
 <template>
-  <v-btn :disabled="true" variant="outlined" @click="onClick">
-    {{$t('download_pdf')}}
-  </v-btn>
+  <div class="btn-wrapper">
+    <v-btn variant="outlined" @click="onClick">
+      {{ $t('download_pdf') }}
+    </v-btn>
+    <AltchaValidation
+      v-if="showCaptcha"
+      @verified="onVerified"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { target } from '@vue/devtools-shared'
+import type { Ref } from '@vue/reactivity'
+import type { ComputedRef } from 'vue'
 
 const appStore = useAppStore()
 
-const onClick = async () => {
-  // if (appStore.altchaPayload) {
-    await submit()
-  // } else {
-  //   console.log('missing payload')
-  // }
-}
-
-const submit = async () => {
-  const url = 'https://api.ogene.fr/api/download-cv';
-  const headers = {
-    'Content-Type': 'application/ld+json'
-  };
-  const body = {
-    "altchaPayload": appStore.altchaPayload
-  };
-
-  // try {
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: headers,
-      body: JSON.stringify(body)
-    });
-
-    const base64 = await toBase64(await response.text())
-    const binary = atob(base64.split(',')[1]);
-
-    const array = [];
-    for (let i = 0; i < binary.length; i++) {
-      array.push(binary.charCodeAt(i));
-    }
+const downloadRequested: Ref<boolean> = ref(false)
 
-    // Create a blob object
-    const blob = new Blob([new Uint8Array(array)], { type: 'application/pdf' });
+const showCaptcha: ComputedRef<boolean> = computed(() => {
+  return downloadRequested.value && !appStore.altchaPayload
+})
 
-    const blobUrl = URL.createObjectURL(blob);
-
-    window.open(blobUrl, '_blank');
-  // } catch (error) {
-  //   console.error('There was a problem with the fetch operation: ', error);
-  // }
-}
-
-const newBlob = (data: BlobPart, filetype: string = 'image/jpeg'): Blob => {
-  return new Blob([data], { type: filetype })
+const onClick = () => {
+  if (appStore.altchaPayload) {
+    submit()
+  } else {
+    downloadRequested.value = true
+  }
 }
 
-const blobToBase64 = async (blob: Blob): Promise<string> => {
-  return new Promise((resolve, _reject) => {
-    const reader = new FileReader()
-    reader.onloadend = () => resolve(reader.result as string)
-    reader.readAsDataURL(blob)
-  })
+const onVerified = () => {
+  if (!downloadRequested.value) {
+    return
+  }
+  downloadRequested.value = false
+  setTimeout(() => {
+    submit()
+  }, 100)
 }
 
-const toBase64 = async (data: BlobPart) => {
-  const blob = newBlob(data)
-  return (await blobToBase64(blob)) ?? ''
+const submit = async () => {
+  const url = 'https://api.ogene.fr/api/download-cv?payload=' + (appStore.altchaPayload ?? '');
+  window.open(url, '_blank');
 }
 </script>
 
 <style scoped lang="scss">
+.btn-wrapper {
+  position: relative;
+  margin: 0 !important;
+}
 
+altcha-widget {
+  position: absolute;
+  top: 50px; /* Ajustez cette valeur en fonction de la hauteur de votre bouton */
+  left: 0;
+  background: rgb(var(--v-theme-surface));
+  border-radius: 4px;
+  z-index: 10;
+}
 </style>

pages/index.vue

@@ -179,7 +179,7 @@ const showLongIntro: Ref<boolean> = ref(false)
     flex-direction: row;
     justify-content: center;
 
-    .v-btn {
+    :deep(.v-btn) {
       margin: 6px 24px;
       width: 160px;
       border-radius: 18px;
@@ -190,7 +190,7 @@ const showLongIntro: Ref<boolean> = ref(false)
       flex-direction: column;
       align-items: center;
 
-      .v-btn {
+      :deep(.v-btn) {
         margin: 12px auto;
       }
     }