jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#oauth fix some problems ( FB still not working )

Browse Source
This commit is contained in:
Dominic Villemure
2024-06-10 00:11:21 -04:00
parent 2d438c30be
commit b2cbc0814d
8 changed files with 759 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/LoginView.vue
View File

@@ -1,10 +1,6 @@
<template>
<v-app style="background-color: #f4f4f4;">
<!-- Google Oauth -->
<GoogleLogin :callback="googleCallback" popup-type="TOKEN">
<button>Login Using Google</button>
</GoogleLogin>
<div class="sm:flex hidden items-center justify-between flex-col"
style="background-color: #f4f4f4; margin-top: 3%;">
@@ -41,6 +37,14 @@
<v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
</router-link>
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
<GoogleLogin :callback="googleCallback" popup-type="TOKEN">
<v-btn color="primary" class="ma-2 btnhome">Google Login</v-btn>
</GoogleLogin>
<FacebookAuth :appId="facebookAppId" @on-submit="facebookCallback">
<v-btn color="primary" class="ma-2 btnhome">Facebook Login</v-btn>
</FacebookAuth>
</v-card-actions>
<div class="text-center">
<h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
@@ -102,6 +106,7 @@ import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {useClient} from "@/plugins/api.js";
import {GoogleLogin} from "vue3-google-login";
import { FacebookAuth } from '@xtiannyeto/vue-auth-social';
const api = useClient()
@@ -115,16 +120,24 @@ async function login() {
// TODO: Make the store handle errors
try {
await store.login(api, user.value.email, user.value.password)
router.push('/');
await router.push('/');
} catch (error) {
errorSnackBar.value = true;
}
}
const googleCallback = (response) => {
const googleCallback = async (response) => {
// TODO: Make the store handle errors
store.loginGoogle(api, response["access_token"])
await store.loginGoogle(api, response["access_token"])
await router.push("/");
}
const facebookAppId = import.meta.env.VITE_FACEBOOK_APP_ID;
const facebookCallback = async (response) => {
console.log("User Successfully Logged In" , response)
}
</script>
<style scoped>

36
src/views/main/HomeView.vue
View File

@@ -5,42 +5,6 @@
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<!--Logo & bouttons -->
<v-container class="d-flex justify-center align-center">
<div style="margin-left: 20%;">
<v-row>
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }">
<v-btn size="large"
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
light elevation="0">
Connexion
</v-btn>
</RouterLink>
<RouterLink :to="{ name: 'contact' }">
<v-btn size="large"
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="0">
Inscription
</v-btn>
</RouterLink>
</v-row>
</div>
</v-container>
<div>
<v-container style="margin: 0; padding: 0;">
<v-row style="justify-content: center;">
<img src="../../../images/homepage/bannierehomepage.png"
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
</v-row>
</v-container>
</div>
<!-- Colonnes Créer Partager Inspirer-->
<v-container class="d-flex justify-center align-center container-spacer header-container">
<v-row justify="center" align="center">
<v-col></v-col>