From 96172310738a57df72b4b1784c56f617c1ffb647 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 30 Jun 2024 17:04:22 -0400
Subject: [PATCH] Login modification - change UI clean code

---
 src/views/LoginView.vue           | 202 +++++++++++++-----------------
 src/views/main/Home.vue           |   7 +-
 src/views/main/SelectedFooter.vue |  48 +++++++
 3 files changed, 140 insertions(+), 117 deletions(-)
 create mode 100644 src/views/main/SelectedFooter.vue

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index e282c2d..9828bed 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,143 +1,113 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center">
-    <!-- Desktop View -->
-    <div class="hidden sm:flex items-center justify-center w-full">
-      <div class="container mx-auto px-4 flex items-center justify-center">
-        <!-- Header -->
-        <div class="w-full lg:w-6/12 md:w-6/12 sm:w-6/12 xs:w-6/12 flex items-center justify-center">
-          <img class="rounded-2xl mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
-        </div>
-        <!-- Connexion-objects -->
-        <div class="lg:w-4/12 md:w-6/12 sm:w-6/12 xs:w-6/12  rounded-lg p-8">
-          <h1 class="text-center text-2xl font-bold mb-6">Connexion</h1>
-          <div class="mb-4">
-            <!-- TODO: Fix input box overflowing when screen it too small -->
-            <form class="mb-4">
-              <div class="mb-4">
-                <input type="text" v-model="user.email" placeholder="Nom d'utilisateur" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
-              </div>
-              <div class="mb-4">
-                <input type="password" v-model="user.password" placeholder="Mot de passe" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
-              </div>
-            </form>
-          </div>
-          <div v-if="errorSnackBar" class="mb-4 text-red-600">
-            Nom d'utilisateur ou mot de passe invalide.
-            <button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
-          </div>
-          <div class="flex justify-center mb-4">
-            <button class="bg-blue-500 text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-400 transition-colors duration-300 ease-in-out" @click="login">Login</button>
-          </div>
-          <div class="flex justify-center mb-4">
-            <!-- TODO: Remove custom elements -->
-            <google-login :callback="googleCallback" popup-type="TOKEN">
-              <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-500 transition-colors duration-300 ease-in-out mr-2 flex items-center">
-                <svg class="w-5 h-5 mr-2" viewBox="0 0 512 512">
-                  <path xmlns="http://www.w3.org/2000/svg" d="M473.16,221.48l-2.26-9.59H262.46v88.22H387c-12.93,61.4-72.93,93.72-121.94,93.72-35.66,0-73.25-15-98.13-39.11a140.08,140.08,0,0,1-41.8-98.88c0-37.16,16.7-74.33,41-98.78s61-38.13,97.49-38.13c41.79,0,71.74,22.19,82.94,32.31l62.69-62.36C390.86,72.72,340.34,32,261.6,32h0c-60.75,0-119,23.27-161.58,65.71C58,139.5,36.25,199.93,36.25,256S56.83,369.48,97.55,411.6C141.06,456.52,202.68,480,266.13,480c57.73,0,112.45-22.62,151.45-63.66,38.34-40.4,58.17-96.3,58.17-154.9C475.75,236.77,473.27,222.12,473.16,221.48Z"/>
-                </svg>
-                Google
-              </button>
-            </google-login>
-            <facebook-auth :appId="facebookAppId" @on-submit="facebookCallback">
-              <button class="bg-blue-700 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-300 ease-in-out flex items-center">
-                <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
-                  <path fill="#ffffff" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.406.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.796.143v3.24l-1.918.001c-1.504 0-1.794.714-1.794 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.406 24 22.676V1.325C24 .593 23.407 0 22.675 0z"></path>
-                </svg>
-                Facebook
-              </button>
-            </facebook-auth>
-          </div>
-          <div class="text-center">
-            <h2 class="text-xl mb-4">Pas de compte ?</h2>
-            <router-link :to="{ name: 'join' }">
-              <button class="bg-purple-800 text-white px-4 py-2 rounded-full shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out" style="width: 200px;">Inscriptions</button>
-            </router-link>
-          </div>
-        </div>
-      </div>
+  <div class="hidden sm:block" style="height: 40px"></div>
+
+  <div>
+  <div class="flex flex-col lg:flex-row items-center justify-center">
+    <div class="max-w-[700px] min-w-[300px]">
+      <img class="rounded-none sm:rounded-2xl sm:w-full mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
     </div>
 
