From 40e05a04615db2d6339f03f0820471ee0c3e204f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 21 Jan 2020 22:27:52 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Account=20setting=20on=20setting=20?=
 =?UTF-8?q?page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/firebase/login.vue |  43 ++++++++++
 functions/fb.js               |  12 +--
 lang/en-US.js                 |   5 +-
 layouts/default.vue           |  13 ++-
 pages/index.vue               |   6 +-
 pages/settings.vue            | 156 ++++++++++++++++++++--------------
 6 files changed, 158 insertions(+), 77 deletions(-)

diff --git a/components/firebase/login.vue b/components/firebase/login.vue
index 7f4890433..1cf1d8620 100644
--- a/components/firebase/login.vue
+++ b/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"
diff --git a/functions/fb.js b/functions/fb.js
index f45d5cb8b..51a11889b 100644
--- a/functions/fb.js
+++ b/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")
-  .limit(2)
+  // .orderBy("updatedOn", "desc")
+  // .limit(2)
   .onSnapshot(settingsRef => {
     const settings = [];
     settingsRef.forEach(doc => {
diff --git a/lang/en-US.js b/lang/en-US.js
index c7334e1ba..eb3c29baa 100644
--- a/lang/en-US.js
+++ b/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"
 };
diff --git a/layouts/default.vue b/layouts/default.vue
index 34fad3b7b..2b4d3d981 100644
--- a/layouts/default.vue
+++ b/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();
     }
   },
 
diff --git a/pages/index.vue b/pages/index.vue
index 27e9b4a0e..62a9e6032 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -846,8 +846,8 @@
               <collections />
             </pw-section>
           </div>
-          <input id="auth-tab" type="radio" name="side" />
-          <label for="auth-tab">Auth</label>
+          <input id="sync-tab" type="radio" name="side" />
+          <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" });
                 }
diff --git a/pages/settings.vue b/pages/settings.vue
index 8dc630c50..16048827e 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -5,36 +5,37 @@
         <li>
           <div v-if="!fb.currentUser">
             <label>{{ $t("login_with") }}</label>
-            <br />
-            <button class="icon" @click="signInWithGoogle" v-close-popover>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                class="material-icons"
-              >
-                <path
-                  d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
-                />
-              </svg>
-              <span>Google</span>
-            </button>
-            <br />
-            <button class="icon" @click="signInWithGithub" v-close-popover>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                class="material-icons"
-              >
-                <path
-                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-                />
-              </svg>
-              <span>GitHub</span>
-            </button>
+            <p>
+              <button class="icon" @click="signInWithGoogle" v-close-popover>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  class="material-icons"
+                >
+                  <path
+                    d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
+                  />
+                </svg>
+                <span>Google</span>
+              </button>
+              <br />
+              <button class="icon" @click="signInWithGithub" v-close-popover>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  class="material-icons"
+                >
+                  <path
+                    d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                  />
+                </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 />
-            <pw-toggle
-              :on="sync.history"
-              @change="toggleSettings('syncHistory')"
-            >
-              {{ $t("sync") + " " + $t("history") }}
-              {{ sync.history ? $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 v-for="setting in fb.currentSettings">
+              <pw-toggle
+                :key="setting.name"
+                :on="setting.value"
+                @change="toggleSettings(setting.name, setting.value)"
+              >
+                {{ $t(setting.name) + " " + $t("sync") }}
+                {{ setting.value ? $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"),
-    login: () => import("../components/firebase/login")
+    swatch: () => import("../components/settings/swatch")
   },
 
   data() {
@@ -326,11 +326,7 @@ export default {
         PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
       },
 
-      fb,
-      sync: {
-        history: fb.currentSettings[0].value,
-        collections: fb.currentSettings[1].value
-      }
+      fb
     };
   },
 
@@ -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) {
-      switch (s) {
-        case "syncHistory":
-          this.sync.history = !this.sync.history;
-          fb.writeSettings("syncHistory", this.sync.history);
-          break;
-        case "syncCollections":
-          this.sync.collections = !this.sync.collections;
-          fb.writeSettings("syncCollections", this.sync.collections);
-          break;
-      }
+    toggleSettings(s, v) {
+      fb.writeSettings(s, !v);
+    },
+    initSettings() {
+      fb.writeSettings("syncHistory", false);
+      fb.writeSettings("syncCollections", true);
     }
   },
+
   beforeMount() {
     this.settings.THEME_COLOR = this.getActiveColor();
   },