Fix routing

Author: AchoArnold

.pre-commit-config.yaml

@@ -1,19 +1,19 @@
-repos:
-  - repo: https://github.com/tekwizely/pre-commit-golang
-    rev: v1.0.0-rc.1
-    hooks:
-      - id: go-fumpt
-      - id: go-mod-tidy
-      - id: go-lint
-      - id: go-imports
-  - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.4.0
-    hooks:
-      - id: check-yaml
-      - id: end-of-file-fixer
-      - id: trailing-whitespace
-
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0-alpha.4
-    hooks:
-      - id: prettier
+repos:
+  - repo: https://github.com/tekwizely/pre-commit-golang
+    rev: v1.0.0-rc.1
+    hooks:
+      - id: go-fumpt
+      - id: go-mod-tidy
+      - id: go-lint
+      - id: go-imports
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.4.0
+    hooks:
+      - id: check-yaml
+      - id: end-of-file-fixer
+      - id: trailing-whitespace
+
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v3.0.0-alpha.6
+    hooks:
+      - id: prettier

web/components/FirebaseAuth.vue

@@ -16,6 +16,7 @@
 import { Vue, Component, Prop } from 'vue-property-decorator'
 import { ProviderId } from 'firebase/auth'
 import { auth } from 'firebaseui'
+import firebase from 'firebase/compat'
 import { NotificationRequest } from '~/store'
 
 @Component
