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

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';