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

Fixed merge

Browse Source
This commit is contained in:
Dominic Villemure
2024-04-01 01:00:12 -04:00
parent eeb7393420 e88de520e0
commit 6bb37d820d
17 changed files with 169 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@@ -7,8 +7,5 @@
</v-app>
</template>
<script>
export default {
name: 'App',
};
<script setup>
</script>

8
src/layouts/DefaultLayout.vue
View File

@@ -67,18 +67,18 @@
</template>
<script setup>
import { useAuthStore } from '@/plugins/store/authStore';
import { auth } from '@/stores/auth.js';
import { useRouter } from 'vue-router';
const authStore = useAuthStore();
const store = auth();
const router = useRouter();
const logout = () => {
authStore.logout();
store.logout();
router.push('/login');
}
const user = authStore.user;
const user = store.user;
</script>

6
src/layouts/FooterLayout.vue
View File

@@ -20,17 +20,17 @@
<v-row justify="center">
<v-col cols="auto">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
<img class="icons" src="../../images/facebookiconblackpink.png" alt="Description image 2">
</a>
</v-col>
<v-col cols="auto">
<a href="https://www.instagram.com/hutopy.inc/">
<img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
<img src="../../images/instagramblackpink.png" alt="Description image 3" class="icons">
</a>
</v-col>
<v-col cols="auto">
<router-link :to="{ name: 'home' }">
<img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
<img src="../../images/xblackpink.png" alt="Description image 1" class="icons">
</router-link>
</v-col>
</v-row>

2
src/main.js
View File

@@ -8,7 +8,7 @@ import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import clientPlugin from './plugins/clientPlugin'
import clientPlugin from './plugins/api.js'
const vuetify = createVuetify({
components,

35
src/plugins/api.js Normal file
View File

@@ -0,0 +1,35 @@
import axios from "axios";
import {inject} from "vue";
const key = Symbol("api");
export default function(app) {
if (!import.meta.env.VITE_API_URL) throw new Error("VITE_API_URL is not provided")
// You create a .env.development file and a .env file
// depending on the environment, the correct file will be used
const api = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 2000,
});
const requestInterceptor = (config) => {
const token = localStorage.getItem("jwt");
if (token) config.headers["Authorization"] = `Bearer ${token}`;
return config;
}
api.interceptors.request.use(requestInterceptor);
// This is a local injection, to use it in your components you can do this:
// const api = inject("api")
// api.get("/some-endpoint")
app.provide(key, api)
}
export function useClient() {
const api = inject(key)
if (!api) throw new Error("api is not provided")
return api;
}

34
src/plugins/clientPlugin.js
View File