-    <!-- Mobile View -->
-    <div class="sm:hidden flex flex-col items-center justify-center w-full">
-      <img class="w-72 shadow-lg rounded-lg mb-6" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
-      <h1 class="text-center text-2xl font-bold mb-4">Connexion</h1>
-      <h2 class="text-center text-xl mb-4">Comment souhaitez-vous vous connecter à votre compte?</h2>
-      <form class="w-72 mb-4">
-        <div class="mb-4">
-          <input type="text" v-model="user.email" placeholder="Nom d'utilisateur" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
+    <div class="flex flex-col items-center min-w-[300px] m-12">
+      <h1 class="text-center text-2xl font-bold mb-5">Connexion</h1>
+      
+      <google-login class="w-full" :callback="googleCallback" popup-type="TOKEN">
+        <template #default>
+          <v-btn density="comfortable" class="mb-2 w-full">
+            <v-icon left>mdi-google</v-icon>
+            Google
+          </v-btn>
+        </template>
+      </google-login>
+
+<!--      <v-btn density="comfortable" class="mb-2 w-full">-->
+<!--        <v-icon left>mdi-facebook</v-icon>-->
+<!--        Facebook-->
+<!--      </v-btn>-->           
+  
+      <div class="w-full h-0.5 mb-2 mt-4 mb-4" :style="{ backgroundColor: '#A30E79' }"></div>
+
+      <v-btn density="comfortable" class="mb-2 w-full" @click="showEmailForm = !showEmailForm">
+        <v-icon left>mdi-account</v-icon>
+        Utilisateur
+      </v-btn>
+
+      <div v-if="showEmailForm" class="w-full mt-2">
+        <v-text-field v-model="user.email"
+            label="Courriel"
+            variant="outlined"
+            dense
+            prepend-inner-icon="mdi-email"
+            color="transparent"
+            class="text-black"
+        ></v-text-field>
+
+        <v-text-field v-model="user.password"
+            label="Mot de passe"
+            :type="showPassword ? 'text' : 'password'"
+            variant="outlined"
+            dense
+            prepend-inner-icon="mdi-lock"
+            append-inner-icon="mdi-eye"
+            @click:append-inner="showPassword = !showPassword"
+            color="transparent"
+            class="text-black"
+        ></v-text-field>
+
+        <v-btn class="w-full text-center text-white" :style="{ backgroundColor: '#A30E79' }" @click="login">Connecter</v-btn>
+
+        <p class="mt-4 text-sm text-center">
+          Si vous n'avez pas de compte, <a href="/register" class="text-blue-500">cliquez ici</a> pour en créer un.
+        </p>
+
+        <div v-if="errorSnackBar" class="mb-4 text-red-600">
+          Nom d'utilisateur ou mot de passe invalide.
+          <button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
         </div>
-        <div class="mb-4">
-          <input type="password" v-model="user.password" placeholder="Mot de passe" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
-        </div>
-      </form>
-      <div class="flex justify-end w-72 mb-4">
-        <router-link to="/">
-          <button class="bg-purple-800 text-white px-4 py-2 rounded-lg shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out mr-2">Accueil</button>
-        </router-link>
-        <button class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-400 transition-colors duration-300 ease-in-out" @click="login">Login</button>
-      </div>
-      <div class="flex justify-center mb-4">
-        <google-login :callback="googleCallback" popup-type="TOKEN">
-          <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-500 transition-colors duration-300 ease-in-out mr-2 flex items-center">
-            <svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="-3 0 262 262" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
-          </button>
-        </google-login>
-        <facebook-auth :appId="facebookAppId" @on-submit="facebookCallback">
-          <button class="bg-blue-700 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-300 ease-in-out flex items-center">
-            <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
-              <path fill="#ffffff" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.406.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.796.143v3.24l-1.918.001c-1.504 0-1.794.714-1.794 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.406 24 22.676V1.325C24 .593 23.407 0 22.675 0z"></path>
-            </svg>
-            Facebook Login
-          </button>
-        </facebook-auth>
-      </div>
-      <div class="text-center">
-        <h2 class="text-xl mb-4">Pas encore inscrit?</h2>
-        <router-link :to="{ name: 'join' }">
-          <button class="bg-purple-800 text-white px-4 py-2 rounded-full shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out" style="width: 200px;">Inscriptions</button>
-        </router-link>
       </div>
     </div>
   </div>
+  </div>
+ 
+
+  <selected-footer class="py-15"></selected-footer>
+  
 </template>
 
 <script setup>
