Big cleanup for styling

frontend/src/views/LoginView.vue

@@ -1,39 +1,48 @@
 <template>
-  <div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
-    <!-- Image -->
-    <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
 
-    <!-- Message -->
-    <div class="text-lg text-gray-700 mt-8">
-      <p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
-      <p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p>
-      <p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
+  <div class="flex min-h-screen items-center">
+    <div class="card justify-items-center">
+
+      <img alt="hutopy login"
+           src="/images/hutopy-logo.png"/>
+
+      <div class="flex flex-col w-[800px] gap-10 justify-items-center">
+
+        <h1 class="text-2xl font-bold login-text text-center mt-10">
+          Connexion
+        </h1>
+
+        <google-login :callback="googleCallback"
+                      class="w-full justify-items-center"
+                      popup-type="TOKEN">
+          <button class="secondary w-full">
+            <v-icon left>mdi-google</v-icon>
+            Google
+          </button>
+        </google-login>
+
+      </div>
+
     </div>
-  </div>
-  
-  <div>
-    <div class="flex items-start justify-center  py-2">
-  <div class="max-w-[600px] mt-[10%] ">
-    <img class="rounded-2xl"
-         src="/images/hutopymedia/loginpage/loginhutopy.png"
-         alt="hutopy login">
 
-    <login-form></login-form>    
-  </div>
-  </div>
   </div>
+
 </template>
 
 <script setup>
-import LoginForm from "@/views/main/LoginForm.vue";
-import { useDisplay } from "vuetify";
-import {ref, watch} from "vue";
+import {ref} from 'vue';
+import {GoogleLogin} from "vue3-google-login";
+import {useAuthStore} from '@/stores/authStore.js';
 
-const { smAndDown } = useDisplay();
-const isMobileView = ref(smAndDown.value);
+const authStore = useAuthStore();
 
-watch(smAndDown, (newVal) => {
-  isMobileView.value = newVal;
-});
+const errorSnackBar = ref(false);
+
+async function googleCallback(token) {
+  const response = await authStore.loginWithGoogle(JSON.stringify(token));
+  if (response !== true) {
+    errorSnackBar.value = true;
+  }
+}
 
 </script>