set storedUser fix

rslvn · Jun 9, 2020 · 10467e7 · 10467e7
1 parent 9e3202e
commit 10467e7
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -104,12 +104,13 @@ See the [Features](#features) for more functionalities
     - [x] lazy load (vue-lazyload)
     - [x] crop with cropperjs
     - [x] lightbox with buefy/bulma
-- [x] dotenv
 - [x] custom error page - simple
 - [x] global notification
 - [x] toaster notification
 - [x] tooltips
-- [x] force logout if token is invalid
+- [x] force logout if token is invalid    
+- [x] dotenv
+- [x] rxJS
 - [x] uuid
 - [x] slug
 - [ ] better formatting

diff --git a/src/components/Loading.vue b/src/components/Loading.vue
@@ -1,22 +1,10 @@
 <template>
-  <section v-if="loading">
-    <div class="container is-fullhd">
-      <div class="columns is-centered">
-        <div class="column is-three-quarters">
-          <article class="media">
-            <div class="media-content">
-              <div class="content">
-                <p>
-                  <b-skeleton active></b-skeleton>
-                  <b-skeleton height="80px"></b-skeleton>
-                </p>
-              </div>
-            </div>
-          </article>
-        </div>
-      </div>
-    </div>
-  </section>
+  <div id="wave" v-if="loading">
+    <span class="dot olive"></span>
+    <span class="dot blue"></span>
+    <span class="dot green"></span>
+    <span class="dot red"></span>
+  </div>
 </template>
 
 <script lang="ts">
@@ -50,3 +38,74 @@
   }
 </script>
 
+<style lang="css" scoped>
+  div#wave .fuchsia {
+    background: rgba(255, 0, 255, 0.5);
+  }
+
+  div#wave .olive {
+    background: rgba(128, 128, 0, 0.5);
+  }
+
+  div#wave .blue {
+    background: rgba(0, 0, 255, 0.5);
+  }
+
+  div#wave .green {
+    background: rgba(0, 128, 0, 0.5);
+  }
+
+  div#wave .red {
+    background: rgba(255, 0, 0, 0.5);
+  }
+
+  div#wave {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.8);
+    text-align: center;
+    padding-top: 200px;
+    z-index: 10000;
+  }
+
+  div#wave .dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 3px;
+
+    animation: wave 1.3s linear infinite;
+  }
+
+  div#wave .dot:nth-child(2) {
+    animation-delay: -1.1s;
+  }
+
+  div#wave .dot:nth-child(3) {
+    animation-delay: -0.9s;
+  }
+
+  div#wave .dot:nth-child(4) {
+    animation-delay: -0.7s;
+  }
+
+  div#wave .dot:nth-child(5) {
+    animation-delay: -0.5s;
+  }
+
+  @keyframes wave {
+    0%,
+    60%,
+    100% {
+      transform: initial;
+    }
+
+    30% {
+      transform: translateY(-7px);
+    }
+  }
+</style>
diff --git a/src/nuxt.config.ts b/src/nuxt.config.ts
@@ -26,8 +26,8 @@ const config: Configuration = {
   /*
    ** Customize the progress-bar color
    */
-  loading: { color: '#9400d3' },
-  // loading: './components/Loading.vue',
+  // loading: { color: '#9400d3' },
+  loading: './components/Loading.vue',
 
   /*
    ** Global CSS

diff --git a/src/plugins/firebase-auth-listener.ts b/src/plugins/firebase-auth-listener.ts
@@ -49,6 +49,8 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) =>
         return resolve()
       }
 
+      console.log('firebaseAuthListenerPlugin called with a user: ', !!firebaseUser)
+
       let storedUser = getStoredUser(firebaseUser)
       store.commit(StoreConfig.auth.setStoredUser, storedUser)
 

diff --git a/src/store/auth.ts b/src/store/auth.ts
@@ -32,8 +32,9 @@ import UserCredential = firebase.auth.UserCredential;
 import ActionCodeInfo = firebase.auth.ActionCodeInfo;
 
 export const state = (): AuthState => ({
+  storedUser: undefined,
   forceLogout: false,
-  rememberMe: true
+  rememberMe: true,
 })
 
 export const getters: GetterTree<AuthState, RootState> = {

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -15,9 +15,7 @@ export const state = (): RootState => ({})
 export const actions: ActionTree<RootState, RootState> = {
   async nuxtServerInit({ commit, dispatch, state }, { route, app }: Context) {
     commit(StoreConfig.loading.setLoading, true)
-    console.log(
-      `>>>>>>>>>> nuxtServerInit loading: ${state?.loading?.loading} mode: ${process?.mode} for path: ${route.path}`
-    )
+    console.log(`>>>>>>>>>> nuxtServerInit for path: ${route.path}`)
 
     const token = app.$cookies.get(AppCookie.TOKEN)
     if (token) {
@@ -27,7 +25,7 @@ export const actions: ActionTree<RootState, RootState> = {
           token,
         })
         .then((response: AxiosResponse<StoredUser>) => {
-          console.log('decoed User on Server')
+          console.log('decoded User on Server')
           commit(StoreConfig.auth.setStoredUser, response.data)
         })
         .catch((error: AxiosError) => {
@@ -41,6 +39,8 @@ export const actions: ActionTree<RootState, RootState> = {
           }
         })
         .then(() => commit(StoreConfig.loading.setLoading, false))
+    } else {
+      console.log('No token')
     }
     return dispatch(StoreConfig.loading.saveLoading, false)
   },

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -42,8 +42,8 @@ export enum AppCookie {
   REMEMBER_ME = 'rememberMe'
 }
 
-export const cookieOptions: CookieSerializeOptions = { sameSite: 'lax' }
+export const cookieOptions: CookieSerializeOptions = { sameSite: 'lax', path: '/' }
 
-export const sessionCookieOptionsDev: CookieSerializeOptions = { sameSite: 'none' }
+export const sessionCookieOptionsDev: CookieSerializeOptions = { sameSite: 'none', path: '/' }
 
-export const sessionCookieOptionsProd: CookieSerializeOptions = { sameSite: 'none', secure: true }
+export const sessionCookieOptionsProd: CookieSerializeOptions = { sameSite: 'none', secure: true, path: '/' }