feat(gui-v2): add signIn action to global state

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

packages/nc-gui-v2/app.vue

@@ -6,11 +6,6 @@ import { navigateTo } from '#app'
 
 const { $state } = useNuxtApp()
 const email = computed(() => $state.user?.value?.email ?? '---')
-
-const signOut = async () => {
-  $state.signOut()
-  await navigateTo('/signin')
-}
 </script>
 
 <template>
@@ -65,7 +60,7 @@ const signOut = async () => {
                 <div
                   v-t="['a:navbar:user:sign-out']"
                   class="group flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                  @click="signOut"
+                  @click="$state.signOut"
                 >
                   <MdiLogout class="transition-colors duration-150 ease-in group-hover:text-red-500" />&nbsp;
                   <span class="text-sm font-semibold text-gray-500">{{ $t('general.signOut') }}</span>

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

@@ -1,6 +1,7 @@
 import { usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
+import { navigateTo } from '#app'
 import { computed, toRefs } from '#build/imports'
-import type { GlobalState, State } from '~/lib/types'
+import type { Actions, Getters, GlobalState, State } from '~/lib/types'
 
 const storageKey = 'nocodb-gui-v2'
 
@@ -18,13 +19,22 @@ export const useGlobalState = (): GlobalState => {
   const storage = useStorage<State>(storageKey, initialState)
 
   // getters
-  const signedIn = computed(() => storage.value.token !== null && storage.value.token !== '' && storage.value.user !== null)
+  const signedIn: Getters['signedIn'] = computed(
+    () => storage.value.token !== null && storage.value.token !== '' && storage.value.user !== null,
+  )
 
   // actions
-  function signOut() {
+  const signOut: Actions['signOut'] = () => {
     storage.value.token = null
     storage.value.user = null
+    navigateTo('/signin')
   }
 
-  return { ...toRefs(storage.value), signedIn, signOut }
+  const signIn: Actions['signIn'] = (user, token) => {
+    storage.value.token = token
+    storage.value.user = user
+    navigateTo('/')
+  }
+
+  return { ...toRefs(storage.value), signedIn, signOut, signIn }
 }

packages/nc-gui-v2/lib/types.ts

@@ -17,6 +17,7 @@ export interface Getters {
 
 export interface Actions {
   signOut: () => void
+  signIn: (user: User, token: string) => void
 }
 
 export type GlobalState = Getters & Actions & ToRefs<State>

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

@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { definePageMeta, useHead } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { navigateTo, useNuxtApp } from '#app'
+import { useNuxtApp } from '#app'
 import { isEmail } from '~/utils/validation'
 import MdiLogin from '~icons/mdi/login'
 import MaterialSymbolsWarning from '~icons/material-symbols/warning'
@@ -54,11 +54,7 @@ const signIn = async () => {
   error = null
   try {
     const { token } = await $api.auth.signin(form)
-
-    $state.token.value = token!
-    $state.user.value = { email: form.email }
-
-    await navigateTo('/projects')
+    $state.signIn({ email: form.email }, token!)
   } catch (e: any) {
     // todo: errors should not expose what was wrong (i.e. do not show "Password is wrong" messages)
     error = await extractSdkResponseErrorMsg(e)