Merge pull request #37 from rslvn/develop

wrong redirect fix and loading view when user is loading

src/components/navbar/TopNavbar.vue

@@ -34,21 +34,13 @@
 
       <b-navbar-item v-else tag="div">
         <div class="buttons">
-          <b-button
-            tag="router-link"
-            :to="routes.REGISTER"
-            type="is-primary"
-          >
+          <a class="button is-primary" :href="routes.REGISTER.path">
             <strong>{{ $t('topNavbar.register') }}</strong>
-          </b-button>
+          </a>
 
-          <b-button
-            tag="router-link"
-            :to="routes.LOGIN"
-            type="is-primary"
-          >
+          <a class="button is-primary" :href="routes.LOGIN.path">
             <strong>{{ $t('topNavbar.login') }}</strong>
-          </b-button>
+          </a>
         </div>
       </b-navbar-item>
     </template>

src/pages/auth/action.vue

@@ -33,19 +33,18 @@ import {
 import { getWarningNotificationMessage } from '~/service/notification-service'
 
 @Component({
-  components: {},
-  layout: 'action'
+  components: {}
 })
 export default class Action extends Vue {
-  action: string = '';
-  actionCode: string = '';
+  action: string = ''
+  actionCode: string = ''
 
-  isLoading = true;
-  isFullPage = false;
+  isLoading = true
+  isFullPage = false
 
-  @StateNamespace.auth.Action handleVerifyEmail: (actionCode: string) => Promise<void>;
-  @StateNamespace.auth.Action handleVerifyPasswordResetCode: (actionCode: string) => Promise<boolean>;
-  @StateNamespace.notification.Action saveNotificationMessage: (notificationMessage: NotificationMessage) => {};
+  @StateNamespace.auth.Action handleVerifyEmail: (actionCode: string) => Promise<void>
+  @StateNamespace.auth.Action handleVerifyPasswordResetCode: (actionCode: string) => Promise<boolean>
+  @StateNamespace.notification.Action saveNotificationMessage: (notificationMessage: NotificationMessage) => {}
 
   asyncData ({ query }: Context) {
     const action = (query[FirebaseAuthActionParams.ACTION])

src/pages/auth/forget-password.vue

@@ -8,12 +8,11 @@ import ForgetPasswordForm from '~/components/form/ForgetPasswordForm.vue'
 import { StateNamespace } from '~/types'
 
 @Component({
-  components: { ForgetPasswordForm },
-  layout: 'action'
+  components: { ForgetPasswordForm }
 })
 export default class ForgetPassword extends Vue {
-  @StateNamespace.auth.Action sendPasswordResetEmail: (code: any) => Promise<boolean>;
-  @StateNamespace.notification.Action clearNotificationMessage: () => void;
+  @StateNamespace.auth.Action sendPasswordResetEmail: (code: any) => Promise<boolean>
+  @StateNamespace.notification.Action clearNotificationMessage: () => void
 
   handleSendPasswordResetEmail (emailAddress: string) {
     this.clearNotificationMessage()

src/pages/auth/reset-password.vue

@@ -23,15 +23,14 @@ import { NotificationMessage, RouteParameters, StateNamespace } from '~/types'
 import { getWarningNotificationMessage } from '~/service/notification-service'
 
 @Component({
-  components: { SetPasswordForm },
-  layout: 'action'
+  components: { SetPasswordForm }
 })
 export default class ResetPassword extends Vue {
-  actionCode: string = '';
+  actionCode: string = ''
 
-  @StateNamespace.auth.Action confirmPasswordReset: (code: any) => {};
-  @StateNamespace.notification.Action clearNotificationMessage: () => void;
-  @StateNamespace.notification.Action saveNotificationMessage: (notificationMessage: NotificationMessage) => {};
+  @StateNamespace.auth.Action confirmPasswordReset: (code: any) => {}
+  @StateNamespace.notification.Action clearNotificationMessage: () => void
+  @StateNamespace.notification.Action saveNotificationMessage: (notificationMessage: NotificationMessage) => {}
 
   handleConfirmPasswordReset (password: string) {
     this.clearNotificationMessage()

src/pages/profile/index.vue

@@ -18,8 +18,9 @@ export default class profile extends Vue {
   user: User|null = null
 
   @StateNamespace.auth.Getter readonly authUser: AuthUser;
+  @StateNamespace.loading.Action saveLoading: (loading: boolean) => Promise<void>
 
-  created () {
+  mounted () {
     this.$subscribeTo(profilePhotoObservable.asObservable(), (image: Image) => {
       if (this.user) {
         this.user.profilePhoto = image
@@ -41,11 +42,16 @@ export default class profile extends Vue {
   }
 
   loadUser () {
-    getUser(this.authUser.userId)
-      .then((user: User) => {
-        this.user = user
+    this.saveLoading(true)
+      .then(async () => {
+        await getUser(this.authUser.userId)
+          .then((user: User) => {
+            this.user = user
+          })
+          .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.profile.canNotLoad')))
       })
-      .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.profile.canNotLoad')))
+      .catch((error: Error) => console.log('profile.create', error))
+      .finally(() => this.saveLoading(false))
   }
 }
 </script>

src/pages/u/_username/index.vue

@@ -20,6 +20,7 @@ export default class profile extends Vue {
   user: User|null = null
 
   @StateNamespace.auth.Getter readonly authUser: AuthUser
+  @StateNamespace.loading.Action saveLoading: (loading: boolean) => Promise<void>
 
   asyncData ({ params }: Context) {
     const username = params[RouteParameters.USERNAME]
@@ -29,7 +30,7 @@ export default class profile extends Vue {
     }
   }
 
-  async created () {
+  mounted () {
     this.$subscribeTo(profilePhotoObservable.asObservable(), (image: Image) => {
       console.log('profilePhotoObservable called by ', image)
       if (this.user) {
@@ -57,26 +58,32 @@ export default class profile extends Vue {
       })
     }
 
-    const user = await this.loadUser()
-      .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.profile.canNotLoad'))) as User
-    if (!user) {
-      return this.$nuxt.error({
-        message: this.$t('page.notFound') as string,
-        path: this.$route.fullPath,
-        statusCode: 404
-      })
-    }
+    this.saveLoading(true)
+      .then(async () => {
+        const user = await this.loadUser()
+          .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.profile.canNotLoad')))
 
-    if (this.authUser.username !== this.username &&
-      ((!user?.privacy || user.privacy === PrivacyType.PRIVATE))) {
-      console.log('PRIVATE user')
-      this.$nuxt.error({
-        message: this.$t('page.notFound') as string,
-        path: this.$route.fullPath,
-        statusCode: 404
+        if (!user) {
+          return this.$nuxt.error({
+            message: this.$t('page.notFound') as string,
+            path: this.$route.fullPath,
+            statusCode: 404
+          })
+        }
+
+        if (this.authUser.username !== this.username &&
+          ((!user?.privacy || user.privacy === PrivacyType.PRIVATE))) {
+          console.log('PRIVATE user')
+          this.$nuxt.error({
+            message: this.$t('page.notFound') as string,
+            path: this.$route.fullPath,
+            statusCode: 404
+          })
+        }
+        this.user = user
       })
-    }
-    this.user = user
+      .catch((error: Error) => console.log('profile.create', error))
+      .finally(() => this.saveLoading(false))
   }
 
   async loadUser (): Promise<User> {

src/plugins/firebase-auth-listener.ts

@@ -5,14 +5,14 @@ import { Location, Route } from 'vue-router'
 import { AppCookie, AppTokenType, AuthUser, FirebaseClaimKey } from 'types-module'
 import { auth } from '~/plugins/fire-init-plugin'
 import {
-  LocalStorageKey,
+  LocalStorageKey, LOGIN,
   QueryParameters,
   Routes,
   sessionCookieOptionsDev,
   sessionCookieOptionsProd,
   StoreConfig
 } from '~/types'
-import { authenticatedAllowed, authenticatedNotAllowed } from '~/service/global-service'
+import { authenticatedAllowed, authenticatedNotAllowed, getUserRoute } from '~/service/global-service'
 import { getAuthUser } from '~/service/firebase/firebase-service'
 import { configureAxiosObservable, configureFcmObservable, loadNotificationObservable } from '~/service/rx-service'
 
@@ -22,14 +22,15 @@ const forceLogout = (store: Store<any>) => {
   })
 }
 
-const getNextRoute = (route: Route): Location => {
+const getNextRoute = (route: Route, authUser: AuthUser): Location => {
   const path: string = route.query[QueryParameters.NEXT] as string
+  console.log(`firebaseAuthListenerPlugin next: ${path}, fullPath: ${route.fullPath}, route.path: ${route.path}`)
   if (path) {
     return { path }
   }
 
   if (authenticatedNotAllowed(route) || route.path === Routes.ACTION.path) {
-    return Routes.PROFILE
+    return getUserRoute(Routes.PROFILE_DYNAMIC, authUser.username)
   }
 
   return { path: route.fullPath }
@@ -40,17 +41,20 @@ const setRememberMe = async (store: Store<any>, app: NuxtAppOptions) => {
   await store.dispatch(StoreConfig.auth.saveRememberMe, rememberMe === undefined ? true : rememberMe)
 }
 
-const updateAuthStore = async (firebaseUser: User|null, store: Store<any>) => {
+const updateAuthStore = async (firebaseUser: User, store: Store<any>) => {
   if (!firebaseUser) {
     store.commit(StoreConfig.auth.setAuthUser, null)
+    return null
   }
-  return await firebaseUser?.getIdTokenResult()
+
+  return await firebaseUser.getIdTokenResult()
     .then((idTokenResult) => {
       const authUser = getAuthUser(firebaseUser) as AuthUser
       if (authUser) {
         authUser.username = idTokenResult.claims[FirebaseClaimKey.USERNAME]
         store.commit(StoreConfig.auth.setAuthUser, authUser)
       }
+      return authUser
     })
 }
 
@@ -73,7 +77,7 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) =>
       console.log(error)
     })
 
-  auth.onAuthStateChanged((firebaseUser: User|null) => {
+  auth.onAuthStateChanged((firebaseUser: User) => {
     return store.dispatch(StoreConfig.loading.saveLoading, true)
       .then(async () => {
         if (store.state.auth.forceLogout) {
@@ -82,11 +86,7 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) =>
         }
 
         console.log('firebaseAuthListenerPlugin called with a user: ', !!firebaseUser)
-
-        await updateAuthStore(firebaseUser, store)
-          .catch((error: Error) => {
-            console.log(error)
-          })
+        const authUser = await updateAuthStore(firebaseUser, store)
 
         if (firebaseUser) {
           await firebaseUser.getIdToken()
@@ -97,11 +97,11 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) =>
               configureFcmObservable.next()
             })
 
-          redirect(getNextRoute(route))
+          redirect(getNextRoute(route, authUser))
         } else {
           logoutActions(store, app)
           if (authenticatedAllowed(route)) {
-            redirect(Routes.LOGIN)
+            location.replace(LOGIN.path)
           }
         }
       })