Merge pull request #303 from shariquerik/refactor

refactor: Removed login page & more

frontend/src/App.vue

@@ -1,6 +1,5 @@
 <template>
-  <router-view v-if="$route.name == 'Login'" />
-  <Layout v-else-if="session().isLoggedIn">
+  <Layout v-if="session().isLoggedIn">
     <router-view />
   </Layout>
   <Dialogs />

frontend/src/components/Apps.vue

@@ -3,7 +3,8 @@
     <template #target="{ togglePopover }">
       <button
         :class="[
-          'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
+          active ? 'bg-gray-100' : 'text-gray-800',
+          'group w-full flex h-7 items-center justify-between rounded px-2 text-base hover:bg-gray-100',
         ]"
         @click.prevent="togglePopover()"
       >
@@ -20,13 +21,13 @@
       <div
         class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
       >
-        <div v-for="app in apps.data" key="name">
+        <div v-for="app in apps.data" :key="app.name">
           <a
             :href="app.route"
-            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
+            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-1 hover:bg-gray-100"
           >
             <img class="size-8" :src="app.logo" />
-            <div class="text-sm" @click="app.onClick">
+            <div class="text-sm text-gray-700" @click="app.onClick">
               {{ app.title }}
             </div>
           </a>
@@ -39,6 +40,10 @@
 import AppsIcon from '@/components/Icons/AppsIcon.vue'
 import { Popover, createResource } from 'frappe-ui'
 
+const props = defineProps({
+  active: Boolean,
+})
+
 const apps = createResource({
   url: 'frappe.apps.get_apps',
   cache: 'apps',
@@ -47,7 +52,7 @@ const apps = createResource({
     let _apps = [
       {
         name: 'frappe',
-        logo: '/assets/crm/images/desk.png',
+        logo: '/assets/frappe/images/framework.png',
         title: __('Desk'),
         route: '/app',
       },

frontend/src/pages/Login.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="flex h-screen w-screen justify-center bg-gray-100">
-    <div class="mt-32 w-full px-4">
-      <CRMLogo class="mx-auto h-10" />
-      <div class="mt-6 flex items-center justify-center space-x-1.5">
-        <span class="text-3xl font-semibold text-gray-900">Login to CRM</span>
-      </div>
-      <div class="mx-auto mt-6 w-full px-4 sm:w-96">
-        <form
-          v-if="showEmailLogin"
-          method="POST"
-          action="/api/method/login"
-          @submit.prevent="submit"
-        >
-          <div>
-            <FormControl
-              variant="outline"
-              size="md"
-              :type="
-                (email || '').toLowerCase() === 'administrator'
-                  ? 'text'
-                  : 'email'
-              "
-              label="Email"
-              v-model="email"
-              placeholder="jane@example.com"
-              :disabled="session.login.loading"
-            />
-          </div>
-          <div class="mt-4">
-            <FormControl
-              variant="outline"
-              size="md"
-              label="Password"
-              v-model="password"
-              placeholder="••••••"
-              :disabled="session.login.loading"
-              type="password"
-            />
-          </div>
-          <ErrorMessage class="mt-2" :message="session.login.error" />
-          <Button
-            variant="solid"
-            class="mt-6 w-full"
-            :loading="session.login.loading"
-          >
-            Login
-          </Button>
-          <button
-            v-if="authProviders.data.length"
-            class="mt-2 w-full py-2 text-base text-gray-600"
-            @click="showEmailLogin = false"
-          >
-            Login using other methods
-          </button>
-        </form>
-        <div
-          class="mx-auto space-y-2"
-          v-if="authProviders.data && !showEmailLogin"
-        >
-          <Button @click="showEmailLogin = true" variant="solid" class="w-full">
-            Login via email
-          </Button>
-          <a
-            class="flex justify-center items-center gap-2 w-full rounded border bg-gray-900 px-3 py-1 text-center text-base h-7 focus:outline-none focus:ring-2 focus:ring-gray-400 text-white transition-colors hover:bg-gray-700"
-            v-for="provider in authProviders.data"
-            :key="provider.name"
-            :href="provider.auth_url"
-          >
-            <div v-if="provider.icon" v-html="provider.icon" />
-            Login via {{ provider.provider_name }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import CRMLogo from '@/components/Icons/CRMLogo.vue';
-import { sessionStore } from '@/stores/session'
-import { createResource } from 'frappe-ui'
-import { ref } from 'vue'
-
-const session = sessionStore()
-let showEmailLogin = ref(false)
-let email = ref('')
-let password = ref('')
-
-let authProviders = createResource({
-  url: 'crm.api.auth.oauth_providers',
-  auto: true,
-  onSuccess(data) {
-    showEmailLogin.value = data.length === 0
-  },
-})
-authProviders.fetch()
-
-function submit() {
-  session.login.submit({
-    usr: email.value,
-    pwd: password.value,
-  })
-}
-</script>

frontend/src/router.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { usersStore } from '@/stores/users'
+import { userResource } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
 
 const routes = [
@@ -102,11 +102,6 @@ const routes = [
     name: 'Invalid Page',
     component: () => import('@/pages/InvalidPage.vue'),
   },
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('@/pages/Login.vue'),
-  },
 ]
 
 const handleMobileView = (componentName) => {
@@ -139,19 +134,18 @@ let router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-  const { users } = usersStore()
   const { isLoggedIn } = sessionStore()
 
-  isLoggedIn && (await users.promise)
+  isLoggedIn && (await userResource.promise)
 
   if (from.meta?.scrollPos) {
     from.meta.scrollPos.top = document.querySelector('#list-rows')?.scrollTop
   }
 
-  if (to.name === 'Login' && isLoggedIn) {
+  if (to.name === 'Home' && isLoggedIn) {
     next({ name: 'Leads' })
-  } else if (to.name !== 'Login' && !isLoggedIn) {
-    next({ name: 'Login' })
+  } else if (!isLoggedIn) {
+    window.location.href = "/login?redirect-to=/crm";
   } else if (to.matched.length === 0) {
     next({ name: 'Invalid Page' })
   } else {

frontend/src/stores/session.js

@@ -1,12 +1,10 @@
 import { defineStore } from 'pinia'
 import { createResource } from 'frappe-ui'
-import { usersStore } from './users'
+import { userResource } from './user'
 import router from '@/router'
 import { ref, computed } from 'vue'
 
 export const sessionStore = defineStore('crm-session', () => {
-  const { users } = usersStore()
-
   function sessionUser() {
     let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
     let _sessionUser = cookies.get('user_id')
@@ -25,7 +23,7 @@ export const sessionStore = defineStore('crm-session', () => {
       throw new Error('Invalid email or password')
     },
     onSuccess() {
-      users.reload()
+      userResource.reload()
       user.value = sessionUser()
       login.reset()
       router.replace({ path: '/' })
@@ -35,9 +33,9 @@ export const sessionStore = defineStore('crm-session', () => {
   const logout = createResource({
     url: 'logout',
     onSuccess() {
-      users.reset()
+      userResource.reset()
       user.value = null
-      router.replace({ name: 'Login' })
+      router.replace({ name: 'Home' })
     },
   })
 

frontend/src/stores/user.js

@@ -0,0 +1,12 @@
+import router from '@/router'
+import { createResource } from 'frappe-ui'
+
+export const userResource = createResource({
+  url: 'frappe.auth.get_logged_user',
+  cache: 'User',
+  onError(error) {
+    if (error && error.exc_type === 'AuthenticationError') {
+      router.push({ name: 'Home' })
+    }
+  },
+})