|
|
@@ -6,40 +6,80 @@
|
|
|
<v-img src="/images/logos/Logo-HelloAsso.svg" class="logo" />
|
|
|
</v-col>
|
|
|
|
|
|
- <v-col cols="12" md="8">
|
|
|
+ <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 @click="onHelloAssoConnectClicked"/>
|
|
|
+ <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 = () => {
|
|
|
- console.log('helloasso connect clicked')
|
|
|
+ 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%;
|
|
|
- }
|
|
|
- }
|
|
|
+.v-card {
|
|
|
+ padding: 48px;
|
|
|
+ max-width: 70%;
|
|
|
+ margin: 36px auto;
|
|
|
|
|
|
- .logo {
|
|
|
- max-width: 80%;
|
|
|
+ @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>
|