Modifications ajouter d'éléments dans Signup + login view modification basic
This commit is contained in:
PascalMarchesseault
@@ -14,8 +14,8 @@
|
|||||||
<!-- Connexion-objects -->
|
<!-- Connexion-objects -->
|
||||||
<v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
|
<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>
|
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
|
||||||
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
|
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous vous connecter à votre
|
||||||
vous connecter à votre compte?</h2>
|
compte?</h2>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-form class="label-mail-password">
|
<v-form class="label-mail-password">
|
||||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
|
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
|
||||||
@@ -38,9 +38,7 @@
|
|||||||
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
|
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h2 class="text-center display-3 h2pasinscrit">
|
<h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
|
||||||
Pas encore
|
|
||||||
inscrit?</h2>
|
|
||||||
<router-link :to="{ name: 'contact' }">
|
<router-link :to="{ name: 'contact' }">
|
||||||
<v-btn color="#6b0065" class="inscriptionbtn"
|
<v-btn color="#6b0065" class="inscriptionbtn"
|
||||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||||
@@ -88,19 +86,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</v-app>
|
</v-app>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||||
import {auth} from '@/stores/auth.js';
|
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";
|
import { useClient } from "@/plugins/api.js";
|
||||||
|
|
||||||
const api = useClient()
|
const api = useClient()
|
||||||
|
|
||||||
@@ -112,8 +107,8 @@ let errorSnackBar = ref(false);
|
|||||||
|
|
||||||
async function login() {
|
async function login() {
|
||||||
try {
|
try {
|
||||||
await store.login(api, 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;
|
||||||
}
|
}
|
||||||
@@ -135,7 +130,6 @@ async function login() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 300px) {
|
@media (min-width: 300px) {
|
||||||
.h1-connexion {
|
.h1-connexion {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
|
|||||||
@@ -1,65 +1,73 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
|
<v-app style="background-color: #f4f4f4;">
|
||||||
<div class="main-left">
|
<DefaultLayout></DefaultLayout>
|
||||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
|
||||||
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
|
|
||||||
|
|
||||||
<p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
<v-row>
|
||||||
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
|
<v-col cols=6 align="center">
|
||||||
took a galley of type and scrambled it to make a type specimen book. It has survived not only five
|
<v-img class="login-picture" max-width="500" src=" ../../images/hutopyblack.png"
|
||||||
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
style="margin-top: 100px; margin-bottom: 50px"></v-img>
|
||||||
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
|
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
|
||||||
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
|
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
|
||||||
|
<p class="mb-6 texte-gray-500">
|
||||||
<p class="font-bold"> Already have an account ? <RouterLink :to="{ 'name': 'login' }" class="underline">Click
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||||
here</RouterLink> to log in! </p>
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
|
||||||
</div>
|
unknown printer
|
||||||
</div>
|
took a galley of type and scrambled it to make a type specimen book. It has survived not
|
||||||
|
only
|
||||||
<div class="main-right">
|
five centuries, but also the leap into electronic typesetting, remaining essentially
|
||||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
unchanged. It
|
||||||
<form class="space-y-6">
|
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
|
||||||
|
passages,
|
||||||
<div>
|
and more recently with desktop publishing software like Aldus PageMaker including versions
|
||||||
<label>Name</label> <br>
|
of Lorem
|
||||||
<input type="text" placeholder="Your full name"
|
Ipsum.
|
||||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
</p>
|
||||||
|
<p class="font-bold">
|
||||||
</div>
|
Already have an account?
|
||||||
|
<RouterLink :to="{ 'name': 'login' }" class="underline">Click here</RouterLink> to log in!
|
||||||
<div>
|
</p>
|
||||||
<label>E-mail</label> <br>
|
</div>
|
||||||
<input type="email" placeholder="Your e-mail adress"
|
</v-col>
|
||||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
<v-col cols="6" sm="6" md="6" lg="6">
|
||||||
|
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
|
||||||
</div>
|
<form class="space-y-6">
|
||||||
|
<div>
|
||||||
<div>
|
<label>Name</label> <br>
|
||||||
<label>Password</label> <br>
|
<input type="text" placeholder="Your full name"
|
||||||
<input type="password" placeholder="Your password"
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
</div>
|
||||||
|
<div>
|
||||||
</div>
|
<label>E-mail</label> <br>
|
||||||
|
<input type="email" placeholder="Your e-mail adress"
|
||||||
<div>
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
<label>Repeat Password</label> <br>
|
</div>
|
||||||
<input type="password" placeholder="Repeat your password"
|
<div>
|
||||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
<label>Password</label> <br>
|
||||||
|
<input type="password" placeholder="Your password"
|
||||||
</div>
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Sign up</button>
|
<label>Repeat Password</label> <br>
|
||||||
</div>
|
<input type="password" placeholder="Repeat your password"
|
||||||
|
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg">Sign up</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
|
||||||
|
<FooterLayout></FooterLayout>
|
||||||
|
</v-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
|
import { RouterLink } from "vue-router";
|
||||||
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div></template>
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-card
|
|
||||||
class="mx-auto"
|
|
||||||
width="256"
|
|
||||||
>
|
|
||||||
<v-layout>
|
|
||||||
<v-navigation-drawer absolute permanent>
|
|
||||||
<h1>Test</h1>
|
|
||||||
|
|
||||||
<v-divider></v-divider>
|
|
||||||
|
|
||||||
<v-list
|
|
||||||
:lines="false"
|
|
||||||
density="compact"
|
|
||||||
nav
|
|
||||||
>
|
|
||||||
<v-list-item
|
|
||||||
v-for="(item, i) in items"
|
|
||||||
:key="i"
|
|
||||||
:value="item"
|
|
||||||
color="primary"
|
|
||||||
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<v-icon :icon="item.icon"></v-icon>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-navigation-drawer>
|
|
||||||
|
|
||||||
<v-main style="height: 354px;"></v-main>
|
|
||||||
</v-layout>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const items = [
|
|
||||||
{ text: 'My Files', icon: 'mdi-folder' },
|
|
||||||
{ text: 'Shared with me', icon: 'mdi-account-multiple' },
|
|
||||||
{ text: 'Starred', icon: 'mdi-star' },
|
|
||||||
{ text: 'Recent', icon: 'mdi-history' },
|
|
||||||
{ text: 'Offline', icon: 'mdi-check-circle' },
|
|
||||||
{ text: 'Uploads', icon: 'mdi-upload' },
|
|
||||||
{ text: 'Backups', icon: 'mdi-cloud-upload' },
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data: () => ({
|
|
||||||
items: [
|
|
||||||
{ text: 'My Files', icon: 'mdi-folder' },
|
|
||||||
{ text: 'Shared with me', icon: 'mdi-account-multiple' },
|
|
||||||
{ text: 'Starred', icon: 'mdi-star' },
|
|
||||||
{ text: 'Recent', icon: 'mdi-history' },
|
|
||||||
{ text: 'Offline', icon: 'mdi-check-circle' },
|
|
||||||
{ text: 'Uploads', icon: 'mdi-upload' },
|
|
||||||
{ text: 'Backups', icon: 'mdi-cloud-upload' },
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user