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

Some changes

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-06-25 00:50:49 -04:00
parent 0a9ae00867
commit 5d3429afb2
50 changed files with 3555 additions and 10927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

559
src/views/LoginView.vue
View File

@@ -1,112 +1,109 @@
<template>
<v-app style="background-color: #f4f4f4;">
<!-- Google Oauth -->
<div class="sm:flex hidden items-center justify-between flex-col"
style="background-color: #f4f4f4; margin-top: 3%;">
<!-- Google Oauth -->
<div class="sm:flex hidden items-center justify-between flex-col"
style="margin-top: 3%;">
<body style="background-color: #f4f4f4;">
<v-container style=" background-color: #f4f4f4;">
<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/hutopymedia/loginpage/loginhutopy.png">
</v-col>
<v-container>
<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/hutopymedia/loginpage/loginhutopy.png">
</v-col>
<!-- Connexion-objects -->
<v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous vous connecter à votre
compte?</h2>
<v-card-text>
<v-form class="label-mail-password">
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
label="Nom d'utilisateur" class="text-start"></v-text-field>
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
label="Mot de passe" class="text-start"></v-text-field>
</v-form>
<v-snackbar v-model="errorSnackBar">
Nom d'utilisateur ou mot de passe invalide.
<template v-slot:actions>
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
</template>
</v-snackbar>
</v-card-text>
<v-card-actions>
<div class="flex-grow-1"></div>
<router-link :to="{ name: 'home' }">
<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>
<router-link :to="{ name: 'contact' }">
<v-btn color="#6b0065" class="inscriptionbtn"
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
</router-link>
</div>
</v-col>
</v-row>
</v-container>
</body>
<FooterLayout></FooterLayout>
</div>
<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/hutopymedia/loginpage/loginhutopy.png">
<h1 class="h1-connexion">Connexion</h1>
<h2 class="h2-connexion">Comment souhaitez-vous
vous connecter à votre compte?</h2>
<v-form style="max-width: 400px; width: 350px;">
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="Nom d'utilisateur"></v-text-field>
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
label="Mot de passe"></v-text-field>
<!-- Connexion-objects -->
<v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous vous connecter à votre
compte?</h2>
<v-card-text>
<v-form class="label-mail-password">
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
label="Nom d'utilisateur" class="text-start"></v-text-field>
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
label="Mot de passe" class="text-start"></v-text-field>
</v-form>
<v-snackbar v-model="errorSnackBar">
Nom d'utilisateur ou mot de passe invalide.
<template v-slot:actions>
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
</template>
</v-snackbar>
</v-card-text>
<v-card-actions>
<div class="flex-grow-1"></div>
<RouterLink to="/">
<v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
</RouterLink>
<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>
<v-card-actions>
<div class="flex-grow-1"></div>
<router-link :to="{ name: 'home' }">
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
</router-link>
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
</v-card-actions>
<div class="text-center">
<h2 class="h2pasinscrit">
Pas encore
inscrit?</h2>
<router-link :to="{ name: 'contact' }">
<v-btn color="#6b0065" class="inscriptionbtn"
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
</router-link>
</div>
<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>
<RouterLink :to="{ name: 'join' }">
<v-btn color="#6b0065" class="inscriptionbtn"
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions
</v-btn>
</RouterLink>
</div>
</v-col>
</v-row>
</v-container>
</div>
<div class="sm:hidden flex flex-col items-center justify-start"
style="height: 100vh;">
<img style="margin-top: 10%; width: 350px; box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px;"
src="/images/hutopymedia/loginpage/loginhutopy.png">
<h1 class="h1-connexion">Connexion</h1>
<h2 class="h2-connexion">Comment souhaitez-vous vous connecter à votre compte?</h2>
<v-form style="max-width: 400px; width: 350px;">
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="Nom d'utilisateur"></v-text-field>
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
label="Mot de passe"></v-text-field>
</v-form>
<v-card-actions>
<div class="flex-grow-1"></div>
<RouterLink to="/">
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
</RouterLink>
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
</v-card-actions>
<div class="text-center">
<h2 class="h2pasinscrit">
Pas encore
inscrit?</h2>
<RouterLink :to="{ name: 'join' }">
<v-btn color="#6b0065" class="inscriptionbtn"
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions
</v-btn>
</RouterLink>
</div>
</div>
</div>
</v-app>
</template>
<script setup>
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";
import {GoogleLogin} from "vue3-google-login";
import { FacebookAuth } from '@xtiannyeto/vue-auth-social';
import {FacebookAuth} from '@xtiannyeto/vue-auth-social';
const api = useClient()
@@ -117,13 +114,13 @@ let user = ref({});
let errorSnackBar = ref(false);
async function login() {
// TODO: Make the store handle errors
try {
await store.login(api, user.value.email, user.value.password)
await router.push('/');
} catch (error) {
errorSnackBar.value = true;
}
// TODO: Make the store handle errors
try {
await store.login(api, user.value.email, user.value.password)
await router.push('/');
} catch (error) {
errorSnackBar.value = true;
}
}
const googleCallback = async (response) => {
@@ -135,273 +132,273 @@ const googleCallback = async (response) => {
const facebookAppId = import.meta.env.VITE_FACEBOOK_APP_ID;
const facebookCallback = async (response) => {
console.log("User Successfully Logged In" , response)
console.log("User Successfully Logged In", response)
}
</script>
<style scoped>
.h1-connexion {
font-size: 0.55em;
font-size: 0.55em;
}
.h2-connexion {
font-size: 0.55em;
font-size: 0.55em;
}
.label-mail-password {
margin-bottom: -10%;
margin-bottom: -10%;
}
@media (min-width: 300px) {
.h1-connexion {
font-size: 2em;
margin-bottom: 5%;
}
.h1-connexion {
font-size: 2em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
text-align: center;
}
text-align: center;
}
.h2pasinscrit {
margin-bottom: 6%;
font-size: 1.1em;
}
.h2pasinscrit {
margin-bottom: 6%;
font-size: 1.1em;
}
.inscriptionbtn {
transform: scale(.7);
}
.inscriptionbtn {
transform: scale(.7);
}
}
@media (min-width: 450px) and (max-width: 670px) {
.h1-connexion {
font-size: 2em;
margin-bottom: 5%;
}
.h1-connexion {
font-size: 2em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
text-align: center;
}
text-align: center;
}
.h2pasinscrit {
margin-bottom: 6%;
font-size: 1.1em;
}
.h2pasinscrit {
margin-bottom: 6%;
font-size: 1.1em;
}
.inscriptionbtn {
transform: scale(.7);
}
.inscriptionbtn {
transform: scale(.7);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
}
}
@media (min-width: 641px) and (max-width: 770px) {
.h1-connexion {
font-size: 2.5em;
}
.h1-connexion {
font-size: 2.5em;
}
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.1em;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.1em;
}
.label-mail-password {
margin-bottom: -3%;
width: 425px;
margin-left: 6%;
.label-mail-password {
margin-bottom: -3%;
width: 425px;
margin-left: 6%;
}
}
.btnhome {
.btnhome {
font-size: 1em;
font-size: 1em;
justify-content: center;
transform: matrix(1, 0, 0, 1, -160, 0);
}
justify-content: center;
transform: matrix(1, 0, 0, 1, -160, 0);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
}
.inscriptionbtn {
transform: scale(.8);
}
.inscriptionbtn {
transform: scale(.8);
}
}
@media (min-width: 769px) and (max-width: 1280px) {
.h1-connexion {
font-size: 3em;
}
.h1-connexion {
font-size: 3em;
}
.h2-connexion {
font-size: 1.2em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1.2em;
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-bottom: -3%;
width: 550px;
margin-left: 9%;
.label-mail-password {
margin-bottom: -3%;
width: 550px;
margin-left: 9%;
}
}
.inscriptionbtn {
transform: scale(.8);
}
.inscriptionbtn {
transform: scale(.8);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
}
.btnhome {
font-size: 1em;
.btnhome {
font-size: 1em;
justify-content: center;
justify-content: center;
}
}
}
@media (min-width: 1279px) and (max-width: 1920px) {
.h1-connexion {
font-size: 2em;
margin-top: 4%;
font-weight: 600;
}
.h1-connexion {
font-size: 2em;
margin-top: 4%;
font-weight: 600;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
font-weight: 500;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
font-weight: 500;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.3em;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.3em;
}
.label-mail-password {
margin-bottom: -10%;
margin-top: -4%;
.label-mail-password {
margin-bottom: -10%;
margin-top: -4%;
}
}
.inscriptionbtn {
transform: scale(.6);
margin-top: -5%;
}
.inscriptionbtn {
transform: scale(.6);
margin-top: -5%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
}
}
}
@media (min-width: 1921px) {
.h1-connexion {
font-size: 4.2em;
}
.h1-connexion {
font-size: 4.2em;
}
.h2-connexion {
font-size: 1.3em;
margin-bottom: 5%;
margin-left: 6%;
}
.h2-connexion {
font-size: 1.3em;
margin-bottom: 5%;
margin-left: 6%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-left: 5%;
margin-bottom: 0%;
width: auto;
}
.label-mail-password {
margin-left: 5%;
margin-bottom: 0%;
width: auto;
}
.connexion-container {
margin-left: -7%;
.connexion-container {
margin-left: -7%;
}
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -10%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -10%;
}
}
@media (min-width: 2500px) and (max-width: 4000px) {
.h1-connexion {
font-size: 6.2em;
}
.h1-connexion {
font-size: 6.2em;
}
.h2-connexion {
font-size: 1.7em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1.7em;
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-bottom: 0%;
margin-left: 10%;
width: auto;
}
.label-mail-password {
margin-bottom: 0%;
margin-left: 10%;
width: auto;
}
.inscriptionbtn {
transform: scale(1);
}
.inscriptionbtn {
transform: scale(1);
}
.connexion-container {
margin-left: -3%;
}
.connexion-container {
margin-left: -3%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
}
}
</style>