125 lines
3.8 KiB
Vue
125 lines
3.8 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import VnLogo from 'components/ui/VnLogo.vue';
|
|
import axios from 'axios';
|
|
|
|
const route = useRoute();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const redirectButtons = ref([]);
|
|
|
|
onMounted(async () => {
|
|
const params = route?.query;
|
|
const { data } = await axios.get(`Urls/${params.userId}/get-by-user`);
|
|
|
|
redirectButtons.value.push({
|
|
color: 'bg-vnColor',
|
|
icon: new URL(`../../assets/vn_icon.svg`, import.meta.url).href,
|
|
text: 'goToShop',
|
|
url: data.find((url) => url.appName == 'hedera').url,
|
|
});
|
|
|
|
const urls = data.filter((url) => url.appName != 'hedera');
|
|
if (urls.length) {
|
|
for (const url of urls) {
|
|
redirectButtons.value.push({
|
|
color: 'bg-primary',
|
|
icon: new URL(`../../assets/${url.appName}_icon.svg`, import.meta.url)
|
|
.href,
|
|
text: 'logIn',
|
|
url: url.url,
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-gutter-y-xl q-pa-lg formCard flex flex-center">
|
|
<VnLogo
|
|
logo="vn"
|
|
alt="Logo"
|
|
fit="fill"
|
|
class="q-px-xl q-py-md q-mb-xl logoWidth"
|
|
/>
|
|
<div class="text-h4 vnColor text-center text-weight-medium">
|
|
{{ t('verifyEmail') }}
|
|
</div>
|
|
<div class="q-gutter-md flex flex-center">
|
|
<QBtn
|
|
:class="button.color"
|
|
v-for="button of redirectButtons"
|
|
:key="button.id"
|
|
:href="button.url"
|
|
>
|
|
<div class="row items-center no-wrap q-gutter-md">
|
|
<div class="circle q-pa-sm" style="background-color: var(--vn-gray)">
|
|
<QImg :src="button.icon" class="q-pa-md" />
|
|
</div>
|
|
<div class="text-h5" style="color: var(--vn-gray)">
|
|
{{ t(button.text) }}
|
|
</div>
|
|
</div>
|
|
</QBtn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"verifyEmail": "Your email has been successfully verified. You can now log in to enjoy all the features of our platform.",
|
|
"goToShop": "Go to the shop",
|
|
"logIn": "Log In"
|
|
},
|
|
"es": {
|
|
"verifyEmail": "Su correo electrónico ha sido verificado con éxito. Ahora puede iniciar sesión para disfrutar de todas las funcionalidades de nuestra plataforma.",
|
|
"goToShop": "Ir a la tienda",
|
|
"logIn": "Iniciar sesión"
|
|
},
|
|
"fr": {
|
|
"verifyEmail": "Votre courrier électronique a été vérifié avec succès. Vous pouvez maintenant vous connecter pour profiter de toutes les fonctionnalités de notre plateforme.",
|
|
"goToShop": "Aller à la boutique",
|
|
"logIn": "Se connecter"
|
|
},
|
|
"pt": {
|
|
"verifyEmail": "Seu e-mail foi verificado com sucesso. Agora você pode fazer o login para aproveitar todas as funcionalidades da nossa plataforma.",
|
|
"goToShop": "Ir para a loja",
|
|
"logIn": "Fazer login"
|
|
},
|
|
"it": {
|
|
"verifyEmail": "La tua email è stata verificata con successo. Ora puoi accedere per godere di tutte le funzionalità della nostra piattaforma.",
|
|
"goToShop": "Vai al negozio",
|
|
"logIn": "Accedi"
|
|
}
|
|
}
|
|
</i18n>
|
|
|
|
<style lang="scss">
|
|
.formCard {
|
|
max-width: 1500px;
|
|
min-width: 700px;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-xs-max) {
|
|
.formCard {
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
.vnColor {
|
|
color: $vnColor;
|
|
}
|
|
.bg-vnColor {
|
|
background-color: $vnColor;
|
|
}
|
|
.circle {
|
|
border-radius: 50%;
|
|
}
|
|
.logoWidth {
|
|
width: 50%;
|
|
}
|
|
</style>
|