Modifications ajouter d'éléments dans Signup + login view modification basic
This commit is contained in:
PascalMarchesseault
@@ -14,8 +14,8 @@
|
||||
<!-- 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>
|
||||
<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"
|
||||
@@ -38,9 +38,7 @@
|
||||
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
|
||||
</v-card-actions>
|
||||
<div class="text-center">
|
||||
<h2 class="text-center display-3 h2pasinscrit">
|
||||
Pas encore
|
||||
inscrit?</h2>
|
||||
<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>
|
||||
@@ -88,19 +86,16 @@
|
||||
</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 { auth } from '@/stores/auth.js';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
|
||||
const api = useClient()
|
||||
|
||||
@@ -112,8 +107,8 @@ let errorSnackBar = ref(false);
|
||||
|
||||
async function login() {
|
||||
try {
|
||||
await store.login(api, 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;
|
||||
}
|
||||
@@ -135,7 +130,6 @@ async function login() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 300px) {
|
||||
.h1-connexion {
|
||||
font-size: 2em;
|
||||
|
||||
@@ -1,65 +1,73 @@
|
||||
<template>
|
||||
<div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
|
||||
<div class="main-left">
|
||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
||||
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
|
||||
<v-app style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
|
||||
took a galley of type and scrambled it to make a type specimen book. It has survived not only five
|
||||
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
||||
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
|
||||
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
|
||||
|
||||
<p class="font-bold"> Already have an account ? <RouterLink :to="{ 'name': 'login' }" class="underline">Click
|
||||
here</RouterLink> to log in! </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-right">
|
||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
||||
<form class="space-y-6">
|
||||
|
||||
<div>
|
||||
<label>Name</label> <br>
|
||||
<input type="text" placeholder="Your full name"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>E-mail</label> <br>
|
||||
<input type="email" placeholder="Your e-mail adress"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Password</label> <br>
|
||||
<input type="password" placeholder="Your password"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Repeat Password</label> <br>
|
||||
<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>
|
||||
<v-row>
|
||||
<v-col cols=6 align="center">
|
||||
<v-img class="login-picture" max-width="500" src=" ../../images/hutopyblack.png"
|
||||
style="margin-top: 100px; margin-bottom: 50px"></v-img>
|
||||
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
|
||||
<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.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
|
||||
unknown printer
|
||||
took a galley of type and scrambled it to make a type specimen book. It has survived not
|
||||
only
|
||||
five centuries, but also the leap into electronic typesetting, remaining essentially
|
||||
unchanged. It
|
||||
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
|
||||
passages,
|
||||
and more recently with desktop publishing software like Aldus PageMaker including versions
|
||||
of Lorem
|
||||
Ipsum.
|
||||
</p>
|
||||
<p class="font-bold">
|
||||
Already have an account?
|
||||
<RouterLink :to="{ 'name': 'login' }" class="underline">Click here</RouterLink> to log in!
|
||||
</p>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" md="6" lg="6">
|
||||
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
|
||||
<form class="space-y-6">
|
||||
<div>
|
||||
<label>Name</label> <br>
|
||||
<input type="text" placeholder="Your full name"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<label>E-mail</label> <br>
|
||||
<input type="email" placeholder="Your e-mail adress"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<label>Password</label> <br>
|
||||
<input type="password" placeholder="Your password"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<label>Repeat Password</label> <br>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div></template>
|
||||
<style></style>
|
||||
@@ -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