Merge branch 'master' into feat/quick-query-run

components/firebase/login.vue

@@ -50,64 +50,216 @@ export default {
       fb,
     }
   },
-
   methods: {
+    showLoginSuccess() {
+      this.$toast.info(this.$t("login_success"), {
+        icon: "vpn_key",
+      })
+    },
     signInWithGoogle() {
       const provider = new firebase.auth.GoogleAuthProvider()
+      const self = this
       firebase
         .auth()
         .signInWithPopup(provider)
         .then(({ additionalUserInfo }) => {
           if (additionalUserInfo.isNewUser) {
-            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+            self.$toast.info(`${self.$t("turn_on")} ${self.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,
               action: {
-                text: this.$t("yes"),
+                text: self.$t("yes"),
                 onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", false)
+                  fb.writeSettings("syncHistory", true)
                   fb.writeSettings("syncCollections", true)
-                  this.$router.push({ path: "/settings" })
+                  fb.writeSettings("syncEnvironments", true)
+                  self.$router.push({ path: "/settings" })
                   toastObject.remove()
                 },
               },
             })
           }
+          self.showLoginSuccess()
         })
         .catch(err => {
-          this.$toast.show(err.message || err, {
+          // An error happened.
-            icon: "error",
+          if (err.code === "auth/account-exists-with-different-credential") {
-          })
+            // Step 2.
+            // User's email already exists.
+            // The pending Google credential.
+            var pendingCred = err.credential
+            // The provider account's email address.
+            var email = err.email
+            // Get sign-in methods for this email.
+            firebase
+              .auth()
+              .fetchSignInMethodsForEmail(email)
+              .then(function(methods) {
+                // Step 3.
+                // If the user has several sign-in methods,
+                // the first method in the list will be the "recommended" method to use.
+                if (methods[0] === "password") {
+                  // Asks the user their password.
+                  // In real scenario, you should handle this asynchronously.
+                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                  auth
+                    .signInWithEmailAndPassword(email, password)
+                    .then(function(user) {
+                      // Step 4a.
+                      return user.linkWithCredential(pendingCred)
+                    })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
+                }
+
+                self.$toast.info(`${self.$t("login_with")}`, {
+                  icon: "vpn_key",
+                  duration: null,
+                  closeOnSwipe: false,
+                  action: {
+                    text: self.$t("yes"),
+                    onClick: (e, toastObject) => {
+                      // All the other cases are external providers.
+                      // Construct provider object for that provider.
+                      // TODO: implement getProviderForProviderId.
+                      var provider = new firebase.auth.GithubAuthProvider()
+                      // At this point, you should let the user know that they already has an account
+                      // but with a different provider, and let them validate the fact they want to
+                      // sign in with this provider.
+                      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
+                      // so in real scenario you should ask the user to click on a "continue" button
+                      // that will trigger the signInWithPopup.
+                      firebase
+                        .auth()
+                        .signInWithPopup(provider)
+                        .then(function(result) {
+                          // Remember that the user may have signed in with an account that has a different email
+                          // address than the first one. This can happen as Firebase doesn't control the provider's
+                          // sign in flow and the user is free to login using whichever account they own.
+                          // Step 4b.
+                          // Link to Google credential.
+                          // As we have access to the pending credential, we can directly call the link method.
+                          result.user
+                            .linkAndRetrieveDataWithCredential(pendingCred)
+                            .then(function(usercred) {
+                              // Google account successfully linked to the existing Firebase user.
+                              self.showLoginSuccess()
+                            })
+                        })
+
+                      toastObject.remove()
+                    },
+                  },
+                })
+              })
+          }
         })
     },
     signInWithGithub() {
       const provider = new firebase.auth.GithubAuthProvider()
+      const self = this
       firebase
         .auth()
         .signInWithPopup(provider)
         .then(({ additionalUserInfo }) => {
           if (additionalUserInfo.isNewUser) {
-            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+            self.$toast.info(`${self.$t("turn_on")} ${self.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,
               action: {
-                text: this.$t("yes"),
+                text: self.$t("yes"),
                 onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", false)
+                  fb.writeSettings("syncHistory", true)
                   fb.writeSettings("syncCollections", true)
-                  this.$router.push({ path: "/settings" })
+                  fb.writeSettings("syncEnvironments", true)
+                  self.$router.push({ path: "/settings" })
                   toastObject.remove()
                 },
               },
             })
           }
+          self.showLoginSuccess()
         })
         .catch(err => {
-          this.$toast.show(err.message || err, {
+          // An error happened.
-            icon: "error",
+          if (err.code === "auth/account-exists-with-different-credential") {
-          })
+            // Step 2.
+            // User's email already exists.
+            // The pending Google credential.
+            var pendingCred = err.credential
+            // The provider account's email address.
+            var email = err.email
+            // Get sign-in methods for this email.
+            firebase
+              .auth()
+              .fetchSignInMethodsForEmail(email)
+              .then(function(methods) {
+                // Step 3.
+                // If the user has several sign-in methods,
+                // the first method in the list will be the "recommended" method to use.
+                if (methods[0] === "password") {
+                  // Asks the user their password.
+                  // In real scenario, you should handle this asynchronously.
+                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                  firebase
+                    .auth()
+                    .signInWithEmailAndPassword(email, password)
+                    .then(function(user) {
+                      // Step 4a.
+                      return user.linkWithCredential(pendingCred)
+                    })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
+                }
+
+                self.$toast.info(`${self.$t("login_with")}`, {
+                  icon: "vpn_key",
+                  duration: null,
+                  closeOnSwipe: false,
+                  action: {
+                    text: self.$t("yes"),
+                    onClick: (e, toastObject) => {
+                      // All the other cases are external providers.
+                      // Construct provider object for that provider.
+                      // TODO: implement getProviderForProviderId.
+                      var provider = new firebase.auth.GoogleAuthProvider()
+                      // At this point, you should let the user know that they already has an account
+                      // but with a different provider, and let them validate the fact they want to
+                      // sign in with this provider.
+                      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
+                      // so in real scenario you should ask the user to click on a "continue" button
+                      // that will trigger the signInWithPopup.
+                      firebase
+                        .auth()
+                        .signInWithPopup(provider)
+                        .then(function(result) {
+                          // Remember that the user may have signed in with an account that has a different email
+                          // address than the first one. This can happen as Firebase doesn't control the provider's
+                          // sign in flow and the user is free to login using whichever account they own.
+                          // Step 4b.
+                          // Link to Google credential.
+                          // As we have access to the pending credential, we can directly call the link method.
+                          result.user
+                            .linkAndRetrieveDataWithCredential(pendingCred)
+                            .then(function(usercred) {
+                              self.showLoginSuccess()
+                            })
+                        })
+
+                      toastObject.remove()
+                    },
+                  },
+                })
+              })
+          }
         })
     },
   },

