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

Ui Updated - Modification de LoginView.vue et ContactView.vue

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-13 17:49:04 -04:00
parent db29b20e42
commit 5380626ec9
20 changed files with 360 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/LoginView.vue
View File

@@ -1,48 +1,63 @@
<template>
<v-row align="center" justify="center">
<v-col cols="4">
<v-container>
<v-card>
<v-toolbar color="primary" :dark="true">
<v-toolbar-title>Login</v-toolbar-title>
</v-toolbar>
<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>
<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="person" type="text" v-model="user.email" label="E-mail"></v-text-field>
<v-text-field
prepend-icon="lock"
type="password"
v-model="user.password"
label="password"
></v-text-field>
<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">
<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>
<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>
<v-btn color="primary" @click="login">Login</v-btn>
<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>
</v-card>
<v-btn color="red" @click="goHome()">Continuer sans se connecter</v-btn>
<div class="text-center">
<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>
</router-link>
</div>
</v-col>
</v-row>
</v-container>
<FooterLayout></FooterLayout>
</v-container>
</v-col>
</v-row>
</template>
<script setup>
import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from '@/plugins/clientPlugin';
import { useAuthStore } from '@/plugins/store/authStore';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const authStore = useAuthStore();
const client = useClient();
const router = useRouter()
@@ -54,7 +69,9 @@ const goHome = () => {
router.push('/');
}
async function login(){
async function login() {
try {
await authStore.login(client, user.value.email, user.value.password)
router.push('/');