-import {auth} from '@/stores/auth.js';
-import {ref} from 'vue';
-import {useRouter} from 'vue-router';
-import {useClient} from "@/plugins/api.js";
-import {GoogleLogin} from "vue3-google-login";
-import {FacebookAuth} from '@xtiannyeto/vue-auth-social';
-
-const api = useClient()
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useClient } from "@/plugins/api.js";
+import { auth } from '@/stores/auth.js';
+import { GoogleLogin } from "vue3-google-login";
+import { FacebookAuth } from '@xtiannyeto/vue-auth-social';
+import SelectedFooter from "@/views/main/SelectedFooter.vue";
 
+const api = useClient();
 const store = auth();
-const router = useRouter()
+const router = useRouter();
 
-let user = ref({});
-let errorSnackBar = ref(false);
+const user = ref({});
+const errorSnackBar = ref(false);
+const showEmailForm = ref(false);
+const showPassword = ref(false);
 
 async function login() {
-  // TODO: Make the store handle errors
   try {
-    await store.login(api, user.value.email, user.value.password)
+    await store.login(api, user.value.email, user.value.password);
     await router.push('/');
+    window.location.reload();
   } catch (error) {
     errorSnackBar.value = true;
   }
-  window.location.reload();
 }
 
 const googleCallback = async (response) => {
-  // TODO: Make the store handle errors
-  await store.loginGoogle(api, response["access_token"])
+  await store.loginGoogle(api, response["access_token"]);
   await router.push("/");
-}
-
+};
 
 const facebookAppId = import.meta.env.VITE_FACEBOOK_APP_ID;
-const facebookCallback = async (response) => {
-  console.log("User Successfully Logged In", response)
-}
-
+const facebookCallback = (response) => {
+  console.log("User Successfully Logged In", response);
+};
 </script>
diff --git a/src/views/main/Home.vue b/src/views/main/Home.vue
index 4722aba..c1df310 100644
--- a/src/views/main/Home.vue
+++ b/src/views/main/Home.vue
@@ -80,14 +80,19 @@
           <RouterLink to="/browse">
             <button class="px-6 py-3 bg-purple-700 text-white rounded-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out">Découvre les autres créateurs</button>
           </RouterLink>
+      
         </div>
+        <selected-footer></selected-footer>
       </div>
     </div>
-
+ 
   </div>
+  
+  
 </template>
 
 <script setup>
+import SelectedFooter from "@/views/main/SelectedFooter.vue";
 </script>
 
 <style scoped>
diff --git a/src/views/main/SelectedFooter.vue b/src/views/main/SelectedFooter.vue
new file mode 100644
index 0000000..0b5fe9f
--- /dev/null
+++ b/src/views/main/SelectedFooter.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="flex justify-center items-center max-w-[300px] pt-28 mx-auto">
+    <img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy">
+  </div>
+
+  <div class="flex flex-row justify-center space-x-10 py-10">
+    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+      <img class="max-h-10" src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Facebook">
+    </a>
+
+    <a href="https://www.instagram.com/hutopy.inc/">
+      <img class="max-h-10" src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Instagram">
+    </a>
+
+    <a href="https://x.com/Hutopyinc/">
+      <img class="max-h-10" src="/images/hutopymedia/icons/pink/xpink.png" alt="X">
+    </a>
+  </div>
+
+  <div class="flex flex-row flex-wrap justify-center space-x-2 py-2 pb-6">
+    <router-link to="/helpandcontact">
+      <v-btn variant="plain"> Aide & Contact</v-btn>
+    </router-link>
+    <router-link to="/faq">
+      <v-btn variant="plain"> FAQ</v-btn>
+    </router-link>
+    <router-link to="/guideforcreators">
+      <v-btn variant="plain"> Guide pour les créateurs</v-btn>
+    </router-link>
+    <router-link to="/termsandconditions">
+      <v-btn variant="plain"> TermsAndConditions </v-btn>
+    </router-link>
+    <router-link to="/contentpolicy">
+      <v-btn variant="plain"> Politique de Contenu </v-btn>
+    </router-link>
+    <router-link to="/about">
+      <v-btn variant="plain"> À Propos</v-btn>
+    </router-link>
+    <router-link to="/pricing">
+      <v-btn variant="plain"> Frais</v-btn>
+    </router-link>
+  </div>
+
+
+</template>
+
+<script setup lang="ts">
+</script>
\ No newline at end of file