♻️ Refactor

components/firebase/feeds.vue

@@ -1,11 +1,11 @@
 <template>
   <virtual-list
     class="virtual-list"
-    :class="{ filled: store.feedsInFeed.length }"
+    :class="{ filled: fb.feedsInFeed.length }"
     :size="56"
-    :remain="Math.min(5, store.feedsInFeed.length)"
+    :remain="Math.min(5, fb.feedsInFeed.length)"
   >
-    <ul v-for="feed in store.feedsInFeed" :key="feed.id">
+    <ul v-for="feed in fb.feedsInFeed" :key="feed.id">
       <li>{{ feed.message }}</li>
       <button class="icon" @click="deleteFeed(feed)">
         <i class="material-icons">delete</i>
@@ -21,7 +21,7 @@
 </style>
 
 <script>
-import { store } from "../../functions/store";
+import { fb } from "../../functions/fb";
 
 export default {
   components: {
@@ -29,12 +29,12 @@ export default {
   },
   data() {
     return {
-      store
+      fb
     };
   },
   methods: {
     deleteFeed(feed) {
-      store.deleteFeed(feed.id);
+      fb.deleteFeed(feed.id);
     }
   }
 };

components/firebase/inputform.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { store } from "../../functions/store";
+import { fb } from "../../functions/fb";
 
 export default {
   data() {
@@ -16,9 +16,8 @@ export default {
   },
   methods: {
     formPost() {
-      store.writeFeed(this.message);
+      fb.writeFeed(this.message);
       this.message = null;
-      this.$refs.inputMessage.focus();
     }
   }
 };

functions/fb.js

@@ -1,4 +1,3 @@
-import Vue from "vue";
 import firebase from "firebase/app";
 import "firebase/firestore";
 import "firebase/auth";
@@ -18,29 +17,47 @@ firebase.initializeApp(firebaseConfig);
 
 // a reference to the Feeds collection
 const feedsCollection = firebase.firestore().collection("feeds");
+const settingsCollection = firebase.firestore().collection("settings");
 
 // the shared state object that any vue component
 // can get access to
-export const store = {
+export const fb = {
   feedsInFeed: [],
   currentUser: {},
-  writeFeed: message => {
+  currentSettings: [],
+  writeFeed: async message => {
     const dt = {
       createdOn: new Date(),
-      author: store.currentUser.uid,
+      author: fb.currentUser.uid,
-      author_name: store.currentUser.displayName,
+      author_name: fb.currentUser.displayName,
-      author_image: store.currentUser.photoURL,
+      author_image: fb.currentUser.photoURL,
       message
     };
-    return feedsCollection
+    try {
-      .add(dt)
+      return feedsCollection.add(dt);
-      .catch(e => console.error("error inserting", dt, e));
+    } catch (e) {
+      return console.error("error inserting", dt, e);
+    }
   },
-  deleteFeed: id => {
+  deleteFeed: id =>
-    return feedsCollection
+    feedsCollection
       .doc(id)
       .delete()
-      .catch(e => console.error("error deleting", dt, e));
+      .catch(e => console.error("error deleting", dt, e)),
+  writeSettings: async (settings, value) => {
+    const st = {
+      updatedOn: new Date(),
+      author: fb.currentUser.uid,
+      author_name: fb.currentUser.displayName,
+      author_image: fb.currentUser.photoURL,
+      settings,
+      value
+    };
+    try {
+      return settingsCollection.doc(settings).set(st);
+    } catch (e) {
+      return console.error("error updating", dt, e);
+    }
   }
 };
 
@@ -58,10 +75,23 @@ feedsCollection
       feed.id = doc.id;
       feeds.push(feed);
     });
-    store.feedsInFeed = feeds;
+    fb.feedsInFeed = feeds;
+  });
+
+settingsCollection
+  .orderBy("createdOn", "desc")
+  .limit(2)
+  .onSnapshot(settingsRef => {
+    const settings = [];
+    settingsRef.forEach(doc => {
+      const setting = doc.data();
+      setting.id = doc.id;
+      settings.push(setting);
+    });
+    fb.currentSettings = settings;
   });
 
 // When a user logs in or out, save that in the store
 firebase.auth().onAuthStateChanged(user => {
-  store.currentUser = user;
+  fb.currentUser = user;
 });

lang/en-US.js

@@ -252,5 +252,7 @@ export default {
   installed: "Installed",
   login_with: "Login with",
   logged_out: "Logged out",
-  logout: "Logout"
+  logout: "Logout",
+  account: "Account",
+  sync: "Sync"
 };

layouts/default.vue

@@ -288,20 +288,20 @@
                 >
                   <i class="material-icons">offline_bolt</i>
                 </button>
-                <login v-if="!store.currentUser" />
+                <login v-if="!fb.currentUser" />
-                <span v-if="store.currentUser">
+                <span v-if="fb.currentUser">
                   <v-popover>
                     <button
                       class="icon"
                       v-tooltip="
-                        (store.currentUser.displayName || '<label><i>Name not found</i></label>') +
+                        (fb.currentUser.displayName || '<label><i>Name not found</i></label>') +
                           '<br>' +
-                          (store.currentUser.email || '<label><i>Email not found</i></label>')
+                          (fb.currentUser.email || '<label><i>Email not found</i></label>')
                       "
                     >
                       <img
-                        v-if="store.currentUser.photoURL"
+                        v-if="fb.currentUser.photoURL"
-                        :src="store.currentUser.photoURL"
+                        :src="fb.currentUser.photoURL"
                         class="material-icons"
                       />
                       <i v-else class="material-icons">account_circle</i>

pages/index.vue

@@ -848,7 +848,7 @@
           </div>
           <input id="auth-tab" type="radio" name="side" />
           <label for="auth-tab">Auth</label>
-          <div class="tab" v-if="store.currentUser">
+          <div class="tab" v-if="fb.currentUser">
             <pw-section class="pink" label="Auth" ref="auth">
               <inputform />
               <ballsfeed />
@@ -1144,7 +1144,7 @@ import parseTemplateString from "../functions/templating";
 import AceEditor from "../components/ace-editor";
 import { tokenRequest, oauthRedirect } from "../assets/js/oauth";
 import { sendNetworkRequest } from "../functions/network";
-import { store } from "../functions/store";
+import { fb } from "../functions/fb";
 
 const statusCategories = [
   {
@@ -1386,7 +1386,7 @@ export default {
       responseBodyType: "text",
       responseBodyMaxLines: 16,
       activeSidebar: true,
-      store
+      fb
     };
   },
   watch: {

pages/settings.vue

@@ -1,5 +1,87 @@
 <template>
   <div class="page">
+    <pw-section class="green" :label="$t('account')" ref="account">
+      <ul>
+        <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>
+          </div>
+          <div v-if="fb.currentUser">
+            <button class="icon">
+              <img
+                v-if="fb.currentUser.photoURL"
+                :src="fb.currentUser.photoURL"
+                class="material-icons"
+              />
+              <i v-else class="material-icons">account_circle</i>
+              <span>
+                {{ fb.currentUser.displayName || "Name not found" }}
+              </span>
+            </button>
+            <br />
+            <button class="icon">
+              <i class="material-icons">email</i>
+              <span>
+                {{ fb.currentUser.email || "Email not found" }}
+              </span>
+            </button>
+            <br />
+            <button class="icon" @click="logout" v-close-popover>
+              <i class="material-icons">exit_to_app</i>
+              <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>
+          </div>
+        </li>
+      </ul>
+    </pw-section>
+
     <pw-section class="cyan" :label="$t('theme')" ref="theme">
       <ul>
         <li>
@@ -137,11 +219,15 @@
 <style scoped lang="scss"></style>
 
 <script>
+import firebase from "firebase/app";
+import { fb } from "../functions/fb";
+
 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() {
@@ -238,6 +324,12 @@ export default {
           this.$store.state.postwoman.settings.PROXY_URL ||
           "https://postwoman.apollotv.xyz/",
         PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
+      },
+
+      fb,
+      sync: {
+        history: fb.currentSettings[0].value,
+        collections: fb.currentSettings[1].value
       }
     };
   },
@@ -289,6 +381,53 @@ export default {
     toggleSetting(key) {
       this.settings[key] = !this.settings[key];
       this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
+    },
+    logout() {
+      firebase
+        .auth()
+        .signOut()
+        .catch(err => {
+          this.$toast.show(err.message || err, {
+            icon: "error"
+          });
+        });
+      this.$toast.info(this.$t("logged_out"), {
+        icon: "vpn_key"
+      });
+    },
+    signInWithGoogle() {
+      const provider = new firebase.auth.GoogleAuthProvider();
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .catch(err => {
+          this.$toast.show(err.message || err, {
+            icon: "error"
+          });
+        });
+    },
+    signInWithGithub() {
+      const provider = new firebase.auth.GithubAuthProvider();
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .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;
+      }
     }
   },
   beforeMount() {