✨ Account setting on setting page

components/firebase/login.vue

@@ -42,14 +42,39 @@
 
 <script>
 import firebase from "firebase/app";
+import { fb } from "../../functions/fb";
 
 export default {
+  data() {
+    return {
+      fb
+    };
+  },
+
   methods: {
     signInWithGoogle() {
       const provider = new firebase.auth.GoogleAuthProvider();
       firebase
         .auth()
         .signInWithPopup(provider)
+        .then(res => {
+          if (res.additionalUserInfo.isNewUser) {
+            this.$toast.info($t("turn_on") + " " + $t("sync"), {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncCollections", true);
+                  this.$router.push({ path: "/settings" });
+                  toastObject.remove();
+                }
+              }
+            });
+          }
+        })
         .catch(err => {
           this.$toast.show(err.message || err, {
             icon: "error"
@@ -61,6 +86,24 @@ export default {
       firebase
         .auth()
         .signInWithPopup(provider)
+        .then(res => {
+          if (res.additionalUserInfo.isNewUser) {
+            this.$toast.info($t("turn_on") + " " + $t("sync"), {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncCollections", true);
+                  this.$router.push({ path: "/settings" });
+                  toastObject.remove();
+                }
+              }
+            });
+          }
+        })
         .catch(err => {
           this.$toast.show(err.message || err, {
             icon: "error"

functions/fb.js

@@ -44,19 +44,19 @@ export const fb = {
       .doc(id)
       .delete()
       .catch(e => console.error("error deleting", dt, e)),
-  writeSettings: async (settings, value) => {
+  writeSettings: async (setting, value) => {
     const st = {
       updatedOn: new Date(),
       author: fb.currentUser.uid,
       author_name: fb.currentUser.displayName,
       author_image: fb.currentUser.photoURL,
-      settings,
+      name: setting,
       value
     };
     try {
-      return settingsCollection.doc(settings).set(st);
+      return settingsCollection.doc(setting).set(st);
     } catch (e) {
-      return console.error("error updating", dt, e);
+      return console.error("error updating", st, e);
     }
   }
 };
@@ -79,8 +79,8 @@ feedsCollection
   });
 
 settingsCollection
-  .orderBy("createdOn", "desc")
+  // .orderBy("updatedOn", "desc")
-  .limit(2)
+  // .limit(2)
   .onSnapshot(settingsRef => {
     const settings = [];
     settingsRef.forEach(doc => {

lang/en-US.js

@@ -254,5 +254,8 @@ export default {
   logged_out: "Logged out",
   logout: "Logout",
   account: "Account",
-  sync: "Sync"
+  sync: "Sync",
+  syncHistory: "History",
+  syncCollections: "Collections",
+  turn_on: "Turn on"
 };

layouts/default.vue

@@ -237,6 +237,11 @@
           <div v-else-if="$route.path === '/settings'">
             <nav class="secondary-nav">
               <ul>
+                <li>
+                  <a href="#account" v-tooltip.right="$t('account')">
+                    <i class="material-icons">perm_identity</i>
+                  </a>
+                </li>
                 <li>
                   <a href="#theme" v-tooltip.right="$t('theme')">
                     <i class="material-icons">brush</i>
@@ -294,9 +299,11 @@
                     <button
                       class="icon"
                       v-tooltip="
-                        (fb.currentUser.displayName || '<label><i>Name not found</i></label>') +
+                        (fb.currentUser.displayName ||
+                          '<label><i>Name not found</i></label>') +
                           '<br>' +
-                          (fb.currentUser.email || '<label><i>Email not found</i></label>')
+                          (fb.currentUser.email ||
+                            '<label><i>Email not found</i></label>')
                       "
                     >
                       <img
@@ -797,7 +804,7 @@ export default {
 
   watch: {
     $route() {
-      this.$toast.clear();
+      // this.$toast.clear();
     }
   },
 

pages/index.vue

@@ -846,8 +846,8 @@
               <collections />
             </pw-section>
           </div>
-          <input id="auth-tab" type="radio" name="side" />
+          <input id="sync-tab" type="radio" name="side" />
-          <label for="auth-tab">Auth</label>
+          <label for="sync-tab">{{ $t("sync") }}</label>
           <div class="tab" v-if="fb.currentUser">
             <pw-section class="pink" label="Auth" ref="auth">
               <inputform />
@@ -2150,7 +2150,7 @@ export default {
               icon: "help",
               duration: 8000,
               action: {
-                text: "Settings",
+                text: this.$t("yes"),
                 onClick: (e, toastObject) => {
                   this.$router.push({ path: "/settings" });
                 }

pages/settings.vue

@@ -5,7 +5,7 @@
         <li>
           <div v-if="!fb.currentUser">
             <label>{{ $t("login_with") }}</label>
-            <br />
+            <p>
               <button class="icon" @click="signInWithGoogle" v-close-popover>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -35,6 +35,7 @@
                 </svg>
                 <span>GitHub</span>
               </button>
+            </p>
           </div>
           <div v-if="fb.currentUser">
             <button class="icon">
@@ -61,22 +62,22 @@
               <span>{{ $t("logout") }}</span>
             </button>
             <br />
-            <br />
+            <p v-for="setting in fb.currentSettings">
               <pw-toggle
-              :on="sync.history"
+                :key="setting.name"
-              @change="toggleSettings('syncHistory')"
+                :on="setting.value"
+                @change="toggleSettings(setting.name, setting.value)"
               >
-              {{ $t("sync") + " " + $t("history") }}
+                {{ $t(setting.name) + " " + $t("sync") }}
-              {{ sync.history ? $t("enabled") : $t("disabled") }}
+                {{ setting.value ? $t("enabled") : $t("disabled") }}
-            </pw-toggle>
-            <br />
-            <pw-toggle
-              :on="sync.collections"
-              @change="toggleSettings('syncCollections')"
-            >
-              {{ $t("sync") + " " + $t("collection") }}
-              {{ sync.collections ? $t("enabled") : $t("disabled") }}
               </pw-toggle>
+            </p>
+            <p v-if="fb.currentSettings.length == 0">
+              <button class="" @click="initSettings">
+                <i class="material-icons">sync</i>
+                <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
+              </button>
+            </p>
           </div>
         </li>
       </ul>
@@ -226,8 +227,7 @@ export default {
   components: {
     "pw-section": () => import("../components/section"),
     "pw-toggle": () => import("../components/toggle"),
-    swatch: () => import("../components/settings/swatch"),
+    swatch: () => import("../components/settings/swatch")
-    login: () => import("../components/firebase/login")
   },
 
   data() {
@@ -326,11 +326,7 @@ export default {
         PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
       },
 
-      fb,
+      fb
-      sync: {
-        history: fb.currentSettings[0].value,
-        collections: fb.currentSettings[1].value
-      }
     };
   },
 
@@ -400,6 +396,24 @@ export default {
       firebase
         .auth()
         .signInWithPopup(provider)
+        .then(res => {
+          if (res.additionalUserInfo.isNewUser) {
+            this.$toast.info($t("turn_on") + " " + $t("sync"), {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncCollections", true);
+                  this.$router.push({ path: "/settings" });
+                  toastObject.remove();
+                }
+              }
+            });
+          }
+        })
         .catch(err => {
           this.$toast.show(err.message || err, {
             icon: "error"
@@ -411,25 +425,39 @@ export default {
       firebase
         .auth()
         .signInWithPopup(provider)
+        .then(res => {
+          if (res.additionalUserInfo.isNewUser) {
+            this.$toast.info($t("turn_on") + " " + $t("sync"), {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncCollections", true);
+                  this.$router.push({ path: "/settings" });
+                  toastObject.remove();
+                }
+              }
+            });
+          }
+        })
         .catch(err => {
           this.$toast.show(err.message || err, {
             icon: "error"
           });
         });
     },
-    toggleSettings(s) {
+    toggleSettings(s, v) {
-      switch (s) {
+      fb.writeSettings(s, !v);
-        case "syncHistory":
+    },
-          this.sync.history = !this.sync.history;
+    initSettings() {
-          fb.writeSettings("syncHistory", this.sync.history);
+      fb.writeSettings("syncHistory", false);
-          break;
+      fb.writeSettings("syncCollections", true);
-        case "syncCollections":
-          this.sync.collections = !this.sync.collections;
-          fb.writeSettings("syncCollections", this.sync.collections);
-          break;
-      }
     }
   },
+
   beforeMount() {
     this.settings.THEME_COLOR = this.getActiveColor();
   },