Skip to content

Commit bcb04f2

Browse files
LeThanhPhongLTVLeThanhPhongLTV
authored
feat(login): Adding Login page | JIRA: PT-143 (#75)
* feat(login): Adding Login page | JIRA: PT-143
1 parent 69c0382 commit bcb04f2

File tree

18 files changed

+228
-48
lines changed

18 files changed

+228
-48
lines changed

‎src/App.vue

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<template>
22
<el-config-provider :zIndex="9999">
3-
<DefaultLayout />
3+
<AuthLayout v-if="!isAuthenticated" />
4+
<DefaultLayout v-else />
45
</el-config-provider>
56
</template>
67

78
<script lang="ts">
8-
import { defineComponent, inject } from 'vue'
9+
import { defineComponent, inject, computed } from 'vue'
910
import { ElConfigProvider } from 'element-plus'
1011
import DefaultLayout from './layouts/default-layout.vue'
1112
import AuthLayout from 'layouts/auth-layout.vue'
13+
import useStore from 'store'
1214
1315
export default defineComponent({
1416
components: {
@@ -20,16 +22,17 @@ export default defineComponent({
2022
2123
setup() {
2224
const $message = inject<IMessage>('$message')
25+
const store = useStore()
2326
const initialize = () => {
2427
return Promise.resolve()
2528
}
2629
30+
const isAuthenticated = computed<boolean>(() => store.auth.getAuthenticationState)
2731
initialize().catch((error: Error) => {
28-
console.log('object')
2932
$message?.error(`Couldn't initialize the system with error: ${error.message}`)
3033
})
3134
32-
return { zIndex: 3000, size: 'small' }
35+
return { zIndex: 3000, size: 'small', isAuthenticated }
3336
},
3437
})
3538
</script>

‎src/assets/css/notifications.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ body {
184184
@apply w-full p-12;
185185
}
186186
.open-form .el-dialog__body {
187-
@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;
187+
@apply flex flex-col items-center justify-center bg-mess-box-bg pt-0 rounded-md text-mess-box-text p-0 text-center;
188188
}
189189
.open-form .el-dialog__header {
190190
@apply hidden;

‎src/components/Navigation/index.vue

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,11 @@
280280
</div>
281281
</el-dropdown-item>
282282

283-
<el-dropdown-item divided class="mx-0 mt-2 hover:bg-slate-100 text-zinc-800">
283+
<el-dropdown-item
284+
divided
285+
class="mx-0 mt-2 hover:bg-slate-100 text-zinc-800"
286+
@click="handleLogoutClick(false)"
287+
>
284288
<div class="flex flex-row items-center w-full h-6">
285289
<div class="flex w-auto">
286290
<el-icon :size="20" class="cursor-pointer w-5 h-6">
@@ -319,7 +323,7 @@ import {
319323
Close,
320324
} from '@element-plus/icons-vue'
321325
import { MenuIcon, MenuAlt1Icon, SearchIcon, SearchCircleIcon } from '@heroicons/vue/outline'
322-
import { useDashboardStore } from '../../modules/dashboard/store'
326+
import useStore from 'store'
323327
324328
export default defineComponent({
325329
name: 'Sidebar',
@@ -339,7 +343,7 @@ export default defineComponent({
339343
SearchCircleIcon,
340344
},
341345
setup() {
342-
const store = useDashboardStore()
346+
const store = useStore()
343347
const isPagesMenuOpen = ref(false)
344348
const isSideMenuOpen = ref(false)
345349
const isSearchOpen = ref(true)
@@ -352,11 +356,15 @@ export default defineComponent({
352356
const closeSideMenu = () => {
353357
isSideMenuOpen.value = false
354358
}
355-
const isSBPin = computed(() => store.isSBPin)
356-
const isSBOpen = computed(() => store.isSBOpen)
359+
const isSBPin = computed(() => store.dashboard.isSBPin)
360+
const isSBOpen = computed(() => store.dashboard.isSBOpen)
357361
358362
const handleMenuClick = () => {
359-
store.toggleMenu()
363+
store.dashboard.toggleMenu()
364+
}
365+
366+
const handleLogoutClick = async (b: boolean) => {
367+
store.auth.setAuthentication(b)
360368
}
361369
362370
const setSearchOpen = (v: boolean) => (isSearchOpen.value = v)
@@ -370,6 +378,7 @@ export default defineComponent({
370378
clickIconBell,
371379
clickIconMenu,
372380
textInput,
381+
handleLogoutClick,
373382
handleMenuClick,
374383
setSearchOpen,
375384
togglePagesMenu,

‎src/components/Sidebar/index.vue

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ import { defineComponent, ref, computed, onMounted, watch, onUnmounted, onBefore
8282
import { useRoute } from 'vue-router'
8383
import navigation from './SidebarNav'
8484
import { BellIcon, MenuIcon, MenuAlt1Icon } from '@heroicons/vue/outline'
85-
import { useDashboardStore } from '../../modules/dashboard/store'
85+
import useStore from 'store'
8686
import { onClickOutside } from '@vueuse/core'
8787
import env from 'core/env'
8888
import { checkIsMobile } from 'utils/index'
@@ -104,7 +104,7 @@ export default defineComponent({
104104
},
105105
setup() {
106106
const route = useRoute()
107-
const store = useDashboardStore()
107+
const store = useStore()
108108
const menuItems = ref<MenuItem[]>(navigation)
109109
const isPagesMenuOpen = ref(false)
110110
const isSideMenuOpen = ref(false)
@@ -113,21 +113,19 @@ export default defineComponent({
113113
const isMobile = checkIsMobile()
114114
115115
onClickOutside(target, (_) => {
116-
console.log(target.value)
117-
console.log('outside click')
118-
if (window.innerWidth < 1024) store.setIsSBOpen(false)
116+
if (window.innerWidth < 1024) store.dashboard.setIsSBOpen(false)
119117
})
120118
onBeforeMount(() => {
121119
if (isMobile || window.innerWidth < 1024) {
122-
store.setIsSBOpen(false)
123-
store.setIsSBPin(false)
120+
store.dashboard.setIsSBOpen(false)
121+
store.dashboard.setIsSBPin(false)
124122
}
125123
})
126124
onMounted(() => {
127125
window.addEventListener('resize', () => {
128126
if (window.innerWidth < 1024) {
129-
store.setIsSBOpen(false)
130-
store.setIsSBPin(false)
127+
store.dashboard.setIsSBOpen(false)
128+
store.dashboard.setIsSBPin(false)
131129
}
132130
})
133131
})
@@ -136,19 +134,19 @@ export default defineComponent({
136134
window.removeEventListener('resize', () => {})
137135
})
138136
139-
const isSBPin = computed<boolean>(() => store.isSBPin)
140-
const isSBOpen = computed<boolean>(() => store.isSBOpen)
137+
const isSBPin = computed<boolean>(() => store.dashboard.isSBPin)
138+
const isSBOpen = computed<boolean>(() => store.dashboard.isSBOpen)
141139
142140
const hoverLeftBar = (v: boolean) => {
143-
if (!isMobile && window.innerWidth > 1023) store.setIsSBOpen(v)
141+
if (!isMobile && window.innerWidth > 1023) store.dashboard.setIsSBOpen(v)
144142
}
145143
146144
const handleMenuClick = () => {
147-
store.toggleMenu()
145+
store.dashboard.toggleMenu()
148146
}
149147
150148
watch(route, () => {
151-
store.setIsSBOpen(false)
149+
store.dashboard.setIsSBOpen(false)
152150
})
153151
154152
return {

‎src/layouts/auth-layout.vue

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
11
<template>
2-
<div class="min-h-screen bg-white flex">
3-
<div class="hidden lg:block relative w-0 flex-1">
2+
<div class="min-h-screen bg-white">
3+
<div class="hidden lg:block relative w-0">
44
<img
55
class="absolute inset-0 h-full w-full object-cover"
66
src="https://images.unsplash.com/photo-1505904267569-f02eaeb45a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80"
77
alt=""
88
/>
99
</div>
1010
<div
11-
class="
12-
flex-1 flex flex-col
13-
justify-center
14-
py-12
15-
px-4
16-
sm:px-6
17-
lg:flex-none lg:px-20
18-
xl:px-24
19-
"
11+
class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
2012
>
2113
<router-view v-slot="{ Component }">
2214
<component :is="Component" />

‎src/layouts/default-layout.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575

7676
<script lang="ts">
7777
import { defineComponent, computed } from 'vue'
78-
import { useDashboardStore } from '../modules/dashboard/store'
78+
import useStore from 'store'
7979
import { HomeFilled } from '@element-plus/icons-vue'
8080
import { useRoute } from 'vue-router'
8181
@@ -87,9 +87,9 @@ export default defineComponent({
8787
8888
setup() {
8989
const route: any = useRoute()
90-
const store = useDashboardStore()
91-
const isSBPin = computed<boolean>(() => store.isSBPin)
92-
const setIsSBPin = (b: boolean) => store.setIsSBPin(b)
90+
const store = useStore()
91+
const isSBPin = computed<boolean>(() => store.dashboard.isSBPin)
92+
const setIsSBPin = (b: boolean) => store.dashboard.setIsSBPin(b)
9393
return { isSBPin, setIsSBPin, route }
9494
},
9595
})

‎src/modules/auth/store/actions.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { defineStore } from 'pinia'
2+
import { useState } from './state'
3+
4+
export const useActions = defineStore('auth.actions', () => {
5+
const state = useState()
6+
7+
const setAuthentication = (value: boolean) => {
8+
state.isAuthenticated = value
9+
}
10+
return {
11+
setAuthentication,
12+
}
13+
})

‎src/modules/auth/store/getters.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineStore } from 'pinia'
2+
3+
import { computed } from 'vue'
4+
import { useState } from './state'
5+
6+
export const useGetters = defineStore('auth.getters', () => {
7+
const state = useState()
8+
const getAuthenticationState = computed((): boolean => state.isAuthenticated)
9+
10+
return { getAuthenticationState }
11+
})

‎src/modules/auth/store/index.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { extractStore } from 'utils/extractStore'
2+
import { defineStore } from 'pinia'
3+
import { useActions } from './actions'
4+
import { useGetters } from './getters'
5+
import { useState } from './state'
6+
7+
export const useAuthStore = defineStore('auth', () => {
8+
return {
9+
...extractStore(useState()),
10+
...extractStore(useGetters()),
11+
...extractStore(useActions()),
12+
}
13+
})

‎src/modules/auth/store/state.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineStore } from 'pinia'
2+
import { AuthState } from './types'
3+
4+
export const useState = defineStore({
5+
id: 'auth.state',
6+
state: (): AuthState => {
7+
return {
8+
isAuthenticated: false,
9+
}
10+
},
11+
})

0 commit comments

Comments
 (0)