Fix scoping and toast notifications for auth/settings page

components/firebase/login.vue

@@ -50,31 +50,37 @@ 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", true)
                   fb.writeSettings("syncCollections", true)
                   fb.writeSettings("syncEnvironments", true)
-                  this.$router.push({ path: "/settings" })
+                  self.$router.push({ path: "/settings" })
                   toastObject.remove()
                 },
               },
             })
           }
+          self.showLoginSuccess()
         })
         .catch(err => {
           // An error happened.
@@ -86,90 +92,98 @@ export default {
             // The provider account's email address.
             var email = err.email
             // Get sign-in methods for this email.
-            auth.fetchSignInMethodsForEmail(email).then(function(methods) {
+            firebase
-              // Step 3.
+              .auth()
-              // If the user has several sign-in methods,
+              .fetchSignInMethodsForEmail(email)
-              // the first method in the list will be the "recommended" method to use.
+              .then(function(methods) {
-              if (methods[0] === "password") {
+                // Step 3.
-                // Asks the user their password.
+                // If the user has several sign-in methods,
-                // In real scenario, you should handle this asynchronously.
+                // the first method in the list will be the "recommended" method to use.
-                var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                if (methods[0] === "password") {
-                auth
+                  // Asks the user their password.
-                  .signInWithEmailAndPassword(email, password)
+                  // In real scenario, you should handle this asynchronously.
-                  .then(function(user) {
+                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
-                    // Step 4a.
+                  auth
-                    return user.linkWithCredential(pendingCred)
+                    .signInWithEmailAndPassword(email, password)
-                  })
+                    .then(function(user) {
-                  .then(function() {
+                      // Step 4a.
-                    // Google account successfully linked to the existing Firebase user.
+                      return user.linkWithCredential(pendingCred)
-                    goToApp()
-                  })
-                return
-              }
-
-              this.$toast.info(`${this.$t("login_with")}`, {
-                icon: "vpn_key",
-                duration: null,
-                closeOnSwipe: false,
-                action: {
-                  text: this.$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.
-                    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.
-                          goToApp()
-                        })
                     })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
+                }
 
-                    toastObject.remove()
+                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", true)
                   fb.writeSettings("syncCollections", true)
                   fb.writeSettings("syncEnvironments", true)
-                  this.$router.push({ path: "/settings" })
+                  self.$router.push({ path: "/settings" })
                   toastObject.remove()
                 },
               },
             })
           }
+          self.showLoginSuccess()
         })
         .catch(err => {
           // An error happened.
@@ -181,64 +195,70 @@ export default {
             // The provider account's email address.
             var email = err.email
             // Get sign-in methods for this email.
-            auth.fetchSignInMethodsForEmail(email).then(function(methods) {
+            firebase
-              // Step 3.
+              .auth()
-              // If the user has several sign-in methods,
+              .fetchSignInMethodsForEmail(email)
-              // the first method in the list will be the "recommended" method to use.
+              .then(function(methods) {
-              if (methods[0] === "password") {
+                // Step 3.
-                // Asks the user their password.
+                // If the user has several sign-in methods,
-                // In real scenario, you should handle this asynchronously.
+                // the first method in the list will be the "recommended" method to use.
-                var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                if (methods[0] === "password") {
-                auth
+                  // Asks the user their password.
-                  .signInWithEmailAndPassword(email, password)
+                  // In real scenario, you should handle this asynchronously.
-                  .then(function(user) {
+                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
-                    // Step 4a.
+                  firebase
-                    return user.linkWithCredential(pendingCred)
+                    .auth()
-                  })
+                    .signInWithEmailAndPassword(email, password)
-                  .then(function() {
+                    .then(function(user) {
-                    // Google account successfully linked to the existing Firebase user.
+                      // Step 4a.
-                    goToApp()
+                      return user.linkWithCredential(pendingCred)
-                  })
-                return
-              }
-
-              this.$toast.info(`${this.$t("login_with")}`, {
-                icon: "vpn_key",
-                duration: null,
-                closeOnSwipe: false,
-                action: {
-                  text: this.$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.
-                    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.
-                          goToApp()
-                        })
                     })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
+                }
 
-                    toastObject.remove()
+                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

@@ -382,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, "")
@@ -395,12 +400,13 @@ export default {
     },
     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(`${this.$t("turn_on")} ${this.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,
@@ -416,6 +422,7 @@ export default {
               },
             })
           }
+          self.showLoginSuccess()
         })
         .catch(err => {
           // An error happened.
@@ -427,90 +434,103 @@ export default {
             // The provider account's email address.
             var email = err.email
             // Get sign-in methods for this email.
-            auth.fetchSignInMethodsForEmail(email).then(function(methods) {
+            firebase
-              // Step 3.
+              .auth()
-              // If the user has several sign-in methods,
+              .fetchSignInMethodsForEmail(email)
-              // the first method in the list will be the "recommended" method to use.
+              .then(function(methods) {
-              if (methods[0] === "password") {
+                // Step 3.
-                // Asks the user their password.
+                // If the user has several sign-in methods,
-                // In real scenario, you should handle this asynchronously.
+                // the first method in the list will be the "recommended" method to use.
-                var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                if (methods[0] === "password") {
-                auth
+                  // Asks the user their password.
-                  .signInWithEmailAndPassword(email, password)
+                  // In real scenario, you should handle this asynchronously.
-                  .then(function(user) {
+                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
-                    // Step 4a.
+                  firebase
-                    return user.linkWithCredential(pendingCred)
+                    .auth()
-                  })
+                    .signInWithEmailAndPassword(email, password)
-                  .then(function() {
+                    .then(function(user) {
-                    // Google account successfully linked to the existing Firebase user.
+                      // Step 4a.
-                    goToApp()
+                      return user.linkWithCredential(pendingCred)
-                  })
-                return
-              }
-
-              this.$toast.info(`${this.$t("login_with")}`, {
-                icon: "vpn_key",
-                duration: null,
-                closeOnSwipe: false,
-                action: {
-                  text: this.$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.
-                    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.
-                          goToApp()
-                        })
                     })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
+                }
 
-                    toastObject.remove()
+                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) {
-            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", true)
                   fb.writeSettings("syncCollections", true)
                   fb.writeSettings("syncEnvironments", true)
-                  this.$router.push({ path: "/settings" })
+                  self.$router.push({ path: "/settings" })
                   toastObject.remove()
                 },
               },
             })
           }
+          self.$toast.info(self.$t("login_success"), {
+            icon: "vpn_key",
+          })
         })
         .catch(err => {
           // An error happened.
@@ -522,64 +542,72 @@ export default {
             // The provider account's email address.
             var email = err.email
             // Get sign-in methods for this email.
-            auth.fetchSignInMethodsForEmail(email).then(function(methods) {
+            firebase
-              // Step 3.
+              .auth()
-              // If the user has several sign-in methods,
+              .fetchSignInMethodsForEmail(email)
-              // the first method in the list will be the "recommended" method to use.
+              .then(function(methods) {
-              if (methods[0] === "password") {
+                // Step 3.
-                // Asks the user their password.
+                // If the user has several sign-in methods,
-                // In real scenario, you should handle this asynchronously.
+                // the first method in the list will be the "recommended" method to use.
-                var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                if (methods[0] === "password") {
-                auth
+                  // Asks the user their password.
-                  .signInWithEmailAndPassword(email, password)
+                  // In real scenario, you should handle this asynchronously.
-                  .then(function(user) {
+                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
-                    // Step 4a.
+                  auth
-                    return user.linkWithCredential(pendingCred)
+                    .signInWithEmailAndPassword(email, password)
-                  })
+                    .then(function(user) {
-                  .then(function() {
+                      // Step 4a.
-                    // Google account successfully linked to the existing Firebase user.
+                      return user.linkWithCredential(pendingCred)
-                    goToApp()
-                  })
-                return
-              }
-
-              this.$toast.info(`${this.$t("login_with")}`, {
-                icon: "vpn_key",
-                duration: null,
-                closeOnSwipe: false,
-                action: {
-                  text: this.$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.
-                    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.
-                          goToApp()
-                        })
                     })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.$toast.info(self.$t("login_success"), {
+                        icon: "vpn_key",
+                      })
+                    })
+                  return
+                }
 
-                    toastObject.remove()
+                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()
+                    },
                   },
-                },
+                })
               })
-            })
           }
         })
     },
@@ -589,15 +617,16 @@ export default {
     },
     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",
       })
     },