site_logiciels/pages/shop/try/validation.vue

<template>
  <v-card>
    <div v-if="loading" class="text-center pa-8">
      <v-progress-circular indeterminate color="primary" />
      <p class="mt-4">Validation en cours...</p>
    </div>

    <div v-else-if="validationSuccess">
      <v-card-title class="text-center">
        <v-icon icon="fas fa-check mr-2" color="success" max-height="48" />
        Félicitations !
      </v-card-title>
      <v-card-text class="text-center">
        <p>Merci d'avoir validé votre demande.</p>
        <p>Votre compte est en cours de création.</p>
        <p>
          Vous recevrez un email dès que votre compte sera prêt à être utilisé.
        </p>
      </v-card-text>
      <v-card-actions class="justify-center">
        <v-btn color="primary" to="/opentalent-artist">
          Retour à la page Opentalent Artist
        </v-btn>
      </v-card-actions>
    </div>

    <div v-else class="text-center pa-8">
      <v-card-title class="text-center">
        <v-icon
          icon="fas fa-exclamation-triangle mr-2"
          color="warning"
          max-height="48"
        />
        Erreur de validation
      </v-card-title>
      <v-card-text class="text-center">
        <p class="error-message">
          {{ errorMsg }}
        </p>
        <p class="mt-4">
          Si le problème persiste, n'hésitez pas à nous contacter.
        </p>
      </v-card-text>
      <v-card-actions class="justify-center">
        <v-btn color="primary" to="/nous-contacter">Nous contacter</v-btn>
      </v-card-actions>
    </div>
  </v-card>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useNuxtApp } from '#app'
import { useAp2iRequestService } from '~/composables/data/useAp2iRequestService'

const route = useRoute()
const { ap2iRequestService } = useAp2iRequestService()

const loading = ref(true)
const validationSuccess = ref(false)
const errorMsg = ref(
  "Une erreur s'est produite lors de la validation de votre demande."
)

// UUID validation regex
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i

// Get token from query parameters
const token = computed(() => {
  const queryToken = route.query.token
  return typeof queryToken === 'string' ? queryToken : ''
})

// Validate token and make API request
onMounted(async () => {
  try {
    // Check if token is present
    if (!token.value) {
      errorMsg.value = "Aucun jeton de validation n'a été fourni."
      loading.value = false
      return
    }

    // Validate token format (UUID)
    if (!uuidRegex.test(token.value)) {
      errorMsg.value = 'Le format du jeton de validation est invalide.'
      loading.value = false
      return
    }

    // Make API request to validate token
    await ap2iRequestService.get('/api/public/shop/validate/' + token.value)

    // If we get here, the validation was successful
    validationSuccess.value = true
    loading.value = false
  } catch (error) {
    console.error('Error validating token:', error)

    // Try to extract the specific error message from the API response
    if (
      error &&
      typeof error === 'object' &&
      'data' in error &&
      error.data &&
      typeof error.data === 'object'
    ) {
      const errorData = error.data as { detail?: string }
      if (errorData.detail) {
        const { $i18n } = useNuxtApp()
        // Use translation if available, otherwise use the original message
        errorMsg.value = $i18n.t(errorData.detail) || errorData.detail
      }
    }

    loading.value = false
  }
})
</script>

<style scoped lang="scss">
.v-card {
  margin: 4rem 20%;
  padding: 2rem;
}

.v-card-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
}

.v-card-text {
  font-size: 1.1rem;
  line-height: 1.6;

  p {
    margin-bottom: 1rem;
  }
}

.error-message {
  color: var(--warning-color);
  font-weight: 500;
}
</style>