feat(login): Adding Login page | JIRA: PT-143

src/App.vue

@@ -1,14 +1,16 @@
 <template>
   <el-config-provider :zIndex="9999">
-    <DefaultLayout />
+    <AuthLayout v-if="!isAuthenticated" />
+    <DefaultLayout v-else />
   </el-config-provider>
 </template>
 
 <script lang="ts">
-import { defineComponent, inject } from 'vue'
+import { defineComponent, inject, computed } from 'vue'
 import { ElConfigProvider } from 'element-plus'
 import DefaultLayout from './layouts/default-layout.vue'
 import AuthLayout from 'layouts/auth-layout.vue'
+import useStore from 'store'
 
 export default defineComponent({
   components: {
@@ -20,16 +22,17 @@ export default defineComponent({
 
   setup() {
     const $message = inject<IMessage>('$message')
+    const store = useStore()
     const initialize = () => {
       return Promise.resolve()
     }
 
+    const isAuthenticated = computed<boolean>(() => store.auth.getAuthenticationState)
     initialize().catch((error: Error) => {
-      console.log('object')
       $message?.error(`Couldn't initialize the system with error: ${error.message}`)
     })
 
-    return { zIndex: 3000, size: 'small' }
+    return { zIndex: 3000, size: 'small', isAuthenticated }
   },
 })
 </script>

src/assets/css/notifications.scss

@@ -184,7 +184,7 @@ body {
     @apply w-full p-12;
   }
   .open-form .el-dialog__body {
-    @apply flex flex-col items-center justify-center bg-mess-box-bg pt-0 rounded-md text-mess-box-text p-0 flex flex-col text-center;
+    @apply flex flex-col items-center justify-center bg-mess-box-bg pt-0 rounded-md text-mess-box-text p-0 text-center;
   }
   .open-form .el-dialog__header {
     @apply hidden;

src/components/Navigation/index.vue

@@ -280,7 +280,11 @@
                   </div>
                 </el-dropdown-item>
 
-                <el-dropdown-item divided class="mx-0 mt-2 hover:bg-slate-100 text-zinc-800">
+                <el-dropdown-item
+                  divided
+                  class="mx-0 mt-2 hover:bg-slate-100 text-zinc-800"
+                  @click="handleLogoutClick(false)"
+                >
                   <div class="flex flex-row items-center w-full h-6">
                     <div class="flex w-auto">
                       <el-icon :size="20" class="cursor-pointer w-5 h-6">
@@ -319,7 +323,7 @@ import {
   Close,
 } from '@element-plus/icons-vue'
 import { MenuIcon, MenuAlt1Icon, SearchIcon, SearchCircleIcon } from '@heroicons/vue/outline'
-import { useDashboardStore } from '../../modules/dashboard/store'
+import useStore from 'store'
 
 export default defineComponent({
   name: 'Sidebar',
@@ -339,7 +343,7 @@ export default defineComponent({
     SearchCircleIcon,
   },
   setup() {
-    const store = useDashboardStore()
+    const store = useStore()
     const isPagesMenuOpen = ref(false)
     const isSideMenuOpen = ref(false)
     const isSearchOpen = ref(true)
@@ -352,11 +356,15 @@ export default defineComponent({
     const closeSideMenu = () => {
       isSideMenuOpen.value = false
     }
-    const isSBPin = computed(() => store.isSBPin)
-    const isSBOpen = computed(() => store.isSBOpen)
+    const isSBPin = computed(() => store.dashboard.isSBPin)
+    const isSBOpen = computed(() => store.dashboard.isSBOpen)
 
     const handleMenuClick = () => {
-      store.toggleMenu()
+      store.dashboard.toggleMenu()
+    }
+
+    const handleLogoutClick = async (b: boolean) => {
+      store.auth.setAuthentication(b)
     }
 
     const setSearchOpen = (v: boolean) => (isSearchOpen.value = v)
@@ -370,6 +378,7 @@ export default defineComponent({
       clickIconBell,
       clickIconMenu,
       textInput,
+      handleLogoutClick,
       handleMenuClick,
       setSearchOpen,
       togglePagesMenu,

src/components/Sidebar/index.vue

@@ -82,7 +82,7 @@ import { defineComponent, ref, computed, onMounted, watch, onUnmounted, onBefore
 import { useRoute } from 'vue-router'
 import navigation from './SidebarNav'
 import { BellIcon, MenuIcon, MenuAlt1Icon } from '@heroicons/vue/outline'
-import { useDashboardStore } from '../../modules/dashboard/store'
+import useStore from 'store'
 import { onClickOutside } from '@vueuse/core'
 import env from 'core/env'
 import { checkIsMobile } from 'utils/index'
@@ -104,7 +104,7 @@ export default defineComponent({
   },
   setup() {
     const route = useRoute()
-    const store = useDashboardStore()
+    const store = useStore()
     const menuItems = ref<MenuItem[]>(navigation)
     const isPagesMenuOpen = ref(false)
     const isSideMenuOpen = ref(false)
@@ -113,21 +113,19 @@ export default defineComponent({
     const isMobile = checkIsMobile()
 
     onClickOutside(target, (_) => {
-      console.log(target.value)
-      console.log('outside click')
-      if (window.innerWidth < 1024) store.setIsSBOpen(false)
+      if (window.innerWidth < 1024) store.dashboard.setIsSBOpen(false)
     })
     onBeforeMount(() => {
       if (isMobile || window.innerWidth < 1024) {
-        store.setIsSBOpen(false)
-        store.setIsSBPin(false)
+        store.dashboard.setIsSBOpen(false)
+        store.dashboard.setIsSBPin(false)
       }
     })
     onMounted(() => {
       window.addEventListener('resize', () => {
         if (window.innerWidth < 1024) {
-          store.setIsSBOpen(false)
-          store.setIsSBPin(false)
+          store.dashboard.setIsSBOpen(false)
+          store.dashboard.setIsSBPin(false)
         }
       })
     })
@@ -136,19 +134,19 @@ export default defineComponent({
       window.removeEventListener('resize', () => {})
     })
 
-    const isSBPin = computed<boolean>(() => store.isSBPin)
-    const isSBOpen = computed<boolean>(() => store.isSBOpen)
+    const isSBPin = computed<boolean>(() => store.dashboard.isSBPin)
+    const isSBOpen = computed<boolean>(() => store.dashboard.isSBOpen)
 
     const hoverLeftBar = (v: boolean) => {
-      if (!isMobile && window.innerWidth > 1023) store.setIsSBOpen(v)
+      if (!isMobile && window.innerWidth > 1023) store.dashboard.setIsSBOpen(v)
     }
 
     const handleMenuClick = () => {
-      store.toggleMenu()
+      store.dashboard.toggleMenu()
     }
 
     watch(route, () => {
-      store.setIsSBOpen(false)
+      store.dashboard.setIsSBOpen(false)
     })
 
     return {

src/layouts/auth-layout.vue

@@ -1,22 +1,14 @@
 <template>
-  <div class="min-h-screen bg-white flex">
-    <div class="hidden lg:block relative w-0 flex-1">
+  <div class="min-h-screen bg-white">
+    <div class="hidden lg:block relative w-0">
       <img
         class="absolute inset-0 h-full w-full object-cover"
         src="https://images.unsplash.com/photo-1505904267569-f02eaeb45a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80"
         alt=""
       />
     </div>
     <div
-      class="
-        flex-1 flex flex-col
-        justify-center
-        py-12
-        px-4
-        sm:px-6
-        lg:flex-none lg:px-20
-        xl:px-24
-      "
+      class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
     >
       <router-view v-slot="{ Component }">
         <component :is="Component" />

src/layouts/default-layout.vue

@@ -75,7 +75,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { useDashboardStore } from '../modules/dashboard/store'
+import useStore from 'store'
 import { HomeFilled } from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router'
 
@@ -87,9 +87,9 @@ export default defineComponent({
 
   setup() {
     const route: any = useRoute()
-    const store = useDashboardStore()
-    const isSBPin = computed<boolean>(() => store.isSBPin)
-    const setIsSBPin = (b: boolean) => store.setIsSBPin(b)
+    const store = useStore()
+    const isSBPin = computed<boolean>(() => store.dashboard.isSBPin)
+    const setIsSBPin = (b: boolean) => store.dashboard.setIsSBPin(b)
     return { isSBPin, setIsSBPin, route }
   },
 })

src/modules/auth/store/actions.ts

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { useState } from './state'
+
+export const useActions = defineStore('auth.actions', () => {
+  const state = useState()
+
+  const setAuthentication = (value: boolean) => {
+    state.isAuthenticated = value
+  }
+  return {
+    setAuthentication,
+  }
+})

src/modules/auth/store/getters.ts

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+
+import { computed } from 'vue'
+import { useState } from './state'
+
+export const useGetters = defineStore('auth.getters', () => {
+  const state = useState()
+  const getAuthenticationState = computed((): boolean => state.isAuthenticated)
+
+  return { getAuthenticationState }
+})

src/modules/auth/store/index.ts

@@ -0,0 +1,13 @@
+import { extractStore } from 'utils/extractStore'
+import { defineStore } from 'pinia'
+import { useActions } from './actions'
+import { useGetters } from './getters'
+import { useState } from './state'
+
+export const useAuthStore = defineStore('auth', () => {
+  return {
+    ...extractStore(useState()),
+    ...extractStore(useGetters()),
+    ...extractStore(useActions()),
+  }
+})

src/modules/auth/store/state.ts

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+import { AuthState } from './types'
+
+export const useState = defineStore({
+  id: 'auth.state',
+  state: (): AuthState => {
+    return {
+      isAuthenticated: false,
+    }
+  },
+})

src/modules/auth/store/types.ts

@@ -0,0 +1,3 @@
+export interface AuthState {
+  isAuthenticated: boolean
+}

src/modules/auth/views/login.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-if="!isAuthenticated">
+    <div class="container mt-8 pb-5">
+      <div class="flex flex-wrap -mx-3.75 content-center">
+        <div class="relative w-full px-3.75">
+          <el-card class="bg-secondary">
+            <template #header>
+              <h3 class="cursor-auto mb-0 text-card-title">Sign in with</h3>
+            </template>
+            <div class="content-center">
+              <el-form ref="form" :model="formData" :rules="rules">
+                <el-form-item class="border border-gray-900 rounded-full" prop="identifier">
+                  <el-input placeholder="UserName / Email" v-model="formData.identifier" />
+                </el-form-item>
+                <el-form-item class="border border-gray-900 rounded-full mb-2" prop="password">
+                  <el-input
+                    type="password"
+                    placeholder="Password"
+                    v-model="formData.password"
+                    @keydown.enter="handleKeyDown"
+                  ></el-input>
+                </el-form-item>
+              </el-form>
+            </div>
+            <div class="text-sm text-left px-2 pt-2">
+              <router-link to="/forgot-password" class="text-secondary hover:text-primary">
+                Forgot password?
+              </router-link>
+            </div>
+            <div class="flex">
+              <div class="empty flex-grow"></div>
+              <div>
+                <el-button class="px-12" type="primary" @click="handleLoginClick">
+                  Login
+                </el-button>
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue'
+import useStore from 'store'
+
+export default defineComponent({
+  setup() {
+    const form = ref<ElementForm>()
+    const store = useStore()
+
+    const isAuthenticated = computed<boolean>(() => store.auth.getAuthenticationState)
+    const formData = ref({ identifier: '[email protected]', password: '' })
+    const rules = ref({
+      identifier: [
+        {
+          required: true,
+          message: 'Wrong Username',
+          trigger: 'blur',
+        },
+      ],
+      password: [
+        {
+          required: true,
+          message: 'Wrong Password',
+          trigger: 'blur',
+        },
+      ],
+    })
+
+    const handleKeyDown = async () => {
+      login()
+    }
+
+    const handleLoginClick = async () => {
+      login()
+    }
+
+    const login = async () => {
+      try {
+        store.auth.setAuthentication(true)
+      } catch (e) {
+        console.log('err::: ', e)
+      }
+    }
+
+    return {
+      isAuthenticated,
+      form,
+      formData,
+      rules,
+      handleLoginClick,
+      handleKeyDown,
+    }
+  },
+})
+</script>