Adds facebook login.

frontend/src/composables/useFacebookLogin.js

@@ -0,0 +1,76 @@
+import {onMounted, ref} from "vue";
+import {useHead} from "@vueuse/head";
+import {useAuthStore} from "@/stores/authStore.js";
+
+export function useFacebookLogin() {
+    const isSdkLoaded = ref(false);
+
+    /* TODO: FIND THE ACTUAL HUTOPY'S APP_ID */
+    const FACEBOOK_APP_ID = "1076433907621883";
+
+    useHead({
+        script: [
+            {
+                src: "https://connect.facebook.net/en_US/sdk.js",
+                async: true,
+                defer: true,
+                onload: "initializeFacebookSDK()",
+            },
+        ],
+    });
+
+    (function (d, s, id) {
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) {
+            return;
+        }
+        js = d.createElement(s);
+        js.id = id;
+        js.src = "https://connect.facebook.net/en_US/sdk.js";
+        fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
+
+    const initializeFacebookSDK = () => {
+        window.fbAsyncInit = function () {
+            FB.init({
+                appId: FACEBOOK_APP_ID,
+                xfbml: true,
+                version: 'v22.0'
+            });
+            FB.AppEvents.logPageView();
+
+            isSdkLoaded.value = true;
+        };
+
+    };
+
+    const loginWithFacebook = () => {
+        if (!isSdkLoaded.value) {
+            console.error("Facebook SDK non encore chargé !");
+            return;
+        }
+
+        window.FB.login(
+            (response) => {
+                if (response.authResponse) {
+                    console.log("Utilisateur connecté :", response);
+                    const authStore = useAuthStore();
+                    authStore.loginWithFacebook(response.authResponse);
+                } else {
+                    console.log("Connexion annulée ou échouée.");
+                }
+            },
+            {
+                scope: "public_profile,email"
+            }
+        );
+    };
+
+    onMounted(() => {
+        initializeFacebookSDK();
+    });
+
+    return {
+        loginWithFacebook,
+    };
+}

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>