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

Merged PR 81: Oauth

Browse Source
This commit is contained in:
Dominic Villemure
2024-06-27 23:16:39 +00:00
parent af476501de 87612d63ea
commit b85a7f95b7
13 changed files with 832 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@@ -1 +0,0 @@
VITE_API_URL=https://localhost:5001/

4
.env.dist Normal file
View File

@@ -0,0 +1,4 @@
VITE_API_URL=https:
VITE_STRIPE_API_KEY=
VITE_GOOGLE_CLIENT_ID=
VITE_FACEBOOK_APP_ID

1
.env.production
View File

@@ -1 +0,0 @@
VITE_API_URL=https://hutopy.azurewebsites.net/

5
.gitignore vendored
View File

@@ -27,3 +27,8 @@ coverage
*.sw? *.sw?
*.tsbuildinfo *.tsbuildinfo
# .Env files
.env.development
.env.production
.env

938
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -11,10 +11,12 @@
"dependencies": { "dependencies": {
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",
"@stripe/stripe-js": "^3.0.10", "@stripe/stripe-js": "^3.0.10",
"@xtiannyeto/vue-auth-social": "^0.1.9",
"axios": "^1.6.7", "axios": "^1.6.7",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"vue": "^3.4.15", "vue": "^3.4.15",
"vue-router": "^4.2.5", "vue-router": "^4.2.5",
"vue3-google-login": "^2.0.26",
"vuetify": "^3.5.6" "vuetify": "^3.5.6"
}, },
"devDependencies": { "devDependencies": {

5
src/main.js
View File

@@ -9,6 +9,7 @@ import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components' import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives' import * as directives from 'vuetify/directives'
import clientPlugin from './plugins/api.js' import clientPlugin from './plugins/api.js'
import vueGoogleOauth from 'vue3-google-login'
const vuetify = createVuetify({ const vuetify = createVuetify({
components, components,
@@ -20,6 +21,10 @@ const app = createApp(App);
// Create an axios client preconfigured to the Hutopy API. // Create an axios client preconfigured to the Hutopy API.
app.use(clientPlugin); app.use(clientPlugin);
app.use(vueGoogleOauth, {
clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
});
app.use(createPinia()); app.use(createPinia());
app.use(vuetify); app.use(vuetify);
app.use(router); app.use(router);

40
src/stores/auth.js
View File

@@ -1,50 +1,64 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
const baseUrl = '/api/Users'; const baseUrl = '/api';
export const auth = defineStore({ export const auth = defineStore({
id: 'auth', id: 'auth',
state: () => ({ state: () => ({
user: null, user: "",
refreshTokenTimeout: null refreshTokenTimeout: 0
}), }),
actions: { actions: {
// TODO: Fix login methods
async login(client, email, password) { async login(client, email, password) {
const requestBody = { const requestBody = {
email: email, emailAddress: email,
password: password password: password
}; };
try { const response = await client.post(`${baseUrl}/users/login`, requestBody)
const response = await client.post(`${baseUrl}/login`, requestBody) this.user = {
accessToken: response.data,
}
localStorage.setItem('jwt', this.user.accessToken);
this.startRefreshTokenTimer();
},
async loginGoogle(client, accessToken) {
const response = await client.post(`${baseUrl}/google/sign-in`, {accessToken: accessToken})
this.user = { this.user = {
accessToken: response.data.accessToken, accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken, refreshToken: response.data.refreshToken,
email: email email: response.data.email
} }
localStorage.setItem('jwt', this.user.accessToken); localStorage.setItem('jwt', this.user.accessToken);
this.startRefreshTokenTimer(); this.startRefreshTokenTimer();
} catch (error) {
throw new Error('Login failed.')
}
}, },
logout() { logout() {
localStorage.setItem('jwt', ''); localStorage.setItem('jwt', '');
this.stopRefreshTokenTimer();
this.user = null; this.user = null;
this.stopRefreshTokenTimer();
}, },
async refreshToken(client) { async refreshToken(client) {
const response = await client.post(`${baseUrl}/refresh`, {}); const response = await client.post(`${baseUrl}/users/refresh`);
this.user.accessToken = response.accessToken; this.user.accessToken = response.accessToken;
localStorage.setItem('jwt', this.user.accessToken); localStorage.setItem('jwt', this.user.accessToken);
this.startRefreshTokenTimer(); this.startRefreshTokenTimer();
}, },
startRefreshTokenTimer() { startRefreshTokenTimer() {
const timeout = 50 * 1000; const timeout = 50 * 1000;
this.refreshTokenTimeout = setTimeout(this.refreshToken, timeout); this.refreshTokenTimeout = setTimeout(this.refreshToken, timeout);
}, },
stopRefreshTokenTimer() { stopRefreshTokenTimer() {
clearTimeout(this.refreshTokenTimeout); clearTimeout(this.refreshTokenTimeout);
} }

39
src/views/LoginView.vue
View File

@@ -3,12 +3,12 @@
<div class="sm:flex hidden items-center justify-between flex-col" <div class="sm:flex hidden items-center justify-between flex-col"
style="background-color: #f4f4f4; margin-top: 3%;"> style="background-color: #f4f4f4; margin-top: 3%;">
<body style="background-color: #f4f4f4;"> <div style="background-color: #f4f4f4;">
<v-container style=" background-color: #f4f4f4;"> <v-container style=" background-color: #f4f4f4;">
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<!-- Header --> <!-- Header -->
<v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; "> <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
<img class="login-picture" src="/images/hutopymedia/loginpage/loginhutopy.png"> <img class="login-picture" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="">
</v-col> </v-col>
<!-- Connexion-objects --> <!-- Connexion-objects -->
@@ -36,6 +36,14 @@
<v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn> <v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
</router-link> </router-link>
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn> <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> </v-card-actions>
<div class="text-center"> <div class="text-center">
<h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2> <h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
@@ -48,7 +56,7 @@
</v-row> </v-row>
</v-container> </v-container>
</body> </div>
<FooterLayout></FooterLayout> <FooterLayout></FooterLayout>
</div> </div>
@@ -92,10 +100,12 @@
<script setup> <script setup>
import FooterLayout from '@/layouts/FooterLayout.vue'; import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from "@/plugins/api.js"; import {auth} from '@/stores/auth.js';
import { auth } from '@/stores/auth.js'; import {ref} from 'vue';
import { ref } from 'vue'; import {useRouter} from 'vue-router';
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() const api = useClient()
@@ -106,14 +116,27 @@ let user = ref({});
let errorSnackBar = ref(false); let errorSnackBar = ref(false);
async function login() { async function login() {
// TODO: Make the store handle errors
try { try {
await store.login(api, user.value.email, user.value.password) await store.login(api, user.value.email, user.value.password)
router.push('/'); await router.push('/');
} catch (error) { } catch (error) {
errorSnackBar.value = true; errorSnackBar.value = true;
} }
} }
const googleCallback = async (response) => {
// TODO: Make the store handle errors
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> </script>
<style scoped> <style scoped>

3
src/views/StripePayment.vue
View File

@@ -55,8 +55,7 @@ const isPaymentDialogActive = ref(false);
var checkout; var checkout;
onMounted(async () => { onMounted(async () => {
// I removed api key to push. Need to get it from backend. stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
stripe = await loadStripe('');
}) })
const fetchClientSecret = async () => { const fetchClientSecret = async () => {

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

@@ -391,25 +391,13 @@
<script async setup> <script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue'; import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue'; import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from "@/plugins/api.js";
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const router = useRouter() const router = useRouter()
const client = useClient();
let itemList = ref([]); let itemList = ref([]);
let errorNoAccessSnackBar = ref(false); let errorNoAccessSnackBar = ref(false);
async function callBackend() {
try {
const response = await client.get('/api/JoinUs?PageNumber=1&PageSize=10');
itemList.value = response.data.items;
} catch (error) {
errorNoAccessSnackBar.value = true;
}
}
const goToLoginPage = () => { const goToLoginPage = () => {
router.push('/login'); router.push('/login');
} }

3
vite.config.js
View File

@@ -18,7 +18,8 @@ export default defineConfig(({ mode }) => {
}, },
define: { define: {
// Define a global constant __APP_ENV__ based on loaded environment variables // Define a global constant __APP_ENV__ based on loaded environment variables
VITE_API_URL: JSON.stringify(env.VITE_API_URL) VITE_API_URL: JSON.stringify(env.VITE_API_URL),
VITE_STRIPE_API_KEY: JSON.stringify(env.VITE_STRIPE_API_KEY)
} }
} }
}) })