114 lines
3.6 KiB
Vue
114 lines
3.6 KiB
Vue
<template>
|
|
<div class="hidden sm:block" style="height: 40px"></div>
|
|
|
|
<div>
|
|
<div class="flex flex-col lg:flex-row items-center justify-center">
|
|
<div class="max-w-[700px] min-w-[300px]">
|
|
<img class="rounded-none sm:rounded-2xl sm:w-full mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center min-w-[300px] m-12">
|
|
<h1 class="text-center text-2xl font-bold mb-5">Connexion</h1>
|
|
|
|
<google-login class="w-full" :callback="googleCallback" popup-type="TOKEN">
|
|
<template #default>
|
|
<v-btn density="comfortable" class="mb-2 w-full">
|
|
<v-icon left>mdi-google</v-icon>
|
|
Google
|
|
</v-btn>
|
|
</template>
|
|
</google-login>
|
|
|
|
<!-- <v-btn density="comfortable" class="mb-2 w-full">-->
|
|
<!-- <v-icon left>mdi-facebook</v-icon>-->
|
|
<!-- Facebook-->
|
|
<!-- </v-btn>-->
|
|
|
|
<div class="w-full h-0.5 mt-4 mb-4" :style="{ backgroundColor: '#A30E79' }"></div>
|
|
|
|
<v-btn density="comfortable" class="mb-2 w-full" @click="showEmailForm = !showEmailForm">
|
|
<v-icon left>mdi-account</v-icon>
|
|
Utilisateur
|
|
</v-btn>
|
|
|
|
<div v-if="showEmailForm" class="w-full mt-2">
|
|
<v-text-field v-model="user.email"
|
|
label="Courriel"
|
|
variant="outlined"
|
|
dense
|
|
prepend-inner-icon="mdi-email"
|
|
color="transparent"
|
|
class="text-black"
|
|
></v-text-field>
|
|
|
|
<v-text-field v-model="user.password"
|
|
label="Mot de passe"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
variant="outlined"
|
|
dense
|
|
prepend-inner-icon="mdi-lock"
|
|
append-inner-icon="mdi-eye"
|
|
@click:append-inner="showPassword = !showPassword"
|
|
color="transparent"
|
|
class="text-black"
|
|
></v-text-field>
|
|
|
|
<v-btn class="w-full text-center text-white" :style="{ backgroundColor: '#A30E79' }" @click="login">Connecter</v-btn>
|
|
|
|
<p class="mt-4 text-sm text-center">
|
|
Si vous n'avez pas de compte, <a href="/register" class="text-blue-500">cliquez ici</a> pour en créer un.
|
|
</p>
|
|
|
|
<div v-if="errorSnackBar" class="mb-4 text-red-600">
|
|
Nom d'utilisateur ou mot de passe invalide.
|
|
<button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<selected-footer></selected-footer>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useClient } from "@/plugins/api.js";
|
|
import { auth } from '@/stores/auth.js';
|
|
import { GoogleLogin } from "vue3-google-login";
|
|
// import { FacebookAuth } from '@xtiannyeto/vue-auth-social';
|
|
import SelectedFooter from "@/views/main/SelectedFooter.vue";
|
|
|
|
const api = useClient();
|
|
const store = auth();
|
|
const router = useRouter();
|
|
|
|
const user = ref({});
|
|
const errorSnackBar = ref(false);
|
|
const showEmailForm = ref(false);
|
|
const showPassword = ref(false);
|
|
|
|
async function login() {
|
|
try {
|
|
await store.login(api, user.value.email, user.value.password);
|
|
await router.push('/');
|
|
window.location.reload();
|
|
} catch (error) {
|
|
errorSnackBar.value = true;
|
|
}
|
|
}
|
|
|
|
const googleCallback = async (response) => {
|
|
await store.loginGoogle(api, response["access_token"]);
|
|
await router.push("/");
|
|
};
|
|
|
|
// const facebookAppId = import.meta.env.VITE_FACEBOOK_APP_ID;
|
|
// const facebookCallback = (response) => {
|
|
// console.log("User Successfully Logged In", response);
|
|
// };
|
|
</script>
|