@@ -1,34 +0,0 @@
import axios from "axios";
import { inject } from 'vue';
const clientKey = Symbol('client');
export default {
//todo: Need to have the baseURL in the config for later ( dev and prod env. )
install: (app) => {
const axiosInstance = axios.create({
baseURL: 'https://localhost:5001/',
timeout: 2000,
});
axiosInstance.interceptors.request.use((config) => {
const token = localStorage.getItem('jwt');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, (error) => {
return Promise.reject(error);
});
app.provide(clientKey, axiosInstance);
}
};
export function useClient() {
const client = inject(clientKey);
if (!client) {
throw new Error('Axios instance is not provided');
}
return client;
}

7
src/plugins/store/authStore.js → src/stores/auth.js
View File

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
const baseUrl = '/api/Users';
export const useAuthStore = defineStore({
export const auth = defineStore({
id: 'auth',
state: () => ({
user: null,
@@ -26,9 +26,6 @@ export const useAuthStore = defineStore({
} catch (error) {
throw new Error('Login failed.')
}
},
logout() {
localStorage.setItem('jwt', '');
@@ -52,4 +49,4 @@ export const useAuthStore = defineStore({
clearTimeout(this.refreshTokenTimeout);
}
}
});
});

93
src/views/LoginView.vue
View File

@@ -8,7 +8,7 @@
<v-row align="center" justify="center">
<!-- Header -->
<v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
<img class="login-picture" src="../../../images/loginpage/loginhutopy.png">
<img class="login-picture" src="../../images/loginpage/loginhutopy.png">
</v-col>
<!-- Connexion-objects -->
@@ -58,7 +58,7 @@
<div class="sm:hidden flex flex-col items-center justify-start"
style="background-color: #f4f4f4; height: 100vh;">
<img style="margin-top: 10%; width: 350px; box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
src="../../../images/loginpage/loginhutopy.png">
src="../../images/loginpage/loginhutopy.png">
<h1 class="h1-connexion">Connexion</h1>
<h2 class="h2-connexion">Comment souhaitez-vous
@@ -96,29 +96,24 @@
<script setup>
import { useClient } from '@/plugins/clientPlugin';
import { useAuthStore } from '@/plugins/store/authStore';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import FooterLayout from '@/layouts/FooterLayout.vue';
import {auth} from '@/stores/auth.js';
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {useClient} from "@/plugins/api.js";
const authStore = useAuthStore();
const client = useClient();
const api = useClient()
const store = auth();
const router = useRouter()
let user = ref({});
let errorSnackBar = ref(false);
const goHome = () => {
router.push('/');
}
async function login() {
try {
await authStore.login(client, user.value.email, user.value.password)
router.push('/');
await store.login(api, user.value.email, user.value.password)
router.push('/');
} catch (error) {
errorSnackBar.value = true;
}
@@ -205,17 +200,11 @@ async function login() {
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.1em;
}
.headermarginleft {
margin-left: 4%;
}
.label-mail-password {
margin-bottom: -3%;
width: 425px;
@@ -223,7 +212,6 @@ async function login() {
}
.btnhome {
font-size: 1em;
@@ -243,12 +231,6 @@ async function login() {
.inscriptionbtn {
transform: scale(.8);
}
}
@media (min-width: 769px) and (max-width: 1280px) {
@@ -273,11 +255,6 @@ async function login() {
}
.headermarginleft {
margin-left: 4%;
}
.inscriptionbtn {
transform: scale(.8);
}
@@ -296,10 +273,6 @@ async function login() {
justify-content: center;
}
}
@media (min-width: 1279px) and (max-width: 1920px) {
@@ -320,29 +293,17 @@ async function login() {
font-size: 1.3em;
}
.h2-pasinscrit {
margin-bottom: -10%;
}
.label-mail-password {
margin-bottom: -10%;
margin-top: -4%;
}
.inscriptionbtn {
transform: scale(.6);
margin-top: -5%;
}
.headermarginleft {
margin-left: 0%;
}
.login-picture {
width: auto;
border-radius: 30px;
@@ -350,12 +311,6 @@ async function login() {
margin-left: -5%;
}
}
@media (min-width: 1921px) {
@@ -381,22 +336,11 @@ async function login() {
width: auto;
}
.insriptionbutton {
font-size: 1.2em;
}
.headermarginleft {
margin-left: 0%;
}
.connexion-container {
margin-left: -7%;
}
.login-picture {
width: auto;
border-radius: 30px;
@@ -426,15 +370,6 @@ async function login() {
width: auto;
}
.insriptionbutton {
font-size: 1.2em
}
.headermarginleft {
margin-left: 1%;
}
.inscriptionbtn {
transform: scale(1);
}
@@ -450,7 +385,5 @@ async function login() {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
}
}
</style>
</style>

87
src/views/StripePayment.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<v-container>
<v-row>
<v-col>
<v-text-field
label="Montant ($)"
v-model="price"
style="color: rgb(0, 109, 119); background-color: #f4f4f4">
</v-text-field>
</v-col>
<v-col>
<v-btn
@click="goPay()"
style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
>Envoyez
</v-btn>
</v-col>
</v-row>
<v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
<template v-slot:default>
<v-card>
<div id="checkout">
<!-- Checkout will insert the payment form here -->
</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
text="Annuler"
@click="closeDialog()"
></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</v-container>
</template>
<script setup>
import { useClient } from '@/plugins/api.js';
import { loadStripe } from '@stripe/stripe-js';
import { onMounted, ref } from "vue";
let stripe = null;
const client = useClient();
const price = ref(0);
const isPaymentDialogActive = ref(false);
var checkout;
onMounted(async () => {
// I removed api key to push. Need to get it from backend.
stripe = await loadStripe('');
})
const fetchClientSecret = async () => {
const clientSecret = await createCheckoutSession();
return clientSecret;
};
async function createCheckoutSession() {
let clientSecret = await client.post('/api/Stripe', {
price: price.value * 100
});
let secret = clientSecret["data"];
return secret;
}
function closeDialog(){
isPaymentDialogActive.value = false;
checkout.destroy();
}
async function goPay() {
isPaymentDialogActive.value = true;
checkout = await stripe.initEmbeddedCheckout({
fetchClientSecret,
});
await checkout.mount('#checkout');
}
</script>

29
src/views/main/CreatorFolio.vue
View File

@@ -15,7 +15,7 @@
<!-- "profile xs sm md" -->
<v-card
style="margin-top: 2; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-color: rgba(11, 170, 178, 0); width: 101vw;"
style="margin-top: 2px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-color: rgba(11, 170, 178, 0); width: 101vw;"
class="profile-container-mobile hidden-md-and-up" hidden-md-and-down>
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator "></v-img>
@@ -72,7 +72,7 @@
<v-col style="margin: 0;">
<v-container style=" overflow-y: hidden;i">
<v-container style=" overflow-y: hidden;">
<!-- Nav-Btn -->
<v-col cols="12" class="px-0">
<v-list dense class="main-background">
@@ -169,7 +169,7 @@
</v-card-actions>
</v-card>
<v-card style="border-radius: 25pxo; margin-top: 3%; height: 30px;">
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
<v-row>
<v-col style="margin-right: -2%;" cols="1"
class="text-truncate text-center font-weight-bold">T#</v-col>
@@ -182,7 +182,7 @@
</v-row>
</v-card>
<v-card style=" border-radius: 25pxo; margin-top: .5%; max-height: 450px;">
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
<v-row>
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
@@ -302,34 +302,16 @@
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Comments -->
<v-text-field style="margin-left: 2%;"
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
</v-container>
</div>
</v-card>
</v-container>
</v-col>
<!-- "Large-Monitor-RightCol" Donation -->
@@ -466,7 +448,7 @@ export default {
.sticky-top-label {
position: sticky;
bottom: 0;
right: 10;
right: 10%;
width: 100%;
z-index: 1000;
}
@@ -722,7 +704,6 @@ export default {
.mobile-profile-picture {
height: 40px;
border-radius: px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
/* Ajouter une ombre à la photo */
border: 2px solid #a30e79;

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

@@ -12,7 +12,7 @@
<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: 100;"
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
light elevation="0">
Connexion
</v-btn>
@@ -189,14 +189,14 @@
<!-- Colonne de droite -->
<v-col cols="3">
<v-img src="../../../images/homepage/grinding.png"
style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
style="margin-bottom: 4%; border-radius: 30px; width: 80px;"></v-img>
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
</v-col>
<v-col cols="3" style>
<v-img src="../../../images/homepage/microphone.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
<v-img src="../../../images/homepage/girlvr.png"
style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
style="border-radius: 30px; min-width: 250px; max-height: 350;"></v-img>
</v-col>
</v-row>
</v-container>
@@ -277,7 +277,7 @@
<div>
<img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
<img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
<div>
<v-card-text>
@@ -403,7 +403,7 @@
<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from '@/plugins/clientPlugin';
import {useClient} from "@/plugins/api.js";
import { ref } from 'vue';
import { useRouter } from 'vue-router';