Skip to content

Commit f6d959d

Browse files
LeThanhPhongLTVLeThanhPhongLTV
authored
feat(login): Design layout | JIRA: PT-144 (#78)
* fix(login): fix link to login page | JIRA: PT-143
1 parent f0d4400 commit f6d959d

File tree

13 files changed

+214
-69
lines changed

13 files changed

+214
-69
lines changed

‎src/components/Footer/authFoot.vue

Whitespace-only changes.

‎src/components/Navigation/authNav.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="absolute w-full z-100 p-4 bg-transparent border-0">
3+
<div
4+
class="w-full md:w-[720px] lg:w-[1138px] h-[56px] flex flex-nowrap basis-auto justify-between items-center mx-auto px-3.375"
5+
>
6+
<div class="mr-9 pt-1.5">
7+
<a class="inline-block py-2.5 whitespace-nowrap w-[101.45px]" href="#">
8+
<img
9+
class="h-7.5"
10+
alt="..."
11+
src="https://argon-dashboard-pro-laravel.creative-tim.com/argon/img/brand/white.png"
12+
/>
13+
</a>
14+
</div>
15+
<div class="flex basis-auto items-center w-full">
16+
<div class="flex flex-row mr-auto items-center gap-11">
17+
<div>
18+
<el-link :underline="false" class="text-white font-normal"> Dashboard </el-link>
19+
</div>
20+
<div>
21+
<el-link :underline="false" class="text-white font-normal"> Login </el-link>
22+
</div>
23+
<div>
24+
<el-link :underline="false" class="text-white font-normal"> Register </el-link>
25+
</div>
26+
</div>
27+
<div class="flex flex-row items-center ml-auto">
28+
<div class="mr-2"><el-link :underline="false"> Dashboard </el-link></div>
29+
<div class="mr-2"><el-link :underline="false"> Login </el-link></div>
30+
<div class="mr-2"><el-link :underline="false"> Register </el-link></div>
31+
<div class="mr-2">
32+
<el-button class="el-button--secondary"> Purchase Now </el-button>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</template>
39+
40+
<script lang="ts">
41+
import { defineComponent } from 'vue'
42+
43+
export default defineComponent({
44+
name: 'AuthNav',
45+
setup() {
46+
return {}
47+
},
48+
})
49+
</script>

‎src/components/Navigation/index.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@
283283
<el-dropdown-item
284284
divided
285285
class="mx-0 mt-2 hover:bg-slate-100 text-zinc-800"
286-
@click="handleLogoutClick(false)"
286+
@click="handleLogoutClick"
287287
>
288288
<div class="flex flex-row items-center w-full h-6">
289289
<div class="flex w-auto">
@@ -363,8 +363,8 @@ export default defineComponent({
363363
store.dashboard.toggleMenu()
364364
}
365365
366-
const handleLogoutClick = async (b: boolean) => {
367-
store.auth.setAuthentication(b)
366+
const handleLogoutClick = () => {
367+
store.auth.actLogout()
368368
}
369369
370370
const setSearchOpen = (v: boolean) => (isSearchOpen.value = v)

‎src/components/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,17 @@ import { useElementPlus } from './element-plus'
44
import Main from './Main/index.vue'
55
import Sidebar from './Sidebar/index.vue'
66
import Navigation from './Navigation/index.vue'
7+
import AuthNavigation from './Navigation/authNav.vue'
8+
import AuthFooter from './Footer/authFoot.vue'
79

810
export default {
911
install: (app: App) => {
1012
// Register it globally
1113
app.component('Main', Main)
1214
app.component('Sidebar', Sidebar)
1315
app.component('Navigation', Navigation)
16+
app.component('AuthNavigation', AuthNavigation)
17+
app.component('AuthFooter', AuthFooter)
1418

1519
// Element Plus
1620
useElementPlus(app)

‎src/core/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
import env from 'core/env'
22
export const PAGE_SIZE = env('VITE_PAGE_SIZE', 10)
3+
export const AUTH_TOKEN = 'app/token'

‎src/layouts/auth-layout.vue

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,68 @@
11
<template>
2-
<div class="min-h-screen bg-white">
3-
<div class="hidden lg:block relative w-0">
4-
<img
5-
class="absolute inset-0 h-full w-full object-cover"
6-
src="https://images.unsplash.com/photo-1505904267569-f02eaeb45a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80"
7-
alt=""
8-
/>
9-
</div>
2+
<div class="relative w-full bg-default overflow-y-auto h-screen">
3+
<AuthNavigation />
104
<div
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"
5+
class="relative bg-gradient-to-r from-left-bar-indigo to-[#825ee4] py-24 lg:py-32 lg:pt-40"
126
>
13-
<router-view v-slot="{ Component }">
14-
<component :is="Component" />
15-
</router-view>
7+
<div class="lg:max-w-[1140px] md:max-w-[960px] sm:max-w-[720px] mx-auto px-3.375 w-full">
8+
<div class="text-center mb-12">
9+
<div class="flex flex-wrap -mx-3.75 justify-center">
10+
<div class="md:flex-9 md:max-w-9/12 lg:flex-8 lg:max-w-4/6">
11+
<h1 class="text-white font-semibold">
12+
Welcome to Argon Dashboard Pro Laravel Live Preview.
13+
</h1>
14+
<p class="text-light mt-4 mb-0">
15+
Log in and see how you can save more than 150 hours of work with CRUDs for managing:
16+
#users, #roles, #items, #categories, #tags and more.
17+
</p>
18+
</div>
19+
<div class="md:flex-6 md:max-w-1/2 lg:flex-5 lg:max-w-5/12">
20+
<h3 class="text-white mt-12 mb-0">
21+
<strong>You can log in with 3 user types:</strong>
22+
</h3>
23+
<ul class="text-light mt-4 mb-0">
24+
<li v-for="(account, index) in accounts" :key="index" class="flex">
25+
{{ index }}.
26+
<div class="w-full">
27+
Username <strong>{{ account }}</strong> Password <strong>secret</strong>
28+
</div>
29+
</li>
30+
</ul>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
36+
<div
37+
class="absolute pointer-events-none overflow-hidden w-full top-auto bottom-0 inset-x-0 z-100"
38+
>
39+
<svg
40+
x="0"
41+
y="0"
42+
viewBox="0 0 2560 100"
43+
preserveAspectRatio="none"
44+
version="1.1"
45+
xmlns="http://www.w3.org/2000/svg"
46+
>
47+
<polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
48+
</svg>
49+
</div>
50+
<div class="absolute z-100 inset-x-0 md:inset-x-1/3 mt-2 pb-20">
51+
<router-view v-slot="{ Component }">
52+
<component :is="Component" />
53+
</router-view>
54+
</div>
1655
</div>
1756
</div>
1857
</template>
1958

2059
<script lang="ts">
2160
import { defineComponent } from 'vue'
2261
23-
export default defineComponent({})
62+
export default defineComponent({
63+
setup() {
64+
const accounts: string[] = ['[email protected]', '[email protected]', '[email protected]']
65+
return { accounts }
66+
},
67+
})
2468
</script>

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import { defineStore } from 'pinia'
2-
import { useState } from './state'
2+
import { ILogin } from './types'
3+
import { AUTH_TOKEN } from 'core/constants'
4+
35

46
export const useActions = defineStore('auth.actions', () => {
5-
const state = useState()
6-
7-
const setAuthentication = (value: boolean) => {
8-
state.isAuthenticated = value
7+
const actLogin = async (_: ILogin) => {
8+
localStorage.setItem(AUTH_TOKEN, 'user')
9+
window.location.href = '/'
10+
}
11+
const actLogout = () => {
12+
localStorage.removeItem(AUTH_TOKEN)
13+
window.location.href = '/login'
914
}
15+
1016
return {
11-
setAuthentication,
17+
actLogin,
18+
actLogout,
1219
}
1320
})

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ import { useState } from './state'
66
export const useGetters = defineStore('auth.getters', () => {
77
const state = useState()
88
const getAuthenticationState = computed((): boolean => state.isAuthenticated)
9-
10-
return { getAuthenticationState }
9+
const getuser = computed((): any => state.user)
10+
return { getAuthenticationState, getuser }
1111
})

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { defineStore } from 'pinia'
22
import { AuthState } from './types'
3+
import { AUTH_TOKEN } from 'core/constants'
4+
35

46
export const useState = defineStore({
57
id: 'auth.state',
68
state: (): AuthState => {
79
return {
8-
isAuthenticated: false,
10+
isAuthenticated: !!localStorage.getItem(AUTH_TOKEN),
911
}
1012
},
1113
})

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
export interface AuthState {
22
isAuthenticated: boolean
3+
user?: any
4+
}
5+
6+
export type ILogin = {
7+
username: string
8+
password: string
39
}

0 commit comments

Comments
 (0)