79 lines
2.3 KiB
Vue
79 lines
2.3 KiB
Vue
<template>
|
|
<form @submit.prevent="handleSubmit">
|
|
<div class="col-xl-12">
|
|
<UserFormInput
|
|
title="아이디"
|
|
name="id"
|
|
:is-alert="idAlert"
|
|
:useInputGroup="true"
|
|
@update:data="handleIdChange"
|
|
:value="id"
|
|
/>
|
|
|
|
<UserFormInput
|
|
title="비밀번호"
|
|
name="password"
|
|
type="password"
|
|
:is-alert="passwordAlert"
|
|
@update:data="handlePasswordChange"
|
|
:value="password"
|
|
/>
|
|
|
|
<div class="d-grid gap-2 mt-7 mb-5">
|
|
<button type="submit" class="btn btn-primary">로그인</button>
|
|
</div>
|
|
|
|
<div class="mb-3 d-flex justify-content-around">
|
|
<div>
|
|
<input type="checkbox" class="form-check-input" id="rememberCheck" />
|
|
<label class="form-check-label fw-bold" for="rememberCheck"> 자동로그인</label>
|
|
</div>
|
|
<RouterLink class="text-dark fw-bold" to="/register">등록신청</RouterLink>
|
|
<RouterLink class="text-dark fw-bold" to="/pw">비밀번호 찾기</RouterLink>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import $api from '@api';
|
|
import router from '@/router';
|
|
import { ref } from 'vue';
|
|
import UserFormInput from '@c/input/UserFormInput.vue';
|
|
|
|
const id = ref('');
|
|
const password = ref('');
|
|
const idAlert = ref(false);
|
|
const passwordAlert = ref(false);
|
|
|
|
const handleIdChange = value => {
|
|
id.value = value;
|
|
idAlert.value = false;
|
|
};
|
|
|
|
const handlePasswordChange = value => {
|
|
password.value = value;
|
|
passwordAlert.value = false;
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
|
|
try {
|
|
const response = await $api.post('user/login', {
|
|
loginId: id.value,
|
|
password: password.value,
|
|
remember: false,
|
|
});
|
|
|
|
if (response.status === 200) {
|
|
console.log('로그인 성공', response.data);
|
|
router.push('/');
|
|
}
|
|
} catch (error) {
|
|
console.error('로그인 실패', error);
|
|
}
|
|
};
|
|
|
|
|
|
</script>
|