fluidd-core · pedrolamas · Oct 10, 2024 · Sep 30, 2024
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
 
     <script type="module" src="/src/main.ts"></script>
   </head>
-  <body>
+  <body style="background-color: #1E1E20">
     <noscript>
       <strong>We're sorry, but fluidd doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,5 @@
 <template>
-  <v-app v-if="loading" />
   <v-app
-    v-else
     class="fluidd"
     :class="{ 'no-pointer-events': dragState }"
   >
@@ -43,7 +41,6 @@
     </v-btn>
 
     <v-main :style="customBackgroundImageStyle">
-      <!-- <pre>authenticated {{ authenticated }}, socketConnected {{ socketConnected }}, apiConnected {{ apiConnected }}</pre> -->
       <v-container
         fluid
         :class="{
@@ -179,10 +176,6 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
     return this.$route.meta?.fileDropRoot
   }
 
-  get loading () {
-    return this.hasWait(this.$waits.onLoadLanguage)
-  }
-
   get progress (): number {
     const progress = this.$store.getters['printer/getPrintProgress'] as number
     return Math.floor(progress * 100)

diff --git a/src/components/common/SocketDisconnected.vue b/src/components/common/SocketDisconnected.vue
@@ -9,33 +9,35 @@
         class="subtitle-1 text-center"
         cols="12"
       >
-        <div v-if="activeInstance">
-          {{ activeInstance.apiUrl }}
+        <div v-if="apiUrl">
+          {{ apiUrl }}
         </div>
-        <span v-if="socketConnecting">{{ $t('app.socket.msg.connecting') }}</span>
-        <span v-if="!socketConnecting">{{ $t('app.socket.msg.no_connection') }}</span>
+        <span v-if="socketConnecting || !appReady">{{ $t('app.socket.msg.connecting') }}</span>
+        <span v-else>{{ $t('app.socket.msg.no_connection') }}</span>
       </v-col>
       <v-col
         cols="6"
         lg="4"
       >
         <v-progress-linear
-          v-if="socketConnecting"
+          v-if="socketConnecting || !appReady"
           class="mb-4"
           color="warning"
           indeterminate
           rounded
           height="6"
         />
+
         <app-btn
-          v-if="!socketConnecting"
+          v-if="!socketConnecting && activeInstance"
           block
           color="info"
           class="me-2 mb-2"
           @click="reconnect()"
         >
           {{ $t('app.general.btn.socket_reconnect') }}
         </app-btn>
+
         <app-btn
           block
           color="warning"
@@ -66,6 +68,10 @@ export default class SocketDisconnected extends Mixins(StateMixin) {
     return this.$store.getters['config/getCurrentInstance']
   }
 
+  get apiUrl () {
+    return this.$store.state.config.apiUrl
+  }
+
   async reconnect () {
     // Re-init the app.
     const config = await appInit(this.activeInstance, this.$store.state.config.hostConfig)

diff --git a/src/components/common/SystemPrinters.vue b/src/components/common/SystemPrinters.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from 'vue-property-decorator'
 import type { InstanceConfig } from '@/store/config/types'
 import StateMixin from '@/mixins/state'
 import { appInit } from '@/init'
@@ -69,10 +69,12 @@ export default class SystemPrinters extends Mixins(StateMixin) {
     return this.$store.getters['config/getInstances']
   }
 
-  mounted () {
-    // If we have no api's configured at all, open the dialog.
-    if (this.$store.state.config.apiUrl === '') {
-      this.instanceDialogOpen = true
+  @Watch('appReady')
+  onAppReady (value: boolean) {
+    if (value) {
+      if (this.$store.state.config.apiUrl === '') {
+        this.instanceDialogOpen = true
+      }
     }
   }
 

diff --git a/src/init.ts b/src/init.ts
@@ -202,7 +202,7 @@ export const appInit = async (apiConfig?: ApiConfig, hostConfig?: HostConfig): P
       const value = root.name ? data[root.name] : data
 
       if (root.migrate_only) {
-        if (value) store.dispatch(root.dispatch, value)
+        if (value) await store.dispatch(root.dispatch, value)
       } else {
         if (!value) {
           try {
@@ -222,8 +222,15 @@ export const appInit = async (apiConfig?: ApiConfig, hostConfig?: HostConfig): P
   // apiConfig could have empty strings, meaning we have no valid connection.
   await store.dispatch('init', { apiConfig, hostConfig, apiConnected })
 
-  // Ensure users start on the dash.
-  if (router.currentRoute.path !== '/' && store.state.auth.authenticated) router.push('/')
+  if (store.state.auth.authenticated) {
+    if (router.currentRoute.path !== '/') {
+      await router.push('/')
+    }
+  } else {
+    if (router.currentRoute.path !== '/login') {
+      await router.push('/login')
+    }
+  }
 
   return { apiConfig, hostConfig, apiConnected, apiAuthenticated }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -59,6 +59,16 @@ Vue.use(HttpClientPlugin, {
   store
 })
 
+Vue.config.productionTip = false
+
+new Vue({
+  i18n,
+  router,
+  store,
+  vuetify,
+  render: (h) => h(App)
+}).$mount('#app')
+
 appInit()
   .then((config: InitConfig) => {
     consola.debug('Loaded App Configuration', config)
@@ -74,16 +84,6 @@ appInit()
     if (config.apiConfig.socketUrl && config.apiConnected && config.apiAuthenticated) {
       Vue.$socket.connect(config.apiConfig.socketUrl)
     }
-
-    // Init Vue
-    Vue.config.productionTip = false
-    new Vue({
-      i18n,
-      router,
-      store,
-      vuetify,
-      render: (h) => h(App)
-    }).$mount('#app')
   })
   .catch((e) => {
     consola.debug('Error attempting to init App:', e)

diff --git a/src/mixins/state.ts b/src/mixins/state.ts
@@ -4,6 +4,10 @@ import { Component } from 'vue-property-decorator'
 
 @Component
 export default class StateMixin extends Vue {
+  get appReady (): boolean {
+    return this.$store.getters['config/getAppReady'] as boolean
+  }
+
   get authenticated (): boolean {
     return this.$store.getters['auth/getAuthenticated'] as boolean
   }

diff --git a/src/plugins/httpClient.ts b/src/plugins/httpClient.ts
@@ -75,15 +75,15 @@ const createHttpClient = (store: Store<RootState>) => {
     return response
   }
 
-  const errorInterceptor = (error: AxiosError<string | { error?: { message?: string} } | undefined>) => {
+  const errorInterceptor = async (error: AxiosError<string | { error?: { message?: string} } | undefined>) => {
     let message: string | undefined
 
     // Check if its a network / server error.
     if (!error.response || error.code === 'ERR_NETWORK') {
     // Network / Server Error.
       if (error.message) message = error.message
       consola.debug(message || 'Network error')
-      return Promise.reject(error)
+      throw error
     }
 
     // All other errors
@@ -109,7 +109,7 @@ const createHttpClient = (store: Store<RootState>) => {
       case 401:
         if (error.config?.withAuth) {
         // logout.
-          store.dispatch('auth/logout')
+          await store.dispatch('auth/logout')
         }
         break
       case 404:
@@ -121,7 +121,7 @@ const createHttpClient = (store: Store<RootState>) => {
         EventBus.$emit(message || 'Server error', { type: 'error' })
     }
 
-    return Promise.reject(error)
+    throw error
   }
 
   httpClient.interceptors.request.use(requestInterceptor, errorInterceptor)

diff --git a/src/store/auth/actions.ts b/src/store/auth/actions.ts
@@ -191,7 +191,7 @@ export const actions: ActionTree<AuthState, RootState> = {
     if (!opts.partial) {
       if (Vue.$socket) Vue.$socket.close()
       commit('setAuthenticated', false)
-      if (router.currentRoute.path !== '/login') router.push('/login')
+      if (router.currentRoute.path !== '/login') await router.push('/login')
     }
   },
 

diff --git a/src/store/auth/state.ts b/src/store/auth/state.ts
@@ -2,7 +2,7 @@ import type { AuthState } from './types'
 
 export const defaultState = (): AuthState => {
   return {
-    authenticated: false,
+    authenticated: true,
     token: null,
     refresh_token: null,
     currentUser: null,

diff --git a/src/store/config/getters.ts b/src/store/config/getters.ts
@@ -27,6 +27,10 @@ export const getters: GetterTree<ConfigState, RootState> = {
     return state.hostConfig
   },
 
+  getAppReady: (state) => {
+    return state.appReady
+  },
+
   /**
    * Return temp presets. Ensure we only return a preset
    * for a known heater or fan, incase things change

diff --git a/src/store/config/mutations.ts b/src/store/config/mutations.ts
@@ -57,6 +57,10 @@ export const mutations: MutationTree<ConfigState> = {
     }
   },
 
+  setAppReady (state, payload: boolean) {
+    state.appReady = payload
+  },
+
   /**
    * Sets the API and Socket URLS on first load and
    * ensure the instance is configured in local storage

diff --git a/src/store/config/state.ts b/src/store/config/state.ts
@@ -3,6 +3,7 @@ import { Globals } from '@/globals'
 
 export const defaultState = (): ConfigState => {
   return {
+    appReady: false,
     apiUrl: '',
     socketUrl: '',
     layoutMode: false,

diff --git a/src/store/config/types.ts b/src/store/config/types.ts
@@ -3,6 +3,7 @@ import type { FileFilterType } from '../files/types'
 
 export interface ConfigState {
   [key: string]: any;
+  appReady: boolean;
   apiUrl: string;
   socketUrl: string;
   layoutMode: boolean;

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -77,18 +77,20 @@ export default new Vuex.Store<RootState>({
           p.push(dispatch(key + '/reset'))
         }
       })
-      return Promise.all(p)
+      await Promise.all(p)
     },
 
     async init ({ dispatch, commit }, payload: InitConfig) {
       // Set the api connection state..
       commit('socket/setApiConnected', payload.apiConnected)
 
       // Init the host and local configs..
-      return [
-        await dispatch('config/initHost', payload),
-        await dispatch('config/initLocal', payload)
-      ]
+      await Promise.all([
+        dispatch('config/initHost', payload),
+        dispatch('config/initLocal', payload)
+      ])
+
+      commit('config/setAppReady', true)
     },
 
     /**