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

1
.env.development
View File

@@ -1,2 +1,3 @@
VITE_API_URL=https://localhost:5001/
VITE_GOOGLE_CLIENT_ID=468391910875-78sfopq1t12ulrv4f5vj227j45guuj66.apps.googleusercontent.com
VITE_FACEBOOK_APP_ID=1202001717489038

1
.env.production
View File

@@ -1,2 +1,3 @@
VITE_API_URL=https://hutopy.azurewebsites.net/
VITE_GOOGLE_CLIENT_ID=468391910875-78sfopq1t12ulrv4f5vj227j45guuj66.apps.googleusercontent.com
VITE_FACEBOOK_APP_ID=1202001717489038

929
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -11,6 +11,7 @@
"dependencies": {
"@mdi/font": "^7.4.47",
"@stripe/stripe-js": "^3.0.10",
"@xtiannyeto/vue-auth-social": "^0.1.9",
"axios": "^1.6.7",
"pinia": "^2.1.7",
"vue": "^3.4.15",

3
src/main.js
View File

@@ -23,7 +23,8 @@ app.use(clientPlugin);
app.use(vueGoogleOauth, {
clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
})
});
app.use(createPinia());
app.use(vuetify);
app.use(router);

8
src/stores/auth.js
View File

@@ -15,14 +15,12 @@ export const auth = defineStore({
async login(client, email, password) {
const requestBody = {
email: email,
emailAddress: email,
password: password
};
const response = await client.post(`${baseUrl}/users/login`, requestBody)
this.user = {
accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken,
email: email
accessToken: response.data,
}
localStorage.setItem('jwt', this.user.accessToken);
@@ -30,7 +28,7 @@ export const auth = defineStore({
},
async loginGoogle(client, accessToken) {
const response = await client.post(`${baseUrl}/google`, {accessToken: accessToken})
const response = await client.post(`${baseUrl}/google/sign-in`, {accessToken: accessToken})
this.user = {
accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken,

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>