Feat: add login page
This commit is contained in:
parent
3e10fc726f
commit
f7348fa626
@ -30,7 +30,6 @@ const logout = () => {
|
||||
</template>
|
||||
<template v-else>
|
||||
<router-link :to="{ name: 'user-login' }"> 로그인 </router-link>
|
||||
<router-link :to="{ name: 'user-mypage' }"> 회원가입 </router-link>
|
||||
</template>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -1,78 +1,104 @@
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import { storeToRefs } from "pinia"
|
||||
import { useRouter } from "vue-router"
|
||||
import { useMemberStore } from "@/stores/memberStore"
|
||||
import { computed, ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useMemberStore } from '@/stores/memberStore';
|
||||
import FilledButton from '../common/FilledButton.vue';
|
||||
import TextButton from '../common/TextButton.vue';
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
const memberStore = useMemberStore()
|
||||
const memberStore = useMemberStore();
|
||||
|
||||
const { isLogin, isLoginError } = storeToRefs(memberStore)
|
||||
const { userLogin } = memberStore
|
||||
const { userLogin } = memberStore;
|
||||
const { isLogin } = storeToRefs(memberStore);
|
||||
const id = ref('');
|
||||
const password = ref('');
|
||||
const loginUser = computed(() => {
|
||||
return {
|
||||
id: id.value,
|
||||
password: password.value,
|
||||
};
|
||||
});
|
||||
|
||||
const loginUser = ref({
|
||||
id: "",
|
||||
password: "",
|
||||
})
|
||||
|
||||
const login = async () => {
|
||||
await userLogin(loginUser.value)
|
||||
let token = localStorage.getItem("accessToken")
|
||||
console.log(token)
|
||||
console.log("isLogin: " + isLogin.value)
|
||||
async function handleLogin() {
|
||||
console.log('login');
|
||||
await userLogin(loginUser.value);
|
||||
if (isLogin.value) {
|
||||
router.replace("/")
|
||||
router.replace('/');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<h2 class="my-3 py-3 shadow-sm bg-light text-center">
|
||||
<mark class="orange">로그인</mark>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-lg-10">
|
||||
<form>
|
||||
<div class="form-check mb-3 float-end">
|
||||
<input class="form-check-input" type="checkbox" />
|
||||
<label class="form-check-label" for="saveid"> 아이디저장 </label>
|
||||
</div>
|
||||
<div class="mb-3 text-start">
|
||||
<label for="userid" class="form-label">아이디 : </label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="loginUser.id"
|
||||
placeholder="아이디..."
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3 text-start">
|
||||
<label for="userpwd" class="form-label">비밀번호 : </label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="loginUser.password"
|
||||
@keyup.enter="login"
|
||||
placeholder="비밀번호..."
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3 text-start" v-if="isLoginError === true">
|
||||
<div class="alert alert-danger" role="alert">아이디 또는 비밀번호 확인해 주세요</div>
|
||||
</div>
|
||||
<div class="col-auto text-center">
|
||||
<button type="button" class="btn btn-outline-primary mb-3" @click="login">
|
||||
로그인
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success ms-1 mb-3">회원가입</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form @submit.prevent="handleLogin" action="POST" class="form">
|
||||
<h2>로그인</h2>
|
||||
<div class="form-group">
|
||||
<label for="userId">아이디</label>
|
||||
<input v-model="id" type="text" id="userId" name="id" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">비밀번호</label>
|
||||
<input v-model="password" type="password" id="password" name="password" required />
|
||||
<RouterLink class="forgot" :to="{ name: 'home' }">
|
||||
<TextButton> 비밀번호를 잊으셨나요? </TextButton>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<FilledButton primary class="button" type="submit">로그인</FilledButton>
|
||||
<p>
|
||||
아직 회원이 아니신가요?
|
||||
<RouterLink :to="{ name: 'home' }"><TextButton primary>회원가입</TextButton></RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
input {
|
||||
border-width: 1px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.forgot {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,21 +10,21 @@ const onlyAuthUser = async (to, from, next) => {
|
||||
const { userInfo, isLogin } = storeToRefs(memberStore);
|
||||
const { isValidToken } = memberStore;
|
||||
|
||||
let token = localStorage.getItem("accessToken");
|
||||
console.log(userInfo)
|
||||
console.log(isLogin)
|
||||
let token = localStorage.getItem('accessToken');
|
||||
console.log(userInfo);
|
||||
console.log(isLogin);
|
||||
// if (userInfo.value != null && token) {
|
||||
console.log(isLogin.value)
|
||||
console.log(token)
|
||||
console.log(isLogin.value);
|
||||
console.log(token);
|
||||
if (isLogin.value != null && token) {
|
||||
console.log("이프문들어옴")
|
||||
console.log('이프문들어옴');
|
||||
await isValidToken(token);
|
||||
}
|
||||
if (isLogin.value === null) {
|
||||
console.log("이프문2들어옴")
|
||||
next({ name: "user-login" });
|
||||
console.log('이프문2들어옴');
|
||||
next({ name: 'user-login' });
|
||||
} else {
|
||||
console.log("else문 들어옴")
|
||||
console.log('else문 들어옴');
|
||||
next();
|
||||
}
|
||||
};
|
||||
@ -40,7 +40,7 @@ const router = createRouter({
|
||||
{
|
||||
path: '/user',
|
||||
name: 'user',
|
||||
component: () => import('@/views/TheUserView.vue'),
|
||||
component: () => import('@/views/UserView.vue'),
|
||||
children: [
|
||||
{
|
||||
path: 'login',
|
||||
@ -97,10 +97,6 @@ const router = createRouter({
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
component: () => import('@/views/TestView.vue'),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="container text-center mt-3">
|
||||
<div class="alert alert-primary" role="alert">Member Service</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
mark.orange {
|
||||
background: linear-gradient(to top, rgb(243, 164, 18) 20%, transparent 30%);
|
||||
}
|
||||
</style>
|
||||
20
src/views/UserView.vue
Normal file
20
src/views/UserView.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
import AppHeader from '@/components/AppHeader.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppHeader />
|
||||
<main>
|
||||
<RouterView />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
main {
|
||||
max-width: 480px;
|
||||
padding: 20px;
|
||||
margin: 80px auto 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - 80px);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user