feature login
This commit is contained in:
chiayin
22
src/views/AuthContainer.vue
Normal file
22
src/views/AuthContainer.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<header>
|
||||
<Header />
|
||||
<Navbar />
|
||||
</header>
|
||||
<main>
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "@/components/Header.vue";
|
||||
import Navbar from "@/components/Navbar.vue";
|
||||
|
||||
export default {
|
||||
name: 'AuthContainer',
|
||||
components: {
|
||||
Header,
|
||||
Navbar,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
14
src/views/Files/index.vue
Normal file
14
src/views/Files/index.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<h1>This is Files page.</h1>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
// export default {
|
||||
// created() {
|
||||
// // get cookie token
|
||||
// const cookieToken = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*=\s*([^;]*).*$)|^.*$/, "$1");
|
||||
// console.log(cookieToken);
|
||||
// this.$http.defaults.headers.common['Authorization'] = cookieToken;
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
@@ -1,3 +1,114 @@
|
||||
<template>
|
||||
<h1>這是 Login 頁</h1>
|
||||
<div class="container h-screen-main">
|
||||
<div class="flex justify-center items-center min-h-full">
|
||||
<div class="w-full max-w-md p-8">
|
||||
<h2 class="text-center text-2xl mb-4 font-semibold">LOGIN</h2>
|
||||
<form action="#" method="post" class="w-full grid gap-2" @submit.prevent="signIn">
|
||||
<label for="account" class="relative">
|
||||
<p class="text-sm font-normal mb-2">Account</p>
|
||||
<span class="absolute bottom-2 left-0 flex items-center pl-2 pr-2 border-r border-neutral">
|
||||
<IconMember class="h-5 w-5 fill-default"/>
|
||||
</span>
|
||||
<input type="text" id="account" class="w-full border border-neutral rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username" @change="changeHandler($event)"/>
|
||||
</label>
|
||||
<label for="passwordt" class="relative block">
|
||||
<p class="text-sm font-normal mb-2">Password</p>
|
||||
<span class="absolute bottom-2 left-0 flex items-center pl-2 pr-2 border-r border-neutral">
|
||||
<IconLockKey class="h-5 w-5"/>
|
||||
</span>
|
||||
<input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon" class="w-full border border-neutral rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
|
||||
<span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password" @click="showPassword = !showPassword">
|
||||
<IconEyeClose class="h-5 w-5" v-if="showPassword"/>
|
||||
<IconEyeOpen class="h-5 w-5" v-else/>
|
||||
</span>
|
||||
</label>
|
||||
<p class="mb-6 text-danger">
|
||||
<span v-show="isInvalid">
|
||||
<IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>Incorrect account or password.
|
||||
</span>
|
||||
</p>
|
||||
<button type="submit" class="w-full btn btn-lg" :class="this.isDisabled ? 'btn-disable' : 'btn-c-primary'" :disabled="isDisabledButton">
|
||||
Log in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import loginStore from '@/stores/login.js';
|
||||
import IconMember from '@/components/icons/IconMember.vue';
|
||||
import IconLockKey from '@/components/icons/IconLockKey.vue';
|
||||
import IconEyeOpen from '@/components/icons/IconEyeOpen.vue';
|
||||
import IconEyeClose from '@/components/icons/IconEyeClose.vue';
|
||||
import IconWarnTriangle from '@/components/icons/IconWarnTriangle.vue';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
isDisabled: true,
|
||||
showPassword: false,
|
||||
name: 'hellow world'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
// 調用函數，獲取 Store
|
||||
const store = loginStore();
|
||||
// 調用 store 裡的 state
|
||||
const { auth, isInvalid } = storeToRefs(store);
|
||||
// 調用 store 裡的 action
|
||||
const { signIn } = store;
|
||||
|
||||
return {
|
||||
auth,
|
||||
isInvalid,
|
||||
signIn,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
IconMember,
|
||||
IconLockKey,
|
||||
IconEyeOpen,
|
||||
IconEyeClose,
|
||||
IconWarnTriangle
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* if input no value , disabled.
|
||||
*/
|
||||
isDisabledButton() {
|
||||
let inputAreSpaces = this.auth.username === '' || this.auth.password === '';
|
||||
return this.isDisabled = inputAreSpaces ? true : false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* when input onChange value , isInvalid === false.
|
||||
*/
|
||||
changeHandler(event) {
|
||||
let inputValue = event.target.value;
|
||||
if(inputValue !== '')this.isInvalid = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Hide the eyes from a password input in MS Edge */
|
||||
input::-ms-reveal,
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
/* Hide the keys from the inputs in safair */
|
||||
input::-webkit-contacts-auto-fill-button,
|
||||
input::-webkit-credentials-auto-fill-button {
|
||||
visibility: hidden;
|
||||
display: none !important;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,42 @@
|
||||
<template>
|
||||
<header>
|
||||
<Header />
|
||||
<Header/>
|
||||
<Navbar/>
|
||||
</header>
|
||||
<h1>這是 MainContainer 頁</h1>
|
||||
<main>
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "./header/index.vue"
|
||||
import loginStore from '@/stores/login.js';
|
||||
import Header from "@/components/Header.vue";
|
||||
import Navbar from "@/components/Navbar.vue";
|
||||
|
||||
export default {
|
||||
name: 'MainContainer',
|
||||
setup() {
|
||||
const store = loginStore();
|
||||
const { checkLogin } = store;
|
||||
|
||||
return {
|
||||
checkLogin,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Header,
|
||||
Navbar,
|
||||
},
|
||||
created() {
|
||||
/**
|
||||
* Save token in Headers.
|
||||
*/
|
||||
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
|
||||
this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
/**
|
||||
* check login for 'my-account' api
|
||||
*/
|
||||
this.checkLogin();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
35
src/views/MemberArea/index.vue
Normal file
35
src/views/MemberArea/index.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1 class="mb-4">Member Area</h1>
|
||||
<ul class="list-disc">
|
||||
<li>Username: {{ userData.username }}</li>
|
||||
<li>Name: {{ userData.name }}</li>
|
||||
<li>Is sso: {{ userData.is_sso }}</li>
|
||||
<li>Created at: {{ userData.created_at }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import loginStore from '@/stores/login.js';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = loginStore();
|
||||
const { userData } = storeToRefs(store);
|
||||
const { getUserData } = store;
|
||||
|
||||
return {
|
||||
userData,
|
||||
getUserData,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
this.getUserData();
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
25
src/views/NotFound404.vue
Normal file
25
src/views/NotFound404.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<header>
|
||||
<Header/>
|
||||
<Navbar/>
|
||||
</header>
|
||||
<main>
|
||||
<div class="container text-center pt-7 pb-12">
|
||||
<h2 class="mb-7">404</h2>
|
||||
<p>您想找的頁面不存在</p>
|
||||
<p class="mb-7">請重新確認搜尋的項目或是回到 Files 頁</p>
|
||||
<router-link :to="'/files'" class="btn btn-c-primary btn-lg">回到 Files 頁</router-link>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "@/components/Header.vue";
|
||||
import Navbar from "@/components/Navbar.vue";
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Navbar,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<h1>這是 Header 頁</h1>
|
||||
<div class="flex flex-col relative h-full">
|
||||
<div class="w-full flex">
|
||||
<img src="../../assets/DSP_LOGO.svg" class="h-10"/>
|
||||
</div>
|
||||
<div class="flex w-full bg-[#61696F] text-white justify-between shadow-md shadow-black:opacity-25 z-20 h-[2.5rem]">
|
||||
<div class="pl-2 flex w-1/3">
|
||||
<span class="m-2 leading-6 pr-4 cursor-pointer border-r border-white "
|
||||
>
|
||||
Save
|
||||
</span>
|
||||
</div>
|
||||
<div class="pl-2 flex items-center w-1/3 justify-center">
|
||||
<a-breadcrumb class="flex text-[#c0c0c0]">
|
||||
<a-breadcrumb-item>name</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>name</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
<div class="w-1/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user