Modification des pages afin qu'elle soient plus reactive.
This commit is contained in:
PascalMarchesseault
@@ -1,58 +1,102 @@
|
||||
<template>
|
||||
<v-container style="margin-top: 5%;">
|
||||
<v-row>
|
||||
<v-col cols="9">
|
||||
<img style="border-radius: 20px; max-width: 90%;" src="../../../images/loginpage/loginhutopy.png">
|
||||
</v-col>
|
||||
<v-col style="margin-left: -5%; margin-top: 6%;">
|
||||
<h1 class="text-center display-6" style="font-size: 5rem;">Connexion</h1>
|
||||
<v-app style="background-color: #f4f4f4;">
|
||||
<div class="sm:flex hidden items-center justify-between flex-col"
|
||||
style="background-color: #f4f4f4; margin-top: 3%;">
|
||||
|
||||
<h2 class="text-center display-3" style="font-size: 1.5rem; margin-bottom: 20px;">Comment souhaitez-vous
|
||||
vous connecter à
|
||||
votre compte?</h2>
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"
|
||||
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">
|
||||
Email 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">Accueil</v-btn>
|
||||
</router-link>
|
||||
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
|
||||
</v-card-actions>
|
||||
<div class="text-center">
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<v-container style="background-color: #f4f4f4;">
|
||||
<v-row align="center" justify="center">
|
||||
<!-- Colonne de l'image -->
|
||||
<v-col cols="8" lg="8" style="align-items: center;">
|
||||
<img class="headermarginleft" style="border-radius: 20px; max-width: 90%;"
|
||||
src="../../../images/loginpage/loginhutopy.png">
|
||||
</v-col>
|
||||
|
||||
<h2 class="text-center display-3" style="font-size: 1.5rem; margin-top: 6%; margin-bottom: 20px;">
|
||||
Pas encore
|
||||
inscrit?</h2>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn color="#6b0065"
|
||||
style="height: 60px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||
<!-- Colonne du contenu -->
|
||||
<v-col cols="3" lg="4" md="5" sm="6" xs="6">
|
||||
<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="E-mail" 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">
|
||||
Email 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">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="text-center display-3 h2-connexion">
|
||||
Pas encore
|
||||
inscrit?</h2>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn color="#6b0065"
|
||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||
</router-link>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
</router-link>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</body>
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
<div class="sm:hidden flex flex-col items-center justify-start"
|
||||
style="background-color: #f4f4f4; height: 100vh;">
|
||||
<img style="box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; "
|
||||
src="../../../images/loginpage/loginhutopy.png">
|
||||
|
||||
<h1 class="text-center">Connexion</h1>
|
||||
<h2 class="text-center">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="E-mail"></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>
|
||||
<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="text-center display-3 h2-connexion">
|
||||
Pas encore
|
||||
inscrit?</h2>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn color="#6b0065"
|
||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</v-app>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { useClient } from '@/plugins/clientPlugin';
|
||||
import { useAuthStore } from '@/plugins/store/authStore';
|
||||
import { ref } from 'vue';
|
||||
@@ -80,4 +124,139 @@ async function login() {
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.h1-connexion {
|
||||
font-size: 0.55em;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 0.55em;
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: -10%;
|
||||
}
|
||||
|
||||
.logincol {
|
||||
cols: 3;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 475px) {
|
||||
.h1-connexion {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 476px) and (max-width: 640px) {
|
||||
.h1-connexion {
|
||||
font-size: 1em;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) and (max-width: 768px) {
|
||||
.h1-connexion {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.h1-connexion {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1272px) {
|
||||
.h1-connexion {
|
||||
font-size: 3em;
|
||||
margin-top: 15%;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: -10%;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: -10%;
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1537px) and (max-width: 1920px) {
|
||||
.h1-connexion {
|
||||
font-size: 3.0em;
|
||||
margin-top: 18%;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: 0%;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) {
|
||||
.h1-connexion {
|
||||
font-size: 6.2em;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1.7em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: 0%;
|
||||
}
|
||||
|
||||
.insriptionbutton {
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 0%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user