105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { useAuthStore } from '~/stores/login';
|
|
|
|
definePageMeta({
|
|
layout: 'empty'
|
|
});
|
|
|
|
const router = useRouter();
|
|
const store = useAuthStore();
|
|
const { loginRequest } = storeToRefs(store);
|
|
|
|
const login = async () => {
|
|
try {
|
|
const { data } = await store.LoginAPI();
|
|
store.loginResponse = data;
|
|
console.log(JSON.stringify(store.loginResponse));
|
|
|
|
await router.push('/');
|
|
} catch (e) {
|
|
message.error('아이디 또는 비밀번호를 확인해주세요.');
|
|
}
|
|
};
|
|
|
|
const validateLogin = computed(() => {
|
|
return loginRequest.value.memberId && loginRequest.value.password;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<a-row justify="center" class="w-full h-full items-center">
|
|
<a-col :span="7.5">
|
|
<a-card bordered style="background-color: #f5f5f5; padding: 24px">
|
|
<h1
|
|
style="
|
|
text-align: center;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 16px;
|
|
"
|
|
>
|
|
로그인
|
|
</h1>
|
|
<div style="height: 18px"></div>
|
|
|
|
<a-form-item>
|
|
<a-checkbox v-model:checked="loginRequest.remember">
|
|
키보드보안 프로그램적용
|
|
</a-checkbox>
|
|
<div style="height: 10px"></div>
|
|
<div>
|
|
<p style="font-size: 12px; color: #888">
|
|
※ 안전한 서비스 이용을 위해 키보드보안 프로그램 적용을 권장합니다.
|
|
</p>
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<a-form :colon="false" label-align="left">
|
|
<a-form-item label="아이디" :label-col="{ span: 5 }">
|
|
<a-input
|
|
v-model:value="loginRequest.memberId"
|
|
placeholder="아이디를 입력하세요"
|
|
maxLength="20"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="비밀번호" :label-col="{ span: 5 }">
|
|
<a-input-password
|
|
v-model:value="loginRequest.password"
|
|
placeholder="비밀번호를 입력하세요"
|
|
maxLength="20"
|
|
@keyup.enter="login()"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item>
|
|
<a-button
|
|
type="primary"
|
|
block
|
|
@click="login()"
|
|
:disabled="!validateLogin"
|
|
style="font-weight: bold"
|
|
>
|
|
로그인
|
|
</a-button>
|
|
</a-form-item>
|
|
|
|
<div style="display: flex; justify-content: center; margin-top: 16px">
|
|
<router-link to="#" style="color: #1890ff"
|
|
>아이디 찾기</router-link
|
|
>
|
|
<span style="margin: 0 8px; color: #888">|</span>
|
|
<router-link to="#" style="color: #1890ff"
|
|
>비밀번호 찾기</router-link
|
|
>
|
|
<span style="margin: 0 8px; color: #888">|</span>
|
|
<router-link to="#" style="color: #1890ff"
|
|
>회원가입</router-link
|
|
>
|
|
</div>
|
|
</a-form>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|