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 1fdde89d49
commit 211dfa24fa
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>
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"

12
functions/fb.js
View File

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

5
lang/en-US.js
View File

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

13
layouts/default.vue
View File

@@ -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
@@ -830,7 +837,7 @@ export default {
watch: {
$route() {
this.$toast.clear();
// this.$toast.clear();
}
},

6
pages/index.vue
View File

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

156
pages/settings.vue
View File

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