2018-10-19 05:15:28 +00:00
|
|
|
<template>
|
2019-02-21 19:39:00 +00:00
|
|
|
<div id="app" :class="{ dark: darkModeEnabled }">
|
2019-01-11 21:52:08 +00:00
|
|
|
<nav-header />
|
2018-10-19 05:15:28 +00:00
|
|
|
|
2019-02-21 03:13:19 +00:00
|
|
|
<main class="content" v-if="user || isPublic">
|
2018-10-19 05:15:28 +00:00
|
|
|
<router-view />
|
|
|
|
</main>
|
2019-01-19 05:23:26 +00:00
|
|
|
|
2019-02-08 06:13:48 +00:00
|
|
|
<div class="auth" v-else>
|
2019-02-15 22:58:32 +00:00
|
|
|
<img src='/static/gamebrary-logo.png' />
|
2019-04-04 04:55:30 +00:00
|
|
|
<i class="fas fa-sync-alt fa-2x fast-spin" />
|
|
|
|
<h3>Authorizing</h3>
|
2019-02-08 06:13:48 +00:00
|
|
|
</div>
|
|
|
|
|
2019-01-19 05:23:26 +00:00
|
|
|
<toast />
|
2019-03-28 21:23:09 +00:00
|
|
|
<copyright-footer />
|
2018-10-19 05:15:28 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import NavHeader from '@/components/NavHeader/NavHeader';
|
2019-01-19 05:23:26 +00:00
|
|
|
import Toast from '@/components/Toast/Toast';
|
2019-03-28 21:23:09 +00:00
|
|
|
import CopyrightFooter from '@/components/CopyrightFooter/CopyrightFooter';
|
2018-11-05 02:28:29 +00:00
|
|
|
import firebase from 'firebase/app';
|
2019-02-05 07:33:06 +00:00
|
|
|
import { debounce } from 'lodash';
|
2018-11-05 02:28:29 +00:00
|
|
|
import 'firebase/auth';
|
|
|
|
import 'firebase/firestore';
|
2019-02-21 19:39:00 +00:00
|
|
|
import { mapState, mapGetters } from 'vuex';
|
2018-10-25 06:33:15 +00:00
|
|
|
|
2018-11-05 02:28:29 +00:00
|
|
|
firebase.initializeApp({
|
|
|
|
apiKey: 'AIzaSyA6MsmnLtqT4b11r-j15wwreRypO3AodcA',
|
|
|
|
authDomain: 'gamebrary.com',
|
|
|
|
databaseURL: 'https://gamebrary-8c736.firebaseio.com',
|
|
|
|
projectId: 'gamebrary-8c736',
|
|
|
|
storageBucket: 'gamebrary-8c736.appspot.com',
|
|
|
|
messagingSenderId: '324529217902',
|
|
|
|
});
|
|
|
|
|
2018-10-25 06:33:15 +00:00
|
|
|
const db = firebase.firestore();
|
|
|
|
|
2018-10-19 05:15:28 +00:00
|
|
|
export default {
|
|
|
|
name: 'App',
|
|
|
|
|
|
|
|
components: {
|
|
|
|
NavHeader,
|
2019-01-19 05:23:26 +00:00
|
|
|
Toast,
|
2019-03-28 21:23:09 +00:00
|
|
|
CopyrightFooter,
|
2018-10-19 05:15:28 +00:00
|
|
|
},
|
2018-10-25 06:33:15 +00:00
|
|
|
|
|
|
|
computed: {
|
2019-02-05 07:33:06 +00:00
|
|
|
...mapState(['user', 'platform']),
|
2019-02-21 19:39:00 +00:00
|
|
|
...mapGetters(['darkModeEnabled']),
|
2018-11-21 02:43:10 +00:00
|
|
|
|
|
|
|
isPublic() {
|
2019-02-16 04:45:14 +00:00
|
|
|
return this.$route.name === 'share-list';
|
2018-11-21 02:43:10 +00:00
|
|
|
},
|
2018-10-25 06:33:15 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
2019-02-08 07:42:00 +00:00
|
|
|
this.$bus.$on('SAVE_SETTINGS', this.saveSettings);
|
|
|
|
this.$bus.$on('SAVE_TAGS', this.saveTags);
|
|
|
|
|
2019-02-06 06:56:35 +00:00
|
|
|
if (this.isPublic) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-11-27 23:59:19 +00:00
|
|
|
if (this.user) {
|
|
|
|
this.syncData();
|
2019-02-08 06:15:16 +00:00
|
|
|
return;
|
|
|
|
}
|
2019-02-05 07:33:06 +00:00
|
|
|
|
2019-04-02 23:45:01 +00:00
|
|
|
firebase.auth().getRedirectResult().then(({ additionalUserInfo, user }) => {
|
|
|
|
if (additionalUserInfo && additionalUserInfo.isNewUser) {
|
|
|
|
this.$store.dispatch('SEND_WELCOME_EMAIL', additionalUserInfo);
|
|
|
|
}
|
|
|
|
|
2019-02-08 06:15:16 +00:00
|
|
|
if (user) {
|
|
|
|
this.init(user);
|
|
|
|
} else {
|
|
|
|
const GoogleAuth = new firebase.auth.GoogleAuthProvider();
|
|
|
|
|
|
|
|
firebase.auth().signInWithRedirect(GoogleAuth)
|
|
|
|
.catch((message) => {
|
|
|
|
this.$bus.$emit('TOAST', {
|
|
|
|
message,
|
|
|
|
type: 'error',
|
2019-01-24 06:18:34 +00:00
|
|
|
});
|
2019-02-08 06:15:16 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2018-10-25 06:33:15 +00:00
|
|
|
},
|
|
|
|
|
2019-02-05 07:33:06 +00:00
|
|
|
beforeDestroy() {
|
|
|
|
this.$bus.$off('SAVE_SETTINGS');
|
2019-02-08 06:15:16 +00:00
|
|
|
this.$bus.$off('SAVE_TAGS');
|
2019-02-05 07:33:06 +00:00
|
|
|
},
|
|
|
|
|
2018-10-25 06:33:15 +00:00
|
|
|
methods: {
|
2019-02-05 07:33:06 +00:00
|
|
|
saveSettings: debounce(
|
|
|
|
// eslint-disable-next-line
|
|
|
|
function(settings) {
|
|
|
|
db.collection('settings').doc(this.user.uid).set(settings, { merge: true })
|
|
|
|
.then(() => {
|
|
|
|
this.$store.commit('SET_SETTINGS', settings);
|
|
|
|
this.$bus.$emit('TOAST', { message: 'Settings saved' });
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
this.$bus.$emit('TOAST', { message: 'There was an error saving your settings', type: 'error' });
|
|
|
|
});
|
|
|
|
}, 500),
|
|
|
|
|
2019-02-08 06:15:16 +00:00
|
|
|
saveTags(tags, force) {
|
|
|
|
if (tags) {
|
|
|
|
db.collection('tags').doc(this.user.uid).set(tags, { merge: !force })
|
|
|
|
.then(() => {
|
|
|
|
this.$bus.$emit('TOAST', { message: 'Tags updated' });
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
this.$bus.$emit('TOAST', {
|
|
|
|
message: 'There was an error saving your tag',
|
|
|
|
type: 'error',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-11-27 23:59:19 +00:00
|
|
|
syncData() {
|
|
|
|
db.collection('lists').doc(this.user.uid)
|
|
|
|
.onSnapshot((doc) => {
|
|
|
|
if (doc.exists) {
|
|
|
|
const gameLists = doc.data();
|
|
|
|
this.$store.commit('SET_GAME_LISTS', gameLists);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
db.collection('settings').doc(this.user.uid)
|
|
|
|
.onSnapshot((doc) => {
|
|
|
|
if (doc.exists) {
|
|
|
|
const settings = doc.data();
|
|
|
|
|
|
|
|
this.$store.commit('SET_SETTINGS', settings);
|
|
|
|
}
|
|
|
|
});
|
2019-02-08 06:15:16 +00:00
|
|
|
|
|
|
|
db.collection('tags').doc(this.user.uid)
|
|
|
|
.onSnapshot((doc) => {
|
|
|
|
if (doc.exists) {
|
|
|
|
const tags = doc.data();
|
|
|
|
|
|
|
|
this.$store.commit('SET_TAGS', tags);
|
|
|
|
}
|
|
|
|
});
|
2018-11-27 23:59:19 +00:00
|
|
|
},
|
|
|
|
|
2018-10-25 06:33:15 +00:00
|
|
|
init(user) {
|
|
|
|
this.$store.commit('SET_USER', user);
|
|
|
|
this.loadSettings();
|
2019-02-08 06:15:16 +00:00
|
|
|
this.loadTags();
|
2018-10-25 06:33:15 +00:00
|
|
|
this.loadLists();
|
2019-02-08 06:15:16 +00:00
|
|
|
this.syncData();
|
2018-10-25 06:33:15 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
loadSettings() {
|
|
|
|
const docRef = db.collection('settings').doc(this.user.uid);
|
|
|
|
|
|
|
|
docRef.get().then((doc) => {
|
|
|
|
if (doc.exists) {
|
|
|
|
this.$store.commit('SET_SETTINGS', doc.data());
|
|
|
|
} else {
|
|
|
|
this.initSettings();
|
|
|
|
}
|
|
|
|
}).catch(() => {
|
2019-01-19 06:02:03 +00:00
|
|
|
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
|
2018-10-25 06:33:15 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
loadLists() {
|
|
|
|
db.collection('lists').doc(this.user.uid).get()
|
|
|
|
.then((doc) => {
|
|
|
|
if (doc.exists) {
|
2018-11-21 02:43:10 +00:00
|
|
|
const data = doc.data();
|
|
|
|
this.$store.commit('SET_GAME_LISTS', data);
|
2018-10-25 06:33:15 +00:00
|
|
|
} else {
|
|
|
|
this.initList();
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(() => {
|
2019-01-19 06:02:03 +00:00
|
|
|
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
|
2019-02-08 06:15:16 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
loadTags() {
|
|
|
|
db.collection('tags').doc(this.user.uid).get()
|
|
|
|
.then((doc) => {
|
|
|
|
if (doc.exists) {
|
|
|
|
const data = doc.data();
|
|
|
|
this.$store.commit('SET_TAGS', data);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
|
2018-10-25 06:33:15 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
initList() {
|
|
|
|
db.collection('lists').doc(this.user.uid).set({}, { merge: true })
|
|
|
|
.then(() => {
|
|
|
|
this.loadLists();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
initSettings() {
|
|
|
|
db.collection('settings').doc(this.user.uid).set({}, { merge: true })
|
|
|
|
.then(() => {
|
|
|
|
this.loadSettings();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
2018-10-19 05:15:28 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" rel="stylesheet/scss">
|
2018-10-25 06:33:15 +00:00
|
|
|
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:700|Roboto:400,400italic,700);
|
2018-10-19 05:15:28 +00:00
|
|
|
@import "~styles/styles.scss";
|
|
|
|
</style>
|
2019-02-15 22:58:32 +00:00
|
|
|
|
|
|
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
|
|
|
@import "~styles/styles.scss";
|
|
|
|
|
2019-02-21 19:39:00 +00:00
|
|
|
#app {
|
|
|
|
background-color: $color-gray;
|
|
|
|
|
|
|
|
&.dark {
|
2019-02-22 06:14:11 +00:00
|
|
|
background-color: $color-darkest-gray;
|
2019-02-21 19:39:00 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-15 22:58:32 +00:00
|
|
|
.auth {
|
2019-04-04 04:55:30 +00:00
|
|
|
background: $color-white;
|
2019-02-15 22:58:32 +00:00
|
|
|
height: 100vh;
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
width: 100vw;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2019-04-04 04:55:30 +00:00
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100px;
|
|
|
|
margin-top: 100px;
|
|
|
|
}
|
2019-02-15 22:58:32 +00:00
|
|
|
|
|
|
|
i {
|
|
|
|
margin: $gp;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|