﻿<template>
  <div class="flex flex-col items-center min-w-[300px] m-4">
    <h1 class="text-center text-2xl font-bold mb-5">Connexion</h1>

    <google-login class="w-full"
                  :callback="googleCallback"
                  popup-type="TOKEN">
      <v-btn density="comfortable" class="mb-2 w-full">
        <v-icon left>mdi-google</v-icon>
        Google
      </v-btn>
    </google-login>
    
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {useAuthStore} from '@/stores/authStore.js';
import {GoogleLogin} from "vue3-google-login";

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>
