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

1
.env.development Normal file
View File

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

1
.env.production Normal file
View File

@@ -0,0 +1 @@
VITE_API_URL=todo

2
index.html
View File

@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>Hutopy</title>
</head> </head>
<body> <body>

9
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",
"@stripe/stripe-js": "^3.0.10",
"axios": "^1.6.7", "axios": "^1.6.7",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"vue": "^3.4.15", "vue": "^3.4.15",
@@ -841,6 +842,14 @@
"win32" "win32"
] ]
}, },
"node_modules/@stripe/stripe-js": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-3.0.10.tgz",
"integrity": "sha512-CFRNha+aPXR8GrqJss2TbK1j4aSGZXQY8gx0hvaYiSp+dU7EK/Zs5uwFTSAgV+t8H4+jcZ/iBGajAvoMYOwy+A==",
"engines": {
"node": ">=12.16"
}
},
"node_modules/@types/estree": { "node_modules/@types/estree": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",

1
package.json
View File

@@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",
"@stripe/stripe-js": "^3.0.10",
"axios": "^1.6.7", "axios": "^1.6.7",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"vue": "^3.4.15", "vue": "^3.4.15",

5
src/App.vue
View File

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

8
src/layouts/DefaultLayout.vue
View File

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

6
src/layouts/FooterLayout.vue
View File

@@ -20,17 +20,17 @@
<v-row justify="center"> <v-row justify="center">
<v-col cols="auto"> <v-col cols="auto">
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <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> </a>
</v-col> </v-col>
<v-col cols="auto"> <v-col cols="auto">
<a href="https://www.instagram.com/hutopy.inc/"> <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> </a>
</v-col> </v-col>
<v-col cols="auto"> <v-col cols="auto">
<router-link :to="{ name: 'home' }"> <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> </router-link>
</v-col> </v-col>
</v-row> </v-row>

2
src/main.js
View File

@@ -8,7 +8,7 @@ import 'vuetify/styles'
import { createVuetify } from 'vuetify' 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/clientPlugin' import clientPlugin from './plugins/api.js'
const vuetify = createVuetify({ const vuetify = createVuetify({
components, 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;
}

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

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

85
src/views/LoginView.vue
View File

@@ -8,7 +8,7 @@
<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/loginpage/loginhutopy.png"> <img class="login-picture" src="../../images/loginpage/loginhutopy.png">
</v-col> </v-col>
<!-- Connexion-objects --> <!-- Connexion-objects -->
@@ -58,7 +58,7 @@
<div class="sm:hidden flex flex-col items-center justify-start" <div class="sm:hidden flex flex-col items-center justify-start"
style="background-color: #f4f4f4; height: 100vh;"> 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; " <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> <h1 class="h1-connexion">Connexion</h1>
<h2 class="h2-connexion">Comment souhaitez-vous <h2 class="h2-connexion">Comment souhaitez-vous
@@ -96,28 +96,23 @@
<script setup> <script setup>
import { useClient } from '@/plugins/clientPlugin'; import FooterLayout from '@/layouts/FooterLayout.vue';
import { useAuthStore } from '@/plugins/store/authStore'; 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";
const authStore = useAuthStore(); const api = useClient()
const client = useClient();
const store = auth();
const router = useRouter() const router = useRouter()
let user = ref({}); let user = ref({});
let errorSnackBar = ref(false); let errorSnackBar = ref(false);
const goHome = () => {
router.push('/');
}
async function login() { async function login() {
try { try {
await authStore.login(client, user.value.email, user.value.password) await store.login(api, user.value.email, user.value.password)
router.push('/'); router.push('/');
} catch (error) { } catch (error) {
errorSnackBar.value = true; errorSnackBar.value = true;
@@ -205,17 +200,11 @@ async function login() {
margin-bottom: 5%; margin-bottom: 5%;
} }
.h2pasinscrit { .h2pasinscrit {
margin-bottom: 5%; margin-bottom: 5%;
font-size: 1.1em; font-size: 1.1em;
} }
.headermarginleft {
margin-left: 4%;
}
.label-mail-password { .label-mail-password {
margin-bottom: -3%; margin-bottom: -3%;
width: 425px; width: 425px;
@@ -223,7 +212,6 @@ async function login() {
} }
.btnhome { .btnhome {
font-size: 1em; font-size: 1em;
@@ -243,12 +231,6 @@ async function login() {
.inscriptionbtn { .inscriptionbtn {
transform: scale(.8); transform: scale(.8);
} }
} }
@media (min-width: 769px) and (max-width: 1280px) { @media (min-width: 769px) and (max-width: 1280px) {
@@ -273,11 +255,6 @@ async function login() {
} }
.headermarginleft {
margin-left: 4%;
}
.inscriptionbtn { .inscriptionbtn {
transform: scale(.8); transform: scale(.8);
} }
@@ -296,10 +273,6 @@ async function login() {
justify-content: center; justify-content: center;
} }
} }
@media (min-width: 1279px) and (max-width: 1920px) { @media (min-width: 1279px) and (max-width: 1920px) {
@@ -320,29 +293,17 @@ async function login() {
font-size: 1.3em; font-size: 1.3em;
} }
.h2-pasinscrit {
margin-bottom: -10%;
}
.label-mail-password { .label-mail-password {
margin-bottom: -10%; margin-bottom: -10%;
margin-top: -4%; margin-top: -4%;
} }
.inscriptionbtn { .inscriptionbtn {
transform: scale(.6); transform: scale(.6);
margin-top: -5%; margin-top: -5%;
} }
.headermarginleft {
margin-left: 0%;
}
.login-picture { .login-picture {
width: auto; width: auto;
border-radius: 30px; border-radius: 30px;
@@ -350,12 +311,6 @@ async function login() {
margin-left: -5%; margin-left: -5%;
} }
} }
@media (min-width: 1921px) { @media (min-width: 1921px) {
@@ -381,22 +336,11 @@ async function login() {
width: auto; width: auto;
} }
.insriptionbutton {
font-size: 1.2em;
}
.headermarginleft {
margin-left: 0%;
}
.connexion-container { .connexion-container {
margin-left: -7%; margin-left: -7%;
} }
.login-picture { .login-picture {
width: auto; width: auto;
border-radius: 30px; border-radius: 30px;
@@ -426,15 +370,6 @@ async function login() {
width: auto; width: auto;
} }
.insriptionbutton {
font-size: 1.2em
}
.headermarginleft {
margin-left: 1%;
}
.inscriptionbtn { .inscriptionbtn {
transform: scale(1); transform: scale(1);
} }
@@ -450,7 +385,5 @@ async function login() {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -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" --> <!-- "profile xs sm md" -->
<v-card <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> 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> <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator "></v-img>
@@ -72,7 +72,7 @@
<v-col style="margin: 0;"> <v-col style="margin: 0;">
<v-container style=" overflow-y: hidden;i"> <v-container style=" overflow-y: hidden;">
<!-- Nav-Btn --> <!-- Nav-Btn -->
<v-col cols="12" class="px-0"> <v-col cols="12" class="px-0">
<v-list dense class="main-background"> <v-list dense class="main-background">
@@ -169,7 +169,7 @@
</v-card-actions> </v-card-actions>
</v-card> </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-row>
<v-col style="margin-right: -2%;" cols="1" <v-col style="margin-right: -2%;" cols="1"
class="text-truncate text-center font-weight-bold">T#</v-col> class="text-truncate text-center font-weight-bold">T#</v-col>
@@ -182,7 +182,7 @@
</v-row> </v-row>
</v-card> </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-row>
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col> <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" <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
@@ -302,34 +302,16 @@
<div <div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;"> style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div> </div>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;"> <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div> </div>
<!-- Comments --> <!-- Comments -->
<v-text-field style="margin-left: 2%;" <v-text-field style="margin-left: 2%;"
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field> placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
</v-container> </v-container>
</div> </div>
</v-card> </v-card>
</v-container> </v-container>
</v-col> </v-col>
<!-- "Large-Monitor-RightCol" Donation --> <!-- "Large-Monitor-RightCol" Donation -->
@@ -466,7 +448,7 @@ export default {
.sticky-top-label { .sticky-top-label {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
right: 10; right: 10%;
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
} }
@@ -722,7 +704,6 @@ export default {
.mobile-profile-picture { .mobile-profile-picture {
height: 40px; height: 40px;
border-radius: px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
/* Ajouter une ombre à la photo */ /* Ajouter une ombre à la photo */
border: 2px solid #a30e79; 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"> <img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }"> <RouterLink :to="{ name: 'login' }">
<v-btn size="large" <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"> light elevation="0">
Connexion Connexion
</v-btn> </v-btn>
@@ -189,14 +189,14 @@
<!-- Colonne de droite --> <!-- Colonne de droite -->
<v-col cols="3"> <v-col cols="3">
<v-img src="../../../images/homepage/grinding.png" <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-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
</v-col> </v-col>
<v-col cols="3" style> <v-col cols="3" style>
<v-img src="../../../images/homepage/microphone.png" <v-img src="../../../images/homepage/microphone.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img> style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
<v-img src="../../../images/homepage/girlvr.png" <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-col>
</v-row> </v-row>
</v-container> </v-container>
@@ -277,7 +277,7 @@
<div> <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> <div>
<v-card-text> <v-card-text>
@@ -403,7 +403,7 @@
<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/clientPlugin'; import {useClient} from "@/plugins/api.js";
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';

3
tailwind.config.js
View File

@@ -7,9 +7,6 @@ export default {
theme: { theme: {
extend: {}, extend: {},
}, },
theme: {
extend: {},
},
plugins: [], plugins: [],
} }