diff --git a/components/firebase/login.vue b/components/firebase/login.vue index 1734db5f3..c7e4dafd5 100644 --- a/components/firebase/login.vue +++ b/components/firebase/login.vue @@ -1,43 +1,38 @@ diff --git a/components/layout/header.vue b/components/layout/header.vue index bd0a20b10..6f590d34f 100644 --- a/components/layout/header.vue +++ b/components/layout/header.vue @@ -35,46 +35,48 @@ > offline_bolt - - - - - +
- -
+

- -
- +

@@ -248,6 +216,8 @@ export default { "pw-section": () => import("../components/layout/section"), "pw-toggle": () => import("../components/ui/toggle"), swatch: () => import("../components/settings/swatch"), + login: () => import("../components/firebase/login"), + logout: () => import("../components/firebase/logout"), }, data() { @@ -387,11 +357,6 @@ 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, "") @@ -403,238 +368,10 @@ 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 => { - self.$toast.show(err.message || err, { - icon: "error", - }) - }) - self.$toast.info(this.$t("logged_out"), { - icon: "vpn_key", - }) - }, toggleSettings(s, v) { fb.writeSettings(s, !v) },