diff --git a/components/firebase/login.vue b/components/firebase/login.vue index 31120ba98..1734db5f3 100644 --- a/components/firebase/login.vue +++ b/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) { - // 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. - 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() - }) + 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 + } - 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) { - // 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. - 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() - }) + 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 + } - 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() + }, }, - }, + }) }) - }) } }) }, diff --git a/lang/en-US.js b/lang/en-US.js index e7c5e755c..344075d7a 100644 --- a/lang/en-US.js +++ b/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", diff --git a/pages/settings.vue b/pages/settings.vue index e032e65fe..43ff8f696 100644 --- a/pages/settings.vue +++ b/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) { - // 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. - 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() - }) + 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 + } - 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) { - // 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. - 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() - }) + 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 + } - 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", }) },