From e80bfff3a0f07ae51c0a19b89f355ca8738d2e92 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 20 Apr 2024 00:55:47 -0400
Subject: [PATCH] =?UTF-8?q?Modifications=20ajouter=20d'=C3=A9l=C3=A9ments?=
 =?UTF-8?q?=20dans=20Signup=20+=20login=20view=20modification=20basic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/LoginView.vue                 |  24 ++---
 src/views/SignupView.vue                | 126 +++++++++++++-----------
 src/views/main/CreatorFolioLeftMenu.vue |  64 ------------
 3 files changed, 76 insertions(+), 138 deletions(-)
 delete mode 100644 src/views/main/CreatorFolioLeftMenu.vue

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index d62c6d6..232770c 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -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;
diff --git a/src/views/SignupView.vue b/src/views/SignupView.vue
index 5ef6108..cf9eb95 100644
--- a/src/views/SignupView.vue
+++ b/src/views/SignupView.vue
@@ -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>
\ No newline at end of file
+<style></style>
\ No newline at end of file
diff --git a/src/views/main/CreatorFolioLeftMenu.vue b/src/views/main/CreatorFolioLeftMenu.vue
deleted file mode 100644
index 06250d4..0000000
--- a/src/views/main/CreatorFolioLeftMenu.vue
+++ /dev/null
@@ -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>
\ No newline at end of file