lang/en-US.js

@@ -258,6 +258,7 @@ export default {
   installed: "Installed",
   login_with: "Login with",
   logged_out: "Logged out",
+  login_success: "Successfully logged in",
   logout: "Logout",
   account: "Account",
   scrollInto_use_toggle: "Auto scroll",

pages/settings.vue

@@ -327,8 +327,7 @@ export default {
 
       settings: {
         SCROLL_INTO_ENABLED:
-          typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !==
+          typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
-          "undefined"
             ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
             : true,
 
@@ -383,6 +382,11 @@ export default {
       this.applySetting("THEME_COLOR", color.toUpperCase())
       this.applySetting("THEME_COLOR_VIBRANT", vibrant)
     },
+    showLoginSuccess() {
+      this.$toast.info(this.$t("login_success"), {
+        icon: "vpn_key",
+      })
+    },
     getActiveColor() {
       // This strips extra spaces and # signs from the strings.
       const strip = str => str.replace(/#/g, "").replace(/ /g, "")
@@ -394,84 +398,238 @@ export default {
       this.settings[key] = value
       this.$store.commit("postwoman/applySetting", [key, value])
     },
+    signInWithGoogle() {
+      const provider = new firebase.auth.GoogleAuthProvider()
+      const self = this
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .then(({ additionalUserInfo }) => {
+          if (additionalUserInfo.isNewUser) {
+            self.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", true)
+                  fb.writeSettings("syncCollections", true)
+                  fb.writeSettings("syncEnvironments", true)
+                  this.$router.push({ path: "/settings" })
+                  toastObject.remove()
+                },
+              },
+            })
+          }
+          self.showLoginSuccess()
+        })
+        .catch(err => {
+          // An error happened.
+          if (err.code === "auth/account-exists-with-different-credential") {
+            // Step 2.
+            // User's email already exists.
+            // The pending Google credential.
+            var pendingCred = err.credential
+            // The provider account's email address.
+            var email = err.email
+            // Get sign-in methods for this email.
+            firebase
+              .auth()
+              .fetchSignInMethodsForEmail(email)
+              .then(function(methods) {
+                // Step 3.
+                // If the user has several sign-in methods,
+                // the first method in the list will be the "recommended" method to use.
+                if (methods[0] === "password") {
+                  // Asks the user their password.
+                  // In real scenario, you should handle this asynchronously.
+                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                  firebase
+                    .auth()
+                    .signInWithEmailAndPassword(email, password)
+                    .then(function(user) {
+                      // Step 4a.
+                      return user.linkWithCredential(pendingCred)
+                    })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
+                }
+
+                self.$toast.info(`${self.$t("login_with")}`, {
+                  icon: "vpn_key",
+                  duration: null,
+                  closeOnSwipe: false,
+                  action: {
+                    text: self.$t("yes"),
+                    onClick: (e, toastObject) => {
+                      // All the other cases are external providers.
+                      // Construct provider object for that provider.
+                      // TODO: implement getProviderForProviderId.
+                      var provider = new firebase.auth.GithubAuthProvider()
+                      // At this point, you should let the user know that they already has an account
+                      // but with a different provider, and let them validate the fact they want to
+                      // sign in with this provider.
+                      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
+                      // so in real scenario you should ask the user to click on a "continue" button
+                      // that will trigger the signInWithPopup.
+                      firebase
+                        .auth()
+                        .signInWithPopup(provider)
+                        .then(function(result) {
+                          // Remember that the user may have signed in with an account that has a different email
+                          // address than the first one. This can happen as Firebase doesn't control the provider's
+                          // sign in flow and the user is free to login using whichever account they own.
+                          // Step 4b.
+                          // Link to Google credential.
+                          // As we have access to the pending credential, we can directly call the link method.
+                          result.user
+                            .linkAndRetrieveDataWithCredential(pendingCred)
+                            .then(function(usercred) {
+                              // Google account successfully linked to the existing Firebase user.
+                              self.$toast.info(self.$t("login_success"), {
+                                icon: "vpn_key",
+                              })
+                            })
+                        })
+
+                      toastObject.remove()
+                    },
+                  },
+                })
+              })
+          }
+        })
+    },
+    signInWithGithub() {
+      const provider = new firebase.auth.GithubAuthProvider()
+      const self = this
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .then(({ additionalUserInfo }) => {
+          if (additionalUserInfo.isNewUser) {
+            self.$toast.info(`${self.$t("turn_on")} ${self.$t("sync")}`, {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: self.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", true)
+                  fb.writeSettings("syncCollections", true)
+                  fb.writeSettings("syncEnvironments", true)
+                  self.$router.push({ path: "/settings" })
+                  toastObject.remove()
+                },
+              },
+            })
+          }
+          self.$toast.info(self.$t("login_success"), {
+            icon: "vpn_key",
+          })
+        })
+        .catch(err => {
+          // An error happened.
+          if (err.code === "auth/account-exists-with-different-credential") {
+            // Step 2.
+            // User's email already exists.
+            // The pending Google credential.
+            var pendingCred = err.credential
+            // The provider account's email address.
+            var email = err.email
+            // Get sign-in methods for this email.
+            firebase
+              .auth()
+              .fetchSignInMethodsForEmail(email)
+              .then(function(methods) {
+                // Step 3.
+                // If the user has several sign-in methods,
+                // the first method in the list will be the "recommended" method to use.
+                if (methods[0] === "password") {
+                  // Asks the user their password.
+                  // In real scenario, you should handle this asynchronously.
+                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                  auth
+                    .signInWithEmailAndPassword(email, password)
+                    .then(function(user) {
+                      // Step 4a.
+                      return user.linkWithCredential(pendingCred)
+                    })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.$toast.info(self.$t("login_success"), {
+                        icon: "vpn_key",
+                      })
+                    })
+                  return
+                }
+
+                self.$toast.info(`${this.$t("login_with")}`, {
+                  icon: "vpn_key",
+                  duration: null,
+                  closeOnSwipe: false,
+                  action: {
+                    text: self.$t("yes"),
+                    onClick: (e, toastObject) => {
+                      // All the other cases are external providers.
+                      // Construct provider object for that provider.
+                      // TODO: implement getProviderForProviderId.
+                      var provider = new firebase.auth.GoogleAuthProvider()
+                      // At this point, you should let the user know that they already has an account
+                      // but with a different provider, and let them validate the fact they want to
+                      // sign in with this provider.
+                      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
+                      // so in real scenario you should ask the user to click on a "continue" button
+                      // that will trigger the signInWithPopup.
+                      firebase
+                        .auth()
+                        .signInWithPopup(provider)
+                        .then(function(result) {
+                          // Remember that the user may have signed in with an account that has a different email
+                          // address than the first one. This can happen as Firebase doesn't control the provider's
+                          // sign in flow and the user is free to login using whichever account they own.
+                          // Step 4b.
+                          // Link to Google credential.
+                          // As we have access to the pending credential, we can directly call the link method.
+                          result.user
+                            .linkAndRetrieveDataWithCredential(pendingCred)
+                            .then(function(usercred) {
+                              // Google account successfully linked to the existing Firebase user.
+                              self.showLoginSuccess()
+                            })
+                        })
+
+                      toastObject.remove()
+                    },
+                  },
+                })
+              })
+          }
+        })
+    },
     toggleSetting(key) {
       this.settings[key] = !this.settings[key]
       this.$store.commit("postwoman/applySetting", [key, this.settings[key]])
     },
     logout() {
       fb.currentUser = null
+      const self = this
       firebase
         .auth()
         .signOut()
         .catch(err => {
-          this.$toast.show(err.message || err, {
+          self.$toast.show(err.message || err, {
             icon: "error",
           })
         })
-      this.$toast.info(this.$t("logged_out"), {
+      self.$toast.info(this.$t("logged_out"), {
         icon: "vpn_key",
       })
     },
-    signInWithGoogle() {
-      const provider = new firebase.auth.GoogleAuthProvider()
-      firebase
-        .auth()
-        .signInWithPopup(provider)
-        .then(({ additionalUserInfo }) => {
-          if (additionalUserInfo.isNewUser) {
-            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
-              icon: "sync",
-              duration: null,
-              closeOnSwipe: false,
-              action: {
-                text: this.$t("yes"),
-                onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", true)
-                  fb.writeSettings("syncCollections", true)
-                  fb.writeSettings("syncEnvironments", true)
-                  this.$router.push({ path: "/settings" })
-                  toastObject.remove()
-                },
-              },
-            })
-          }
-        })
-        .catch(err => {
-          this.$toast.show(err.message || err, {
-            icon: "error",
-          })
-        })
-    },
-    signInWithGithub() {
-      const provider = new firebase.auth.GithubAuthProvider()
-      firebase
-        .auth()
-        .signInWithPopup(provider)
-        .then(({ additionalUserInfo }) => {
-          if (additionalUserInfo.isNewUser) {
-            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
-              icon: "sync",
-              duration: null,
-              closeOnSwipe: false,
-              action: {
-                text: this.$t("yes"),
-                onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", true)
-                  fb.writeSettings("syncCollections", true)
-                  fb.writeSettings("syncEnvironments", true)
-                  this.$router.push({ path: "/settings" })
-                  toastObject.remove()
-                },
-              },
-            })
-          }
-        })
-        .catch(err => {
-          this.$toast.show(err.message || err, {
-            icon: "error",
-          })
-        })
-    },
     toggleSettings(s, v) {
       fb.writeSettings(s, !v)
     },