diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 765fa3996a..465787bda7 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -5,12 +5,11 @@ import MdiDotsVertical from '~icons/mdi/dots-vertical'
import { navigateTo } from '#app'
const { $state } = useNuxtApp()
-const email = computed(() => $state.value.user?.email ?? '---')
+const email = computed(() => $state.user?.value?.email ?? '---')
-const signOut = () => {
- $state.value.token = undefined
- $state.value.user = undefined
- navigateTo('/signin')
+const signOut = async () => {
+ $state.signOut()
+ await navigateTo('/signin')
}
@@ -46,7 +45,7 @@ const signOut = () => {
-
+
diff --git a/packages/nc-gui-v2/components/general/Language.vue b/packages/nc-gui-v2/components/general/Language.vue
index 75dc2d0f8e..bc035f65b3 100644
--- a/packages/nc-gui-v2/components/general/Language.vue
+++ b/packages/nc-gui-v2/components/general/Language.vue
@@ -11,7 +11,7 @@ const languages = $computed(() => {
return availableLocales.sort()
})
-const isRtlLang = $computed(() => ['fa'].includes($state.value.lang))
+const isRtlLang = $computed(() => ['fa'].includes($state.lang.value))
function applyDirection() {
const targetDirection = isRtlLang ? 'rtl' : 'ltr'
@@ -22,8 +22,9 @@ function applyDirection() {
}
function changeLanguage(lang: string) {
- $state.value.lang = lang
+ $state.lang.value = lang
locale.value = lang
+ applyDirection()
$e('c:navbar:lang', { lang })
}
diff --git a/packages/nc-gui-v2/composables/useGlobalState.ts b/packages/nc-gui-v2/composables/useGlobalState.ts
index b798b1d431..51597fcf45 100644
--- a/packages/nc-gui-v2/composables/useGlobalState.ts
+++ b/packages/nc-gui-v2/composables/useGlobalState.ts
@@ -1,15 +1,28 @@
-import { createGlobalState, usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
-import type { GlobalState } from '~/lib/types'
+import { usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
+import { computed, toRefs } from '#build/imports'
+import type { GlobalState, State } from '~/lib/types'
const storageKey = 'nocodb-gui-v2'
/**
* Global State is injected by state plugin, so manual initialization is unnecessary and should be avoided
*/
-export const useGlobalState = () => {
+export const useGlobalState = (): GlobalState => {
const preferredLanguages = $(usePreferredLanguages())
const darkMode = $(usePreferredDark())
- return createGlobalState(() =>
- useStorage(storageKey, { token: undefined, user: undefined, lang: preferredLanguages[0] || 'en', darkMode }),
- )
+
+ const initialState = { token: undefined, user: undefined, lang: preferredLanguages[0] || 'en', darkMode }
+
+ const storage = useStorage(storageKey, initialState)
+
+ // getters
+ const signedIn = computed(() => storage.value.token !== undefined && storage.value.user !== undefined)
+
+ // actions
+ function signOut() {
+ storage.value.token = undefined
+ storage.value.user = undefined
+ }
+
+ return { ...toRefs(storage.value), signedIn, signOut }
}
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index ca7aaafa06..16cd8ee500 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -1,4 +1,6 @@
-export interface GlobalState {
+import type { ComputedRef, ToRefs } from 'vue'
+
+export interface State {
token?: string
user?: {
email?: string
@@ -6,3 +8,13 @@ export interface GlobalState {
lang: string
darkMode: boolean
}
+
+export interface Getters {
+ signedIn: ComputedRef
+}
+
+export interface Actions {
+ signOut: () => void
+}
+
+export type GlobalState = Getters & Actions & ToRefs
diff --git a/packages/nc-gui-v2/nuxt-shim.d.ts b/packages/nc-gui-v2/nuxt-shim.d.ts
index 581c8a8c6b..438dbb265a 100644
--- a/packages/nc-gui-v2/nuxt-shim.d.ts
+++ b/packages/nc-gui-v2/nuxt-shim.d.ts
@@ -11,6 +11,6 @@ declare module '#app/nuxt' {
}
// tele.emit
$e: (event: string, data?: any) => void
- $state: RemovableRef
+ $state: GlobalState
}
}
diff --git a/packages/nc-gui-v2/plugins/i18n.ts b/packages/nc-gui-v2/plugins/i18n.ts
index 86726c17f2..23979c5add 100644
--- a/packages/nc-gui-v2/plugins/i18n.ts
+++ b/packages/nc-gui-v2/plugins/i18n.ts
@@ -49,31 +49,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
})
;(nuxtApp.vueApp as any).i18n = i18n
+
nuxtApp.vueApp.use(i18n)
})
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR
- * @author Pranav C Balan
- * @author Sebastien Gellet
- * @author Alejandro Moreno
- * @author Bruno Moreira
-
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see .
- *
- */
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index bdd603940f..1fdc9eb512 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -2,11 +2,10 @@ import { defineNuxtPlugin } from '#app'
import { useGlobalState } from '~/composables/useGlobalState'
export default defineNuxtPlugin((nuxtApp) => {
- const createGlobalState = useGlobalState()
- const globalState = createGlobalState()
+ const storage = useGlobalState()
// set initial app language to the first preferred language (found in state)
- ;(nuxtApp.vueApp as any).i18n.global.locale.value = globalState.value.lang
+ ;(nuxtApp.vueApp as any).i18n.global.locale.value = storage.lang.value
- nuxtApp.provide('state', globalState)
+ nuxtApp.provide('state', storage)
})