Moved logout to store, login still an issue

src/layouts/default.vue

@@ -57,8 +57,7 @@
 </template>
 
 <script>
-// import firebase from 'firebase'
-import { auth } from '../plugins/firebase'
+//import { auth } from '../plugins/firebase'
 export default {
   name: 'LayoutDefault',
   data() {
@@ -71,18 +70,10 @@ export default {
   },
   methods: {
     logOut() {
-        auth.logout()
-       // auth.signOut().then(() => {
-        // Sign-out successful.
+        this.$store.dispatch('logout')
         console.log("I logged out")
-        this.$store.dispatch('resetState', this.$store.state)
-       // window.location.reload()
-       /* })
-        .catch(function(error) {
-          console.log(error)
-          //window.location.reload()
-        });*/
-        // auth.logout()
+        //this.$store.dispatch('resetState', this.$store.state)
+        window.location.reload()
     },
     help() {
       this.$router.push('/identification')

src/pages/hello.vue

@@ -5,7 +5,7 @@
       <h3>Ash trees are in danger!</h3>
       <p>Can you help us find them all so we can stop the spread of a
         deadly beetle infestation?</p>
-      <p>Welcome, {{name}}!</p>
+      <p>Welcome, {{ user.displayName }}!</p>
       <router-link class='btn' to="/tag">
         <q-btn color="secondary">
           Tag an ash tree
@@ -28,19 +28,25 @@
         photo: '',
         userId: '',
         name: '',
-        email: '',
-        user: {}
+        email: ''
+        //user: {}
       }
     },
-    created() {
+    computed: {
+      user() {
+        return this.$store.getters.getUser
+        console.log("hello: ")
+      }
+    }
+    /*created() {
       if (this.$store.state.user) {
         this.user = this.$store.state.user
         this.name = this.$store.state.user.displayName
         this.email = this.$store.state.user.email
        // this.photo = this.$store.state.user.photoURL
-       // this.userId = this.$store.state.user.uid
+        this.userId = this.$store.state.user.uid
       }
-    }
+    }*/
   }
 </script>
 

src/pages/login.vue

@@ -2,7 +2,7 @@
   <q-page padding>
       <div class="hello">
         <img src="~assets/ashtag-logo-full.svg" alt="Ashtag" style="padding:20px;width:150px">
-        <h5>Ash trees are in danger!</h5>
+        <h3>Ash trees are in danger!</h3>
         <p>Can you help us find them all so we can stop the spread of a
           deadly beetle infestation?</p>
         <p>Please login using one of your existing online identities to get started:</p>
@@ -25,14 +25,14 @@
               var credential = authResult.credential;
               console.log("user: " + user.displayName);
               this.sendToStore(user);
-              alert("Logging in");
+              alert("Signing in");
               return true;
             }.bind(this)
            // uiShown: function() {
            //   //alert("Trying to sign in");
            // }
           },
-          signInSuccessUrl: 'http://localhost:8080/hello',
+          signInSuccessUrl: '/hello',
           signInOptions: [
             this.$firebase.auth.GoogleAuthProvider.PROVIDER_ID,
             this.$firebase.auth.EmailAuthProvider.PROVIDER_ID
@@ -43,7 +43,7 @@
       },
       methods: {
           sendToStore(user) {
-            this.$store.dispatch('setUser', user); //|| false)
+            this.$store.dispatch('setUser', user);
           }
       }
   }

src/pages/success.vue

@@ -13,8 +13,8 @@
           detail="You just got points for your tag."
           appear
           :actions="[
-          { label: 'Tag Another', icon: 'alarm', handler: () => { window.history.go(-1) } },
-          { label: 'Verify Photos', icon: 'done', handler: () => {  window.location.replace('/#/istree') } }
+          { label: 'Tag Another', icon: 'alarm', handler: () => { window.location = '#/tag' } },
+          { label: 'Verify Photos', icon: 'done', handler: () => { window.location = '#/hello' } }
         ]"
           class="q-mt-md"
         >
@@ -43,12 +43,13 @@ export default {
   data () {
     return {
       tagPoints: this.$store.state.tagPoints,
-      center: {
+      center: this.userPosition,
+     /* {
         lat: 48.853,
         lng: 2.298
-      },
+      },*/
       // userPosition: null,
-      zoom: 15
+      zoom: 17
     }
   },
   computed: {

src/pages/tag.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page padding>
     <div class="tag">
-      <h1>Take a picture of an ash tree</h1>
+      <h3>Take a picture of an ash tree</h3>
       <p v-if="treePic">Looking good! <br/> Upload or cancel using the buttons below.</p>
       <p v-else>Stay close to the tree, but capture the full shape as shown below.
         Not sure if it's an ash? <br/><router-link to="/identification">Check out our help page</router-link>.</p>
@@ -182,7 +182,7 @@
             Loading.hide()
             console.error(err.message)
           })
-        this.updateProfilePoints
+        //this.updateProfilePoints
       },
       save (formData) {
         // upload data to the server
@@ -234,15 +234,16 @@
             return this.$treesRef.child(key).update({imageUrl: downloadURL})
           })
           .then(() => {
+            //this.updateProfilePoints
             console.log("downloadURL added to tree_photo in database")
             this.currentStatus = STATUS_SUCCESS
+            this.updateProfilePoints()
           })
           .catch(err => {
             console.log(error)
             this.currentStatus = STATUS_FAILED
            // this.uploadError = err.response
           })
