80 lines
2.4 KiB
Vue
80 lines
2.4 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" v-model="remember" />
|
|
<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';
|
|
import { useUserStore } from '@s/useUserStore';
|
|
import { useToastStore } from '@s/toastStore';
|
|
|
|
const id = ref('');
|
|
const password = ref('');
|
|
const idAlert = ref(false);
|
|
const passwordAlert = ref(false);
|
|
const remember = ref(false);
|
|
|
|
const userStore = useUserStore();
|
|
const toastStore = useToastStore();
|
|
|
|
const handleIdChange = value => {
|
|
id.value = value;
|
|
idAlert.value = false;
|
|
};
|
|
|
|
const handlePasswordChange = value => {
|
|
password.value = value;
|
|
passwordAlert.value = false;
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
$api.post('user/login', {
|
|
loginId: id.value,
|
|
password: password.value,
|
|
remember: remember.value,
|
|
})
|
|
.then(res => {
|
|
if (res.status === 200) {
|
|
userStore.userInfo();
|
|
router.push('/');
|
|
}
|
|
})
|
|
};
|
|
|
|
</script>
|