add IdCard component (ongoing)

components/Contact.vue

@@ -43,7 +43,8 @@
 
         <v-row>
           <v-col cols="12" class="captcha-container">
-            <AltchaValidation />
+            <AltchaValidation v-if="!appStore.altchaPayload"/>
+            <v-card v-else class="pa-2">Captcha already verified</v-card>
             <v-checkbox
               v-model="honeyPotChecked"
               :rules="[validateCaptcha]"

components/IdCard.vue

@@ -0,0 +1,135 @@
+<template>
+  <v-card class="id-card">
+    <div
+      v-if="!appStore.altchaPayload"
+      class="skeleton-container"
+    >
+      <div class="skeleton">
+        <v-skeleton-loader
+          type="image"
+          :max-height="110"
+          boilerplate
+        />
+        <v-skeleton-loader
+          type="article"
+          :max-height="110"
+          boilerplate
+        />
+      </div>
+
+      <v-btn flat class="btn-show" @click="onClick">
+        <v-icon class="fas fa-eye" />
+      </v-btn>
+      <AltchaValidation
+        v-if="showCaptcha"
+        @verified="onVerified"
+      />
+    </div>
+
+    <div v-else>
+    </div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type { Ref } from '@vue/reactivity'
+import type { ComputedRef } from 'vue'
+
+const appStore = useAppStore()
+
+const downloadRequested: Ref<boolean> = ref(false)
+
+const showCaptcha: ComputedRef<boolean> = computed(() => {
+  return downloadRequested.value && !appStore.altchaPayload
+})
+
+const onClick = () => {
+  if (appStore.altchaPayload) {
+    submit()
+  } else {
+    downloadRequested.value = true
+  }
+}
+
+const onVerified = () => {
+  if (!downloadRequested.value) {
+    return
+  }
+  downloadRequested.value = false
+  setTimeout(() => {
+    submit()
+  }, 100)
+}
+
+const submit = async () => {
+  const url = 'https://api.ogene.fr/api/download-cv?payload=' + (appStore.altchaPayload ?? '');
+  window.open(url, '_blank');
+}
+</script>
+
+<style scoped lang="scss">
+  .id-card {
+    width: 280px;
+    height: 140px;
+    max-width: 280px;
+    max-height: 140px;
+    min-width: 280px;
+    min-height: 140px;
+    padding: 15px;
+  }
+
+  .skeleton {
+    display: flex;
+    flex-direction: row;
+
+    .v-skeleton-loader:first-child {
+      width: 40%;
+    }
+
+    .v-skeleton-loader {
+      width: 70%;
+
+      :deep(.v-skeleton-loader__image) {
+        max-height: 100%;
+      }
+
+      :deep(.v-skeleton-loader__article) {
+        max-height: 100%;
+      }
+
+      :deep(.v-skeleton-loader__heading) {
+        margin: 6px 16px;
+      }
+    }
+  }
+
+  .skeleton-container {
+    position: relative;
+    height: 100%;
+  }
+
+  .btn-show {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100% !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.5;
+
+    :deep(.v-icon) {
+      font-size: 28px;
+    }
+  }
+
+  altcha-widget {
+    position: absolute;
+    top: 15px; /* Ajustez cette valeur en fonction de la hauteur de votre bouton */
+    left: 30px;
+    background: rgb(var(--v-theme-surface));
+    border-radius: 4px;
+    z-index: 10;
+  }
+</style>

components/Topbar.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="topbar">
+    <IdCard />
+
+    <v-spacer />
+
     <div class="icon-links">
       <LanguageSelector class="mr-3" />
 
@@ -49,7 +53,6 @@
   flex-direction: row;
   margin: 0;
   padding: 18px;
-  justify-content: flex-end;
 
   @media (max-width: 1280px) {
     margin: 0 10%;