finalize id card

components/Contact.vue

@@ -44,7 +44,7 @@
         <v-row>
           <v-col cols="12" class="captcha-container">
             <AltchaValidation v-if="!appStore.altchaPayload"/>
-            <v-card v-else class="pa-2">Captcha already verified</v-card>
+            <v-card v-else class="pa-2">{{ $t('captcha_already_verified') }}</v-card>
             <v-checkbox
               v-model="honeyPotChecked"
               :rules="[validateCaptcha]"

components/IdCard.vue

@@ -1,10 +1,10 @@
 <template>
   <v-card class="id-card">
     <div
-      v-if="!appStore.altchaPayload"
+      v-if="!appStore.altchaPayload || !idCardData"
       class="skeleton-container"
     >
-      <div class="skeleton">
+      <div class="layout">
         <v-skeleton-loader
           type="image"
           :max-height="110"
@@ -17,16 +17,31 @@
         />
       </div>
 
-      <v-btn flat class="btn-show" @click="onClick">
+      <v-btn v-if="!appStore.altchaPayload" flat class="btn-overlay" @click="onClick">
         <v-icon class="fas fa-eye" />
       </v-btn>
+      <v-progress-circular v-else :indeterminate="true" class="btn-overlay" />
+
       <AltchaValidation
         v-if="showCaptcha"
         @verified="onVerified"
       />
     </div>
 
-    <div v-else>
+    <div v-else-if="idCardData">
+      <div class="layout">
+        <v-img
+          :src="'data:image/png;base64,' + idCardData.photo"
+          :height="110"
+        />
+
+        <div class="details">
+          <div>Olivier Massot</div>
+          <div>{{ idCardData.place }}</div>
+          <div>{{ $t('id_age', { years: idCardData.age }) }}</div>
+          <div>{{ $t(idCardData.status) }}</div>
+        </div>
+      </div>
     </div>
   </v-card>
 </template>
@@ -43,6 +58,15 @@ const showCaptcha: ComputedRef<boolean> = computed(() => {
   return downloadRequested.value && !appStore.altchaPayload
 })
 
