btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

♻️ Refactor

Browse Source
This commit is contained in:
Liyas Thomas
2020-01-21 17:55:35 +05:30
parent 94d0bf59b2
commit 1fdde89d49
7 changed files with 204 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/firebase/feeds.vue
View File

@@ -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);
}
}
};

5
components/firebase/inputform.vue
View File

@@ -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();
}
}
};

58
functions/store.js → functions/fb.js
View File

@@ -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_name: store.currentUser.displayName,
author_image: store.currentUser.photoURL,
author: fb.currentUser.uid,
author_name: fb.currentUser.displayName,
author_image: fb.currentUser.photoURL,
message
};
return feedsCollection
.add(dt)
.catch(e => console.error("error inserting", dt, e));
try {
return feedsCollection.add(dt);
} catch (e) {
return console.error("error inserting", dt, e);
}
},
deleteFeed: id => {
return feedsCollection
deleteFeed: id =>
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;
});

4
lang/en-US.js
View File

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

12
layouts/default.vue
View File

@@ -288,20 +288,20 @@
>
<i class="material-icons">offline_bolt</i>
</button>
<login v-if="!store.currentUser" />
<span v-if="store.currentUser">
<login v-if="!fb.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"
:src="store.currentUser.photoURL"
v-if="fb.currentUser.photoURL"
:src="fb.currentUser.photoURL"
class="material-icons"
/>
<i v-else class="material-icons">account_circle</i>

6
pages/index.vue
View File

@@ -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: {

141
pages/settings.vue
View File

@@ -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() {