vueJava/nuxt/pages/login/index.vue

126 lines
3.3 KiB
Vue

<script setup lang="ts">
const useAuthStore = ref('');
const remember = ref(false);
const memberId = ref('');
const password = ref('');
definePageMeta({
layout: 'empty'
});
// const router = useRouter();
// const store = useAuthStore();
// const { authentication } = storeToRefs(store);
//
// onBeforeMount(() => {
// store.loadRemember();
// });
//
// onBeforeUnmount(() => {
// authentication.value = {
// ...authentication.value,
// memberId: ''
// };
// });
//
// watch(authentication.value, (newValue) => {
// if (newValue.remember) {
// store.setRemember();
// } else {
// store.initRemember();
// }
// });
const login = async () => {
// try {
// const { data } = await store.authenticate();
// store.authorize(data);
//
// await router.push('/');
// } catch (e) {
// message.error('아이디 또는 비밀번호를 확인해주세요.');
// }
};
const validateLogin = computed(() => {
return false;
});
</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="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="memberId"
placeholder="아이디를 입력하세요"
maxLength="20"
/>
</a-form-item>
<a-form-item label="비밀번호" :label-col="{ span: 5 }">
<a-input-password
v-model:value="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="/login/id" style="color: #1890ff"
>아이디 찾기</router-link
>
<span style="margin: 0 8px; color: #888">|</span>
<router-link to="/login/pw" style="color: #1890ff"
>비밀번호 찾기</router-link
>
<span style="margin: 0 8px; color: #888">|</span>
<router-link to="/login/join" style="color: #1890ff"
>회원가입</router-link
>
</div>
</a-form>
</a-card>
</a-col>
</a-row>
</template>