@@ -44,11 +45,18 @@ export default class FirebaseAuth extends Vue {
   uiConfig(): any {
     return {
       callbacks: {
-        signInSuccessWithAuthResult: () => {
+        signInSuccessWithAuthResult: (
+          authResult: firebase.auth.UserCredential,
+        ) => {
           this.$store.dispatch('addNotification', {
             message: 'Login successfull!',
             type: 'success',
           } as NotificationRequest)
+
+          this.$store.dispatch('onAuthStateChanged', {
+            authUser: authResult.user,
+          })
+
           this.$router.push({ path: this.to })
           return false
         },
@@ -58,7 +66,7 @@ export default class FirebaseAuth extends Vue {
           this.firebaseUIInitialized = true
           const container = this.$refs.authContainer as HTMLElement
           Array.from(
-            container.getElementsByClassName('firebaseui-idp-text-long')
+            container.getElementsByClassName('firebaseui-idp-text-long'),
           ).forEach((item: Element) => {
             item.textContent =
               item.textContent?.replace('Sign in with', 'Continue with') || null

web/components/LoadingDashboard.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-main>
+    <v-container fluid fill-height>
+      <v-row align="center" justify="center">
+        <v-col
+          cols="12"
+          md="5"
+          xl="3"
+          class="text-center mt-16"
+          :class="{
+            'px-6': $vuetify.breakpoint.mdAndDown,
+            'px-16': !$vuetify.breakpoint.mdAndDown,
+          }"
+        >
+          <h2 class="text-h4 text--secondary mt-16 mb-4">
+            <img
+              class="mx-auto d-inline-block"
+              :src="require('@/assets/img/logo.svg')"
+              style="max-width: 32px"
+              alt="httpSMS Logo"
+            />
+            Loading the httpSMS dashboard
+          </h2>
+          <v-progress-circular
+            indeterminate
+            size="160"
+            class="mt-8"
+            color="primary"
+          ></v-progress-circular>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+export default {
+  name: 'LoadingDashboard',
+}
+</script>

web/layouts/default.vue

@@ -19,8 +19,9 @@
       </template>
     </v-navigation-drawer>
     <v-main :class="{ 'has-drawer': hasDrawer && $vuetify.breakpoint.lgAndUp }">
-      <Nuxt />
       <toast></toast>
+      <Nuxt v-if="$store.getters.authStateChanged" />
+      <loading-dashboard v-else></loading-dashboard>
     </v-main>
   </v-app>
 </template>
@@ -39,11 +40,14 @@ export default class DefaultLayout extends Vue {
 
   mounted() {
     // this.startPoller()
-    setTimeout(() => {
-      if (this.poller) {
-        clearInterval(this.poller)
-      }
-    }, 60 * 1000 * 60)
+    setTimeout(
+      () => {
+        if (this.poller) {
+          clearInterval(this.poller)
+        }
+      },
+      60 * 1000 * 60,
+    )
   }
 
   beforeDestroy(): void {
@@ -61,7 +65,7 @@ export default class DefaultLayout extends Vue {
         setAuthHeader((await this.$fire.auth.currentUser?.getIdToken()) ?? '')
         promises.push(
           this.$store.dispatch('loadThreads'),
-          this.$store.dispatch('getHeartbeat')
+          this.$store.dispatch('getHeartbeat'),
         )
       }
 
@@ -73,8 +77,8 @@ export default class DefaultLayout extends Vue {
         promises.push(
           this.$store.dispatch(
             'loadThreadMessages',
-            this.$store.getters.getThread.id
-          )
+            this.$store.getters.getThread.id,
+          ),
         )
       }
       await Promise.all(promises)

web/middleware/auth.ts

@@ -2,10 +2,7 @@ import { Context, Middleware } from '@nuxt/types'
 
 const authMiddleware: Middleware = (context: Context) => {
   if (context.store.getters.getAuthUser === null) {
-    if (context.store.getters.getNextRoute) {
-      context.redirect('/login', { to: context.route.path })
-      context.store.dispatch('setNextRoute', null)
-    }
+    context.redirect('/login', { to: context.route.path })
   }
 }
 

web/middleware/guest.ts

@@ -2,10 +2,6 @@ import { Context, Middleware } from '@nuxt/types'
 
 const guestMiddleware: Middleware = (context: Context) => {
   if (context.store.getters.getAuthUser !== null) {
-    if (context.store.getters.getNextRoute) {
-      context.redirect(context.store.getters.getNextRoute)
-      context.store.dispatch('setNextRoute', null)
-    }
     context.redirect('/threads')
   }
 }

web/middleware/user.ts

@@ -112,7 +112,7 @@ export default {
             persistence: 'local', // default
             initialize: {
               onAuthStateChangedAction: 'onAuthStateChanged',
-              onIdTokenChangedAction: 'onAuthStateChanged',
+              onIdTokenChangedAction: 'onIdTokenChanged',
               subscribeManually: false,
             },
             ssr: false,
@@ -148,10 +148,6 @@ export default {
     },
   },
 
-  router: {
-    middleware: ['user'],
-  },
-
   sitemap: {
     hostname: 'https://httpsms.com',
     gzip: true,

web/nuxt.config.js

@@ -62,7 +62,7 @@
     "jest": "^27.4.4",
     "lint-staged": "^13.2.0",
     "postcss-html": "^1.5.0",
-    "prettier": "^2.8.4",
+    "prettier": "3.0.0-alpha.6",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended-vue": "^1.1.0",

web/package.json

@@ -1,8 +1,12 @@
 <template>
-  <v-container fluid class="pa-0" :fill-height="$vuetify.breakpoint.lgAndUp">
+  <v-container
+    fluid
+    class="px-0 pt-0"
+    :fill-height="$vuetify.breakpoint.lgAndUp"
+  >
     <div class="w-full h-full">
       <v-app-bar height="60" :dense="$vuetify.breakpoint.mdAndDown">
-        <v-btn icon to="/">
+        <v-btn icon to="/threads">
           <v-icon>{{ mdiArrowLeft }}</v-icon>
         </v-btn>
         <v-toolbar-title>
@@ -45,7 +49,7 @@
                         Your next bill is for <b>${{ plan.price }}</b> on
                         <b>{{
                           new Date(
-                            $store.getters.getUser.subscription_renews_at
+                            $store.getters.getUser.subscription_renews_at,
                           ).toLocaleDateString()
                         }}</b>
                       </p>
@@ -60,7 +64,7 @@
                         You will be downgraded to the <b>FREE</b> plan on
                         <b>{{
                           new Date(
-                            $store.getters.getUser.subscription_ends_at
+                            $store.getters.getUser.subscription_ends_at,
                           ).toLocaleDateString()
                         }}</b>
                       </p>
@@ -112,7 +116,7 @@
                               of the current billing period on
                               <b>{{
                                 new Date(
-                                  $store.getters.getUser.subscription_renews_at
+                                  $store.getters.getUser.subscription_renews_at,
                                 ).toLocaleDateString()
                               }}</b>
                             </p>
@@ -395,7 +399,7 @@ export default Vue.extend({
     plan(): PaymentPlan {
       return this.plans.find(
         (x) =>
-          x.id === (this.$store.getters.getUser?.subscription_name || 'free')
+          x.id === (this.$store.getters.getUser?.subscription_name || 'free'),
       )!
     },
     isOnFreePlan(): boolean {
@@ -418,12 +422,6 @@ export default Vue.extend({
     },
   },
   async mounted() {
-    if (!this.$store.getters.getAuthUser) {
-      await this.$store.dispatch('setNextRoute', this.$route.path)
-      await this.$router.push({ name: 'index' })
-      setTimeout(this.loadData, 2000)
-      return
-    }
     await this.loadData()
   },