68 lines
2.1 KiB
Vue
68 lines
2.1 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="pw"
|
|
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 { 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 emit = defineEmits(['submit']);
|
|
|
|
const handleIdChange = value => {
|
|
id.value = value;
|
|
idAlert.value = false;
|
|
};
|
|
|
|
const handlePasswordChange = value => {
|
|
password.value = value;
|
|
passwordAlert.value = false;
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
idAlert.value = id.value.trim() === '';
|
|
passwordAlert.value = password.value.trim() === '';
|
|
|
|
if (!idAlert.value && !passwordAlert.value) {
|
|
emit('submit', { id: id.value, password: password.value });
|
|
}
|
|
};
|
|
</script>
|