Login fixed, color scheme fixed, vuex still has an issue

codeforprinceton · May 29, 2018 · b51dc75 · b51dc75
1 parent cb1c579
commit b51dc75
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 53 deletions.
diff --git a/src/css/themes/common.variables.styl b/src/css/themes/common.variables.styl
@@ -14,12 +14,14 @@
 // It's highly recommended to change the default colors
 // to match your app's branding.
 
-$primary   = #027be3
-$secondary = #26A69A
-$tertiary  = #555
+$primary   = #435058
+$secondary = #7FB087
+$tertiary  = #E1C46E
 
 $neutral   = #E0E1E2
 $positive  = #21BA45
 $negative  = #DB2828
 $info      = #31CCEC
 $warning   = #F2C037
+
+$light     = #F5F4F1
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -17,7 +17,7 @@
         <q-toolbar-title>
          Ashtag
         </q-toolbar-title>
-        <q-btn
+        <q-btn v-if="user"
           flat
           dense
           round
@@ -38,7 +38,7 @@
               <q-item v-close-overlay @click="help">
                 Help
               </q-item>
-              <q-item v-close-overlay @click="logOut()">
+              <q-item v-close-overlay @click="logOut">
                 Logout
               </q-item>
             </q-list>
@@ -71,17 +71,18 @@ export default {
   },
   methods: {
     logOut() {
-        auth.signOut().then(() => {
+        auth.logout()
+       // auth.signOut().then(() => {
         // Sign-out successful.
-          console.log("I logged out");
+        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)
+       /* })
+        .catch(function(error) {
+          console.log(error)
+          //window.location.reload()
+        });*/
+        // auth.logout()
     },
     help() {
       this.$router.push('/identification')
@@ -113,7 +114,7 @@ export default {
   header
     margin 0
     height 10px
-    background-color $tertiary
+    background-color $primary
 
   .bg-primary
     background-color $primary

diff --git a/src/pages/hello.vue b/src/pages/hello.vue
@@ -1,21 +1,23 @@
 <template>
-  <div class="hello">
-    <img src="~assets/ashtag-logo-full.svg" alt="Ashtag" style="padding:20px;width:150px">
-    <h5>Ash trees are in danger!</h5>
-    <p>Can you help us find them all so we can stop the spread of a
-      deadly beetle infestation?</p>
-    <p>Welcome, {{name}}!</p>
-    <router-link class='btn' to="/tag">
-      <q-btn color="secondary">
-        Tag an ash tree
-      </q-btn>
-    </router-link>
-    <router-link class='btn' to="/istree">
-      <q-btn color="secondary" align="center">
-        Verify others' photos
-      </q-btn>
-    </router-link>
-  </div>
+  <q-page padding>
+    <div class="hello">
+      <img src="~assets/ashtag-logo-full.svg" alt="Ashtag" style="padding:20px;width:150px">
+      <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>
+      <router-link class='btn' to="/tag">
+        <q-btn color="secondary">
+          Tag an ash tree
+        </q-btn>
+      </router-link>
+      <router-link class='btn' to="/istree">
+        <q-btn color="secondary" align="center">
+          Verify others' photos
+        </q-btn>
+      </router-link>
+    </div>
+  </q-page>
 </template>
 
 <script>
@@ -30,7 +32,7 @@
         user: {}
       }
     },
-    beforeMount: function () {
+    created() {
       if (this.$store.state.user) {
         this.user = this.$store.state.user
         this.name = this.$store.state.user.displayName
@@ -55,7 +57,7 @@
       color #35495E
   p
     display flex
-    align-content
+    align-content center
     justify-content center
   ul
     list-style-type none

diff --git a/src/pages/login.vue b/src/pages/login.vue
@@ -1,13 +1,14 @@
 <template>
-  <div class="hello">
-    <img src="~assets/ashtag-logo-full.svg" alt="Ashtag" style="padding:20px;width:150px">
-    <h5>Ash trees are in danger!</h5>
-    <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>
-    <div id="firebaseui-auth-container"></div>
-  </div>
-
+  <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>
+        <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>
+        <div id="firebaseui-auth-container"></div>
+      </div>
+  </q-page>
 </template>
 
 <script>
@@ -22,13 +23,13 @@
             signInSuccessWithAuthResult: function (authResult, redirectUrl) {
               var user = authResult.user;
               var credential = authResult.credential;
-              console.log("user: " + user);
+              console.log("user: " + user.displayName);
               this.sendToStore(user);
-              alert("Login successful");
+              alert("Logging in");
               return true;
             }.bind(this)
            // uiShown: function() {
-           //   //alert("Trying sign in");
+           //   //alert("Trying to sign in");
            // }
           },
           signInSuccessUrl: 'http://localhost:8080/hello',
@@ -40,9 +41,9 @@
         var ui = new firebaseui.auth.AuthUI(this.$auth)
         ui.start('#firebaseui-auth-container', uiConfig)
       },
-      methods : {
-          sendToStore(user)  {
-            this.$store.commit('setUser', user);
+      methods: {
+          sendToStore(user) {
+            this.$store.dispatch('setUser', user); //|| false)
           }
       }
   }

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -4,7 +4,7 @@ export default [
     path: '/',
     component: () => import('layouts/default'),
     children: [
-      { path: '', component: () => import('pages/login') },
+      { path: '/', component: () => import('pages/login') },
       { path: '/login', component: () => import('pages/login') },
       { path: '/hello', component: () => import('pages/hello')}, //, meta: {
           //requiresAuth: true }},

diff --git a/src/store/index.js b/src/store/index.js
@@ -8,20 +8,31 @@ import { fireb } from '../plugins/firebase'
 Vue.use(Vuex)
 
 const initialState = {
-  user: {displayName: 'Joel', email: '[email protected]'},
-  lastPOI: {lat: 40.34923, lng: -74.65955},
+  user: {}, // {displayName: 'Joel', email: '[email protected]'},
+  lastPOI: {}, // {lat: 40.34923, lng: -74.65955},
   profile: {},
   simplePoints: 10,
   tagPoints: 50,
   flagToSpamThreshold: 1,
   userTagList: {}
 }
 
-const state = Object.assign({}, initialState)
+//const state = Object.assign({}, initialState)
+
+const state = {
+  user: {},
+  lastPOI: {},
+  profile: {},
+  simplePoints: 10,
+  tagPoints: 50,
+  flagToSpamThreshold: 1,
+  userTagList: {}
+}
 
 const mutations = {
   SET_USER (state, user) {
     state.user = user
+    console.log("Mutation User: " + user.displayName)
   },
   SET_PROFILE (state, profile) {
     state.profile = profile
@@ -41,6 +52,7 @@ const mutations = {
 
 const actions = {
   setUser (context, user) {
+    console.log("SetUser Action :" + user.displayName)
     context.commit('SET_USER', user)
     if (user) {
       fireb.database().ref('user_profiles').orderByChild('user_email')