feat: using pinia to create sessionStore

get session user, login, logout, isLoggedIn to create a login page

frontend/src/main.js

@@ -3,16 +3,20 @@ import './index.css'
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
+import { createPinia } from "pinia";
 
 import { FrappeUI, Button, setConfig, frappeRequest, resourcesPlugin } from 'frappe-ui'
 
+// create a pinia instance
+let pinia = createPinia();
+
 let app = createApp(App)
 
 setConfig('resourceFetcher', frappeRequest)
 
-app.use(router)
 app.use(FrappeUI)
-app.use(resourcesPlugin)
+app.use(pinia);
+app.use(router)
 
 app.component('Button', Button)
 app.mount('#app')

frontend/src/stores/session.js

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { createResource } from 'frappe-ui'
+import router from '@/router'
+import { computed } from 'vue'
+
+export const sessionStore = defineStore('crm-session', () => {
+  const sessionUser = createResource({
+    url: 'crm.api.session.get_user_info',
+  })
+
+  const user = computed(() => sessionUser.data || null)
+  const isLoggedIn = computed(() => !!user.value)
+
+  const login = createResource({
+    url: 'login',
+    onError() {
+      throw new Error('Invalid email or password')
+    },
+    onSuccess() {
+      router.replace({ path: '/' })
+    },
+  })
+
+  const logout = createResource({
+    url: 'logout',
+    onSuccess() {
+      router.replace({ name: 'Login' })
+    },
+  })
+
+  async function init() {
+    try {
+      await sessionUser.fetch()
+    } catch {
+      sessionUser.data = null
+    }
+  }
+
+  return {
+    user,
+    isLoggedIn,
+    login,
+    logout,
+    init,
+  }
+})