app/pages/helloasso/callback.vue

<!--
Page cible du callback après authentification via la mire d'autorisation HelloAsso

@see https://dev.helloasso.com/docs/mire-authorisation
-->
<template>
  <NuxtLayout name="blank">
    <v-app>
      <div
        v-if="!error"
        class="d-flex flex-column align-center justify-center fill-height theme-secondary"
      >
        <v-progress-circular indeterminate size="64" />
        <span class="mt-3"> {{ $t('please_wait') }}... </span>
      </div>

      <div v-else class="ma-4">
        <div>{{ $t('an_error_occured')}}</div>
        <div>{{ $t('please_contact_support')}}</div>
      </div>
    </v-app>
  </NuxtLayout>
</template>

<script setup lang="ts">
/**
 * Disable the default layout, the page will use the layout defined with <NuxtLayout />
 * @see https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis
 */
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useEntityManager } from '~/composables/data/useEntityManager'
import ConnectionRequest from '~/models/HelloAsso/ConnectionRequest'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'

definePageMeta({
  name: 'helloasso_callback_page',
  layout: false,
})

const organizationProfile = useOrganizationProfileStore()

const { em } = useEntityManager()

const route: RouteLocationNormalizedLoaded = useRoute()

if (!route.query.code) {
  throw new Error('Missing parameter')
}

const authorizationCode: Ref<string> = ref(route.query.code as string)

const connectionRequest: ConnectionRequest = em.newInstance(
  ConnectionRequest,
  {
    organizationId: organizationProfile.id,
    authorizationCode: authorizationCode.value,
  },
)

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

onMounted(async () => {
  try {
    await em.persist(connectionRequest)
  } catch (e) {
    error.value = true
    throw e
  }

  // Send a event to the parent window to notify the connection request has been created (in case SSE is not available)
  window.opener?.postMessage(
    { code: authorizationCode.value },
    window.location.origin,
  )

  // Close the popup
  window.close()
})
</script>

<style scoped lang="scss">
.background {
  background-color: var(--v-theme-secondary);
}
</style>