✨ Account setting on setting page
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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"
|
||||
};
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -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" });
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<li>
|
||||
<div v-if="!fb.currentUser">
|
||||
<label>{{ $t("login_with") }}</label>
|
||||
<br />
|
||||
<p>
|
||||
<button class="icon" @click="signInWithGoogle" v-close-popover>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -35,6 +35,7 @@
|
||||
</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 />
|
||||
<p v-for="setting in fb.currentSettings">
|
||||
<pw-toggle
|
||||
:on="sync.history"
|
||||
@change="toggleSettings('syncHistory')"
|
||||
:key="setting.name"
|
||||
:on="setting.value"
|
||||
@change="toggleSettings(setting.name, setting.value)"
|
||||
>
|
||||
{{ $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") }}
|
||||
{{ $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();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user