-       // this.updateProfilePoints
       },
       uploadaws(formData) {
         const url = 'https://s3.amazonaws.com/ash-tree-photos'

src/plugins/firebase.js

@@ -3,6 +3,7 @@ import * as firebase from 'firebase';
 //import * as firebaseui from 'firebaseui';
 import * as GeoFire from 'geofire';
 import VueFire from 'vuefire';
+import store from '../store/index'
 
 const app = {
   apiKey: "AIzaSyCZTIICdE_LL7xA7nHJ_81uUHYv7g6DjkA",
@@ -34,4 +35,5 @@ export default ({ app, router, Vue }) => {
    Vue.prototype.$storefb = storefb.ref()
    Vue.prototype.$db = db
   // Vue.use(VueFire)
+
 }

src/router/index.js

@@ -27,7 +27,7 @@ Router.beforeEach((to, from, next) => {
   let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
 
   if (requiresAuth && !currentUser) next('login')
- // else if (!requiresAuth && currentUser) next('hello')
+  else if (!requiresAuth && currentUser) next('hello')
  else next()
 })
 

src/router/routes.js

@@ -6,8 +6,8 @@ export default [
     children: [
       { path: '/', component: () => import('pages/login') },
       { path: '/login', component: () => import('pages/login') },
-      { path: '/hello', component: () => import('pages/hello')}, //, meta: {
-          //requiresAuth: true }},
+      { path: '/hello', component: () => import('pages/hello')}, // , meta: {
+         // requiresAuth: true }},
       { path: '/tag', component: () => import('pages/tag'), meta: {
           requiresAuth: true }},
       { path: '/identification', component: () => import('pages/Identification'),  meta: {

src/store/index.js

@@ -8,7 +8,7 @@ import { fireb } from '../plugins/firebase'
 Vue.use(Vuex)
 
 const initialState = {
-  user: {}, // {displayName: 'Joel', email: '[email protected]'},
+  user: null, // {displayName: 'Joel', email: '[email protected]'},
   lastPOI: {}, // {lat: 40.34923, lng: -74.65955},
   profile: {},
   simplePoints: 10,
@@ -20,8 +20,8 @@ const initialState = {
 //const state = Object.assign({}, initialState)
 
 const state = {
-  user: {},
-  lastPOI: {},
+  user: {displayName: 'Joel', email: '[email protected]'},
+  lastPOI: {},  // {lat: 40.34923, lng: -74.65955},
   profile: {},
   simplePoints: 10,
   tagPoints: 50,
@@ -33,6 +33,7 @@ const mutations = {
   SET_USER (state, user) {
     state.user = user
     console.log("Mutation User: " + user.displayName)
+    console.log("New user state: " + state.user.displayName)
   },
   SET_PROFILE (state, profile) {
     state.profile = profile
@@ -51,9 +52,9 @@ const mutations = {
 }
 
 const actions = {
-  setUser (context, user) {
+  setUser ({commit}, user) {
     console.log("SetUser Action :" + user.displayName)
-    context.commit('SET_USER', user)
+    commit('SET_USER', user)
     if (user) {
       fireb.database().ref('user_profiles').orderByChild('user_email')
         .equalTo(user.email)
@@ -71,19 +72,24 @@ const actions = {
         })
     }
   },
-  setProfile (context, profile) {
-    context.commit('SET_PROFILE', profile)
+  setProfile ({commit}, profile) {
+    commit('SET_PROFILE', profile)
   },
-  setTaglist (context, userTags) {
-    context.commit('SET_TAGLIST', userTags)
+  setTaglist ({commit}, userTags) {
+   commit('SET_TAGLIST', userTags)
   },
   // Point of Interest
-  setLastPOI (context, poi) {
-    context.commit('SET_POI', poi)
+  setLastPOI ({commit}, poi) {
+    commit('SET_POI', poi)
+  },
+  resetState ({commit}) {
+    commit('RESET_STATE')  //, state)
+  },
+  logout ({commit}) {
+    fireb.auth().signOut()
+    commit('SET_USER', null)
+    commit('RESET_STATE')
   },
-  resetState (context) {
-    context.commit('RESET_STATE', state)
-  }
 }
 
 const getters = {