feat(Auth): Facebook auth. Closes #154

antoinezanardi · Mar 25, 2021 · 3de2d7c · 3de2d7c
1 parent 84c5eff
commit 3de2d7c
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## 1.0.0-beta.12 (2021-??-??)
 
+### 🚀 New features
+
+* [#154](https://github.com/antoinezanardi/werewolves-assistant-web/issues/154) - Facebook auth.
+
 ### 📦 Packages
 
 * `vue-facebook-login-component` installed with version `4.0.1`.

diff --git a/src/assets/scss/_vue-facebook-login-component.scss b/src/assets/scss/_vue-facebook-login-component.scss
@@ -0,0 +1,8 @@
+.v-facebook-login {
+    margin: auto;
+    cursor: pointer !important;
+
+    .v-loader {
+        display: none;
+    }
+}
diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss
@@ -17,6 +17,7 @@
 @import "transitions";
 @import "v-tooltip";
 @import "vue-backtotop";
+@import "vue-facebook-login-component";
 @import "vue-flip";
 @import "vue-lazyload";
 @import "vue-roller";

diff --git a/src/components/Home/AccountModal/FacebookLoginButton.vue b/src/components/Home/AccountModal/FacebookLoginButton.vue
@@ -1,25 +1,34 @@
 <template>
-    <VFacebookLogin ref="facebook" :app-id="appId" :login-options="loginOptions" @login="login" @sdk-init="initSDK"/>
+    <VFacebookLogin ref="facebook" :app-id="appId" :login-options="loginOptions" @login="login" @sdk-init="initSDK">
+        <template #login>
+            <span v-html="$t('FacebookLoginButton.logInWithFacebook')"/>
+        </template>
+        <template #working>
+            <Loading :icon-size="15"/>
+        </template>
+    </VFacebookLogin>
 </template>
 
 <script>
 import { mapActions } from "vuex";
 import VFacebookLogin from "vue-facebook-login-component";
 import Config from "../../../../config";
+import Loading from "@/components/shared/Loading";
 
 export default {
     name: "FacebookLoginButton",
-    components: { VFacebookLogin },
+    components: { Loading, VFacebookLogin },
     data() {
         return {
-            SDK: undefined,
-            appId: Config.facebook.app.ID,
-            version: "v10.0",
-            loginOptions: {
+            "SDK": undefined,
+            "appId": Config.facebook.app.ID,
+            "version": "v10.0",
+            "loginOptions": {
                 scope: "email",
                 // eslint-disable-next-line camelcase
                 auth_type: "rerequest",
             },
+            "sdk-locale": "fr-FR",
         };
     },
     methods: {
@@ -32,10 +41,11 @@ export default {
                 if (data) {
                     await this.loginWithFacebook(data.authResponse.accessToken);
                     this.$emit("hide-account-modal");
-                    this.SDK.scope.logout();
                 }
             } catch (err) {
                 this.$error.display(err);
+            } finally {
+                this.SDK.scope.logout();
             }
         },
     },

diff --git a/src/components/Home/AccountModal/LoginPanel.vue b/src/components/Home/AccountModal/LoginPanel.vue
@@ -54,7 +54,7 @@
         </div>
         <div class="row">
             <div class="col-12">
-                <FacebookLoginButton class="mt-2" @hide-account-modal="hideAccountModal"/>
+                <FacebookLoginButton class="mt-2 text-center" @hide-account-modal="hideAccountModal"/>
             </div>
         </div>
     </div>

diff --git a/src/plugins/error/index.js b/src/plugins/error/index.js
@@ -8,7 +8,7 @@ const Error = {
         Vue.prototype.$error.display = error => {
             if (isAPIError(error)) {
                 const { response } = error;
-                Vue.prototype.$toasted.error(i18n.t(`Error.${response.data.type}`), { icon: "times" });
+                Vue.prototype.$toasted.error(i18n.t(`Error.${response.data.type}`), { icon: "times", duration: 5000 });
             } else if (Router.currentRoute.name !== "Home" && error.response.status === 401) {
                 Router.push("/");
                 Vue.prototype.$toasted.error(i18n.t(`Error.yourSessionHasExpired`), { icon: "times" });

diff --git a/src/plugins/vue-i18n/fr.json b/src/plugins/vue-i18n/fr.json
@@ -166,6 +166,9 @@
         "loggedInWithFacebook": "Connecté avec Facebook",
         "loggedOut": "Déconnecté"
     },
+    "FacebookLoginButton": {
+        "logInWithFacebook": "Se connecter avec Facebook"
+    },
     "AccountModal": {
         "logIn": "Se connecter",
         "register": "S'inscrire",
@@ -1440,6 +1443,11 @@
         "EMAIL_EXISTS": "Cet e-mail est déjà utilisé par un autre compte",
         "TIE_IN_VOTES": "Il ne peut pas y avoir d'égalité dans les votes",
         "TOO_MANY_REQUESTS": "Trop de requêtes d'un coup... Calm down !",
+        "BAD_FACEBOOK_ACCESS_TOKEN": "Impossible de se connecter avec Facebook",
+        "NEED_FACEBOOK_EMAIL_PERMISSION": "Veuillez autoriser le partage de votre email pour vous connecter avec Facebook",
+        "EMAIL_EXISTS_WITH_LOCAL_REGISTRATION": "L'email de ce compte est déjà utilisé par un compte enregistré sur l'Assistant. Veuillez vous connecter directement sur l'Assistant.",
+        "EMAIL_EXISTS_WITH_FACEBOOK_REGISTRATION": "L'email de ce compte est déjà utilisé par un compte enregistré avec Facebook. Veuillez vous connecter avec Facebook.",
+        "EMAIL_EXISTS_WITH_GOOGLE_REGISTRATION": "L'email de ce compte est déjà utilisé par un compte enregistré avec Google. Veuillez vous connecter avec Google.",
         "yourSessionHasExpired": "Votre session a expirée, veuillez vous reconnecter",
         "unknownError": "Erreur inconnue"
     },