cv2/components/IdCard.vue

<template>
  <v-card class="id-card">
    <div
      v-if="!appStore.altchaPayload || !idCardData"
      class="skeleton-container"
    >
      <div class="layout">
        <v-skeleton-loader
          type="image"
          :max-height="110"
          boilerplate
        />
        <v-skeleton-loader
          type="article"
          :max-height="110"
          boilerplate
        />
      </div>

      <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"
      />
    </div>

    <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>

<script setup lang="ts">
import type { Ref } from '@vue/reactivity'
import type { ComputedRef } from 'vue'

interface IdCardData {
  photo: string,
  age: number,
  place: string,
  status: string
}

const appStore = useAppStore()

const { altchaPayload } = storeToRefs(appStore)

const downloadRequested: Ref<boolean> = ref(false)

const showCaptcha: ComputedRef<boolean> = computed(() => {
  return downloadRequested.value && !appStore.altchaPayload
})

const idCardData: Ref<IdCardData | null> = ref(null)

const onClick = () => {
  downloadRequested.value = true
}

watch(() => appStore.altchaPayload, () => {
  submit()
}, { immediate: false })

const submit = async () => {
  const url = 'https://api.ogene.fr/api/id-card?payload=' + encodeURI(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>

<style scoped lang="scss">
  .id-card {
    width: 280px;
    height: 140px;
    max-width: 280px;
    max-height: 140px;
    min-width: 280px;
    min-height: 140px;
    padding: 15px;
  }

  .layout {
    display: flex;
    flex-direction: row;

    >*:first-child {
      width: 40%;
    }

    >* {
      width: 70%;
    }

    .v-skeleton-loader {
      :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-overlay {
    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;
  }

  .details {
    font-size: 13px;

    >div {
      margin: 2px 0;
    }
  }
</style>