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

Modifications ajouter d'éléments dans Signup + login view modification basic

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-20 00:55:47 -04:00
parent 40505f0dcf
commit e80bfff3a0
3 changed files with 76 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/LoginView.vue
View File

@@ -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,10 +86,7 @@
</div> </div>
</div> </div>
</v-app> </v-app>
</template> </template>
@@ -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;

78
src/views/SignupView.vue
View File

@@ -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">
<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> <h1 class="mb-6 text-2xl font-bold">Sign up</h1>
<p class="mb-6 texte-gray-500">
<p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
took a galley of type and scrambled it to make a type specimen book. It has survived not only five unknown printer
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was took a galley of type and scrambled it to make a type specimen book. It has survived not
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more only
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It
<p class="font-bold"> Already have an account ? <RouterLink :to="{ 'name': 'login' }" class="underline">Click was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
here</RouterLink> to log in! </p> 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> </v-col>
<v-col cols="6" sm="6" md="6" lg="6">
<div class="main-right"> <div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
<div class="p-12 bg-white border border-gray-200 rounded-lg">
<form class="space-y-6"> <form class="space-y-6">
<div> <div>
<label>Name</label> <br> <label>Name</label> <br>
<input type="text" placeholder="Your full name" <input type="text" placeholder="Your full name"
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> <div>
<label>E-mail</label> <br> <label>E-mail</label> <br>
<input type="email" placeholder="Your e-mail adress" <input type="email" placeholder="Your e-mail adress"
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> <div>
<label>Password</label> <br> <label>Password</label> <br>
<input type="password" placeholder="Your password" <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> <div>
<label>Repeat Password</label> <br> <label>Repeat Password</label> <br>
<input type="password" placeholder="Repeat your password" <input type="password" placeholder="Repeat 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> <div>
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg">Sign up</button> <button class="py-4 px-6 bg-purple-600 text-white rounded-lg">Sign up</button>
</div> </div>
</form> </form>
</div> </div>
</div> </v-col>
</v-row>
</div></template>
<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>

64
src/views/main/CreatorFolioLeftMenu.vue
View File

@@ -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>