Adds facebook login.

frontend/src/views/LoginView.vue

@@ -1,39 +1,13 @@
-<template>
-
-  <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>
-
-</template>
-
 <script setup>
 import {ref} from 'vue';
 import {GoogleLogin} from "vue3-google-login";
 import {useAuthStore} from '@/stores/authStore.js';
 
+import {useFacebookLogin} from "@/composables/useFacebookLogin";
+import Facebook from "@/views/svg/Facebook.vue";
+
+const {loginWithFacebook} = useFacebookLogin();
+
 const authStore = useAuthStore();
 
 const errorSnackBar = ref(false);
@@ -46,3 +20,49 @@ async function googleCallback(token) {
 }
 
 </script>
+
+<template>
+
+  <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>
+
+        <div class="w-full items-center justify-center flex flex-col gap-4">
+          <google-login :callback="googleCallback"
+                        class=""
+                        popup-type="TOKEN">
+            <button class="secondary w-full">
+              <v-icon left>mdi-google</v-icon>
+              Google
+            </button>
+          </google-login>
+
+          <button class="secondary w-full text-red-600"
+                  @click="loginWithFacebook">
+            <facebook class="social-icon"></facebook>
+            Facebook
+          </button>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<style scoped>
+.social-icon {
+  @apply w-5 h-5;
+  @apply text-base;
+}
+</style>