fix(gui-v2): correct state usage

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/composables/useColors.ts

@@ -1,6 +1,5 @@
 import type { MaybeRef } from '@vueuse/core'
-import { unref } from '@vue/reactivity'
-import { tryOnScopeDispose } from '#build/imports'
+import { computed, effectScope, tryOnScopeDispose, unref, watch, watchEffect } from '#build/imports'
 import { useNuxtApp } from '#app'
 import theme from '~/utils/colorsUtils'
 
@@ -10,15 +9,12 @@ export default function useColors(darkMode?: MaybeRef<boolean>) {
   let mode = $ref(unref(darkMode))
   const { $state } = useNuxtApp()
 
-  if (!mode) mode = $state.value.darkMode
+  if (!mode) mode = $state.darkMode.value
 
   scope.run(() => {
-    watch(
-      () => $state.value.darkMode,
-      (newMode) => {
-        mode = newMode
-      },
-    )
+    watch($state.darkMode, (newMode) => {
+      mode = newMode
+    })
 
     watchEffect(() => {
       const newMode = unref(darkMode)

packages/nc-gui-v2/pages/signin.vue

@@ -62,8 +62,10 @@ const signIn = async () => {
 }
 
 const resetError = () => {
-  formValidator.value.reset()
-  error = null
+  if (error) {
+    formValidator.value.resetValidation()
+    error = null
+  }
 }
 </script>
 

packages/nc-gui-v2/pages/signup.vue

@@ -13,7 +13,7 @@ const signUp = async () => {
   error.value = null
   try {
     const { token } = await $api.auth.signup(form)
-    $state.value.token = token
+    $state.token.value = token!
     navigateTo('/projects')
   } catch (e: any) {
     error.value = await extractSdkResponseErrorMsg(e)

packages/nc-gui-v2/plugins/api.ts

@@ -1,26 +1,27 @@
 import { Api } from 'nocodb-sdk'
 import { defineNuxtPlugin } from '#app'
+import type { GlobalState } from '~/lib/types'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const api = new Api({
     baseURL: 'http://localhost:8080',
   })
 
-  addAxiosInterceptors(api, nuxtApp)
+  addAxiosInterceptors(api, nuxtApp as any)
 
   nuxtApp.provide('api', api)
 })
 
 const DbNotFoundMsg = 'Database config not found'
 
-function addAxiosInterceptors(api: Api<any>, app: any) {
+function addAxiosInterceptors(api: Api<any>, app: { $state: GlobalState }) {
   const router = useRouter()
   const route = useRoute()
 
   api.instance.interceptors.request.use((config) => {
     config.headers['xc-gui'] = 'true'
 
-    if (app.$state.value.token) config.headers['xc-auth'] = app.$state.value.token
+    if (app.$state.token.value) config.headers['xc-auth'] = app.$state.token.value
 
     if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) {
       // config.headers['xc-preview'] = store.state.users.previewAs
@@ -49,7 +50,7 @@ function addAxiosInterceptors(api: Api<any>, app: any) {
 
       // Logout user if token refresh didn't work or user is disabled
       if (error.config.url === '/auth/refresh-token') {
-        app.$state.value.token = undefined
+        app.$state.token.value = null
 
         return new Promise((resolve, reject) => {
           reject(error)
@@ -65,7 +66,7 @@ function addAxiosInterceptors(api: Api<any>, app: any) {
           // New request with new token
           const config = error.config
           config.headers['xc-auth'] = token.data.token
-          if (app.$state.value.token) app.$state.value.token = token.data.token
+          if (app.$state.token.value) app.$state.token.value = token.data.token
 
           return new Promise((resolve, reject) => {
             api.instance
@@ -79,7 +80,7 @@ function addAxiosInterceptors(api: Api<any>, app: any) {
           })
         })
         .catch(async (error) => {
-          app.$state.value.token = undefined
+          app.$state.token.value = null
           // todo: handle new user
 
           router.replace('/signin')

packages/nc-gui-v2/plugins/tele.ts

@@ -1,6 +1,7 @@
 import { defineNuxtPlugin } from 'nuxt/app'
 import type { Socket } from 'socket.io-client'
 import io from 'socket.io-client'
+import type { GlobalState } from '~/lib/types'
 
 // todo: ignore init if tele disabled
 export default defineNuxtPlugin(async (nuxtApp) => {
@@ -76,15 +77,12 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     }
   }
 
-  if (nuxtApp.$state.user && nuxtApp.$state.token) await init(nuxtApp.$state.token)
+  if (nuxtApp.$state.signedIn.value) await init(nuxtApp.$state.token.value)
 
-  watch(
-    () => nuxtApp.$state.token,
-    (newToken, oldToken) => {
-      if (newToken !== oldToken) init(newToken)
-      else if (!newToken) socket.disconnect()
-    },
-  )
+  watch((nuxtApp.$state as GlobalState).token, (newToken, oldToken) => {
+    if (newToken && newToken !== oldToken) init(newToken)
+    else if (!newToken) socket.disconnect()
+  })
 
   nuxtApp.provide('tele', tele)
   nuxtApp.provide('e', tele.emit)