47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<script setup>
|
|
import {ref} from 'vue';
|
|
import {GoogleLogin} from "vue3-google-login";
|
|
import {useAuthStore} from '@/stores/authStore.js';
|
|
import {useTranslations} from '@/translations/translations';
|
|
|
|
const t = useTranslations();
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
const errorSnackBar = ref(false);
|
|
|
|
async function googleCallback(token) {
|
|
const response = await authStore.loginWithGoogle(JSON.stringify(token));
|
|
if (response !== true) {
|
|
errorSnackBar.value = true;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex min-h-full justify-center items-center p-20 w-full">
|
|
<div class="card justify-items-center">
|
|
<img :alt="t('alt')"
|
|
src="/images/hutopymedia/loginpage/hutopylogin.svg"/>
|
|
<div class="flex flex-col gap-10">
|
|
<h1 class="text-2xl font-bold login-text text-center ">
|
|
{{ t('title') }}
|
|
</h1>
|
|
<div class="flex flex-col gap-4">
|
|
<google-login :callback="googleCallback"
|
|
popup-type="TOKEN">
|
|
<button class="secondary">
|
|
<v-icon left>mdi-google</v-icon>
|
|
Google
|
|
</button>
|
|
</google-login>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|