app/pages/helloasso.vue

<template>
  <LayoutContainer>
    <v-card>
      <v-row>
        <v-col cols="12" md="4" class="d-flex justify-center">
          <v-img src="/images/logos/Logo-HelloAsso.svg" class="logo" />
        </v-col>

        <v-col cols="12" md="8" class="presentation">
          {{ $t('helloasso_presentation') }}
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" class="d-flex justify-center align-center w-100 mt-6">
          <UiButtonHelloAssoConnect
            :disabled="status !== 'success'"
            @click="onHelloAssoConnectClicked"
          />
        </v-col>
      </v-row>
    </v-card>

    <!--    <v-dialog-->
    <!--      v-model="showDialog"-->
    <!--      :width="900"-->
    <!--      class="authDialog"-->
    <!--    >-->
    <!--      <v-card>-->
    <!--        <iframe-->
    <!--          :src="authUrl!.authUrl"-->
    <!--          height="600"-->
    <!--          frameborder="0"-->
    <!--        />-->
    <!--      </v-card>-->
    <!--    </v-dialog>-->
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import AuthUrl from '~/models/Custom/HelloAsso/AuthUrl'

const { fetch } = useEntityFetch()

const { data: authUrl, status } = fetch(AuthUrl)

const showDialog: Ref<boolean> = ref(true)

const onHelloAssoConnectClicked = () => {
  if (status.value !== 'success') {
    console.log('still pending')
  } else {
    console.log(authUrl)
    showDialog.value = true
    navigateTo(authUrl.value!.authUrl, { external: true })
  }
}
</script>

<style scoped lang="scss">
.v-card {
  padding: 48px;
  max-width: 70%;
  margin: 36px auto;

  @media (max-width: 600px) {
    max-width: 90%;
  }
}

.logo {
  max-width: 80%;
}

.presentation {
  border-left: 3px solid rgb(var(--v-theme-info));
  padding: 0 24px;
  color: rgb(var(--v-theme-on-neutral));
}

.authDialog {
  max-width: 90%;
}
</style>