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

✨ Account setting on setting page

Browse Source
This commit is contained in:
Liyas Thomas
2020-01-21 22:27:52 +05:30
parent 01a890bce9
commit 40e05a0461
6 changed files with 158 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/firebase/login.vue
View File

@@ -42,14 +42,39 @@
<script> <script>
import firebase from "firebase/app"; import firebase from "firebase/app";
import { fb } from "../../functions/fb";
export default { export default {
data() {
return {
fb
};
},
methods: { methods: {
signInWithGoogle() { signInWithGoogle() {
const provider = new firebase.auth.GoogleAuthProvider(); const provider = new firebase.auth.GoogleAuthProvider();
firebase firebase
.auth() .auth()
.signInWithPopup(provider) .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 => { .catch(err => {
this.$toast.show(err.message || err, { this.$toast.show(err.message || err, {
icon: "error" icon: "error"
@@ -61,6 +86,24 @@ export default {
firebase firebase
.auth() .auth()
.signInWithPopup(provider) .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 => { .catch(err => {
this.$toast.show(err.message || err, { this.$toast.show(err.message || err, {
icon: "error" icon: "error"

12
functions/fb.js
View File

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

5
lang/en-US.js
View File

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

13
layouts/default.vue
View File

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

6
pages/index.vue
View File

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

156
pages/settings.vue
View File

@@ -5,36 +5,37 @@
<li> <li>
<div v-if="!fb.currentUser"> <div v-if="!fb.currentUser">
<label>{{ $t("login_with") }}</label> <label>{{ $t("login_with") }}</label>
<br /> <p>
<button class="icon" @click="signInWithGoogle" v-close-popover> <button class="icon" @click="signInWithGoogle" v-close-popover>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="material-icons" class="material-icons"
> >
<path <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" 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> </svg>
<span>Google</span> <span>Google</span>
</button> </button>
<br /> <br />
<button class="icon" @click="signInWithGithub" v-close-popover> <button class="icon" @click="signInWithGithub" v-close-popover>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="material-icons" class="material-icons"
> >
<path <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" 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> </svg>
<span>GitHub</span> <span>GitHub</span>
</button> </button>
</p>
</div> </div>
<div v-if="fb.currentUser"> <div v-if="fb.currentUser">
<button class="icon"> <button class="icon">
@@ -61,22 +62,22 @@
<span>{{ $t("logout") }}</span> <span>{{ $t("logout") }}</span>
</button> </button>
<br /> <br />
<br /> <p v-for="setting in fb.currentSettings">
<pw-toggle <pw-toggle
:on="sync.history" :key="setting.name"
@change="toggleSettings('syncHistory')" :on="setting.value"
> @change="toggleSettings(setting.name, setting.value)"
{{ $t("sync") + " " + $t("history") }} >
{{ sync.history ? $t("enabled") : $t("disabled") }} {{ $t(setting.name) + " " + $t("sync") }}
</pw-toggle> {{ setting.value ? $t("enabled") : $t("disabled") }}
<br /> </pw-toggle>
<pw-toggle </p>
:on="sync.collections" <p v-if="fb.currentSettings.length == 0">
@change="toggleSettings('syncCollections')" <button class="" @click="initSettings">
> <i class="material-icons">sync</i>
{{ $t("sync") + " " + $t("collection") }} <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
{{ sync.collections ? $t("enabled") : $t("disabled") }} </button>
</pw-toggle> </p>
</div> </div>
</li> </li>
</ul> </ul>
@@ -226,8 +227,7 @@ export default {
components: { components: {
"pw-section": () => import("../components/section"), "pw-section": () => import("../components/section"),
"pw-toggle": () => import("../components/toggle"), "pw-toggle": () => import("../components/toggle"),
swatch: () => import("../components/settings/swatch"), swatch: () => import("../components/settings/swatch")
login: () => import("../components/firebase/login")
}, },
data() { data() {
@@ -326,11 +326,7 @@ export default {
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || "" 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 firebase
.auth() .auth()
.signInWithPopup(provider) .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 => { .catch(err => {
this.$toast.show(err.message || err, { this.$toast.show(err.message || err, {
icon: "error" icon: "error"
@@ -411,25 +425,39 @@ export default {
firebase firebase
.auth() .auth()
.signInWithPopup(provider) .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 => { .catch(err => {
this.$toast.show(err.message || err, { this.$toast.show(err.message || err, {
icon: "error" 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() { beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor(); this.settings.THEME_COLOR = this.getActiveColor();
}, },