+interface IdCardData {
+  photo: string,
+  age: number,
+  place: string,
+  status: string
+}
+
+const idCardData: Ref<IdCardData | null> = ref(null)
+
 const onClick = () => {
   if (appStore.altchaPayload) {
     submit()
@@ -62,8 +86,21 @@ const onVerified = () => {
 }
 
 const submit = async () => {
-  const url = 'https://api.ogene.fr/api/download-cv?payload=' + (appStore.altchaPayload ?? '');
-  window.open(url, '_blank');
+  const url = 'https://api.ogene.fr/api/id-card?payload=' + (appStore.altchaPayload ?? '');
+
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    idCardData.value = await response.json();
+  } catch (error) {
+    console.error('There was a problem with the fetch operation: ', error);
+  }
 }
 </script>
 
@@ -78,17 +115,19 @@ const submit = async () => {
     padding: 15px;
   }
 
-  .skeleton {
+  .layout {
     display: flex;
     flex-direction: row;
 
-    .v-skeleton-loader:first-child {
+    >*:first-child {
       width: 40%;
     }
 
-    .v-skeleton-loader {
+    >* {
       width: 70%;
+    }
 
+    .v-skeleton-loader {
       :deep(.v-skeleton-loader__image) {
         max-height: 100%;
       }
@@ -108,7 +147,7 @@ const submit = async () => {
     height: 100%;
   }
 
-  .btn-show {
+  .btn-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -132,4 +171,12 @@ const submit = async () => {
     border-radius: 4px;
     z-index: 10;
   }
+
+  .details {
+    font-size: 13px;
+
+    >div {
+      margin: 2px 0;
+    }
+  }
 </style>

lang/en.json

@@ -2,9 +2,11 @@
   "Fullstack developer": "Fullstack Developer",
   "x_years_experience": "{years} years experience",
   "x_years": "{years} years",
+  "id_age": "{years} years old",
+  "Civil partnership, 3 children": "Civil partnership, 3 children",
   "intro_short": "Trained as an engineer, fullstack developer, with managerial, system and Product Owner experience.",
-  "intro_part_1": "Since 2011, my professional journey has allowed me to develop very varied skills from a technical point of view : development, system administration, QA and continuous integration, database management, search engines..., but also from a managerial point of view : supervision, tutoring, agile management, collective intelligence, meeting animation.",
-  "intro_part_2": "I have been led to work with various services: water services, waste management, rural works, conservatories and music schools, telecom networks.",
+  "intro_part_1": "Since 2011, my professional journey has allowed me to develop very varied skills from a technical point of view : development, system administration, security, QA and continuous integration, database management, search engines..., but also from a managerial point of view : supervision, tutoring, agile management, collective intelligence, meeting animation.",
+  "intro_part_2": "I have been led to work with various services : water services, waste management, rural works, conservatories and music schools, telecom networks.",
   "intro_part_3": "I place great importance on the development of a team spirit, continuous improvement, and the realization of a thorough, tested, documented work.",
   "intro_part_4": "I currently maintain the open source libraries <a href='https://github.com/olinox14/path-php' target='_blank'>Path-PHP</a> and <a href='https://github.com/olinox14/xdice' target='_blank'>xdice</a>, and I'm the author of the (unmaintained) <a href='https://github.com/olinox14/FullMd' target='_blank'>FullMD</a> library.",
   "find_me_on": "Find me on",
@@ -42,5 +44,6 @@
   "anti-bot-test": "Anti-bot check",
   "email_must_be_valid": "Email adress shall be valid",
   "message_must_be_valid": "Message is too short (10 characters minimum)",
-  "captcha_must_be_validated": "Catcha shall be validated"
+  "captcha_must_be_validated": "Catcha shall be validated",
+  "captcha_already_verified": "Captcha already verified."
 }

lang/fr.json

@@ -2,9 +2,11 @@
   "Fullstack developer": "Développeur Fullstack",
   "x_years_experience": "{years} ans d'expérience",
   "x_years": "{years} ans",
+  "id_age": "{years} ans",
+  "Civil partnership, 3 children": "Pacsé, 3 enfants",
   "intro_short": "Ingénieur de formation et développeur fullstack, j'ai aussi une expérience sérieuse dans les domaines du management, de l'administration système et du PO.",
-  "intro_part_1": "Depuis 2011, mon parcours professionnel m'a permis de développer des compétences très variées, tant d'un point de vue technique: développement, administration système, QA et intégration continue, gestion de bases de données, moteurs de recherche..., que d'un point de vue managérial: encadrement, tutorat, management agile, intelligence collective, animation de réunion.",
-  "intro_part_2": "J'ai été amené à travailler avec des services de natures diverses: services des eaux, gestion des déchets, travaux ruraux, conservatoires et écoles de musique, réseaux telecom.",
+  "intro_part_1": "Depuis 2011, mon parcours professionnel m'a permis de développer des compétences très variées, tant d'un point de vue technique : développement, administration système, sécurité, QA et intégration continue, gestion de bases de données, moteurs de recherche..., que d'un point de vue managérial : encadrement, tutorat, management agile, intelligence collective, animation de réunion.",
+  "intro_part_2": "J'ai été amené à travailler avec des services de natures diverses : services des eaux, gestion des déchets, travaux ruraux, conservatoires et écoles de musique, réseaux telecom.",
   "intro_part_3": "J'accorde beaucoup d'importance au développement d'un esprit d'équipe, à l'amélioration continue, et à la réalisation d'un travail abouti, testé, documenté.",
   "intro_part_4": "Je maintiens actuellement les librairies opensource <a href='https://github.com/olinox14/path-php' target='_blank'>Path-PHP</a> et <a href='https://github.com/olinox14/xdice' target='_blank'>xdice</a>, et suis l'auteur de la librairie (non-maintenue) <a href='https://github.com/olinox14/FullMd' target='_blank'>FullMD</a>.",
   "find_me_on": "Retrouvez moi sur",
@@ -42,5 +44,6 @@
   "anti-bot-test": "Contrôle anti-robots",
   "email_must_be_valid": "L'adresse e-mail doit être valide",
   "message_must_be_valid": "Le message est trop court (10 caractères minimum)",
-  "captcha_must_be_validated": "Le Captcha doit être validé"
+  "captcha_must_be_validated": "Le Captcha doit être validé",
+  "captcha_already_verified": "Captcha déja vérifié."
 }