File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="container">
<section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6 align-items-center justify-content-center">
<div class="d-flex justify-content-center py-4">
<a href="index.html" class="logo d-flex align-items-center w-auto">
<!-- <span class="d-none d-lg-block"> <img :src="logo" alt=""></span> -->
</a>
</div><!-- End Logo -->
<div class="card mb-3">
<div class="card-body">
<div class=" pb-2">
<h2 class="card-title text-center pb-0 fs-4">로그인</h2>
</div>
<form class="row g-3 needs-validation" :class="{ 'was-validated': formSubmitted }" novalidate
@submit.prevent="handleLogin">
<div class="col-12">
<label for="yourUsername" class="form-label">E-mail</label>
<div class="input-group has-validation">
<input v-model="email" type="text" name="username" class="form-control" id="yourUsername"
required>
<div class="invalid-feedback">회사 이메일을 입력해주세요.</div>
</div>
</div>
<div class="col-12">
<label for="yourPassword" class="form-label">Password</label>
<input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
required>
<div class="invalid-feedback">비밀번호를 입력해주세요.</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" value="true" id="rememberMe">
<label class="form-check-label" for="rememberMe">로그인 유지하기</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary w-100" type="submit">로그인</button>
</div>
<div class="col-12">
<p class="small mb-0"> <router-link to="Join">회원가입</router-link></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
// 임시 로그인 정보
email: '',
password: '',
formSubmitted: false,
logo: "/client/resources/img/logo_t.png", // 경로를 Vue 프로젝트 구조에 맞게 설정
};
},
methods: {
handleLogin() {
this.formSubmitted = true;
if (!this.email.includes('@')) {
alert('이메일은 @를 포함해야 합니다.');
return; // Stop further processing if email is invalid
}
console.log('Email:', this.email);
console.log('Password:', this.password);
const user = JSON.parse(localStorage.getItem("UserInfo"));
if (user) {
console.log('Stored Email:', user.email);
console.log('Stored Password:', user.password);
// 이메일과 비밀번호 비교
if (this.email === user.email && this.password === user.password) {
alert('로그인 성공!');
this.$router.push("/"); // 로그인 성공 후 메인 페이지로 이동
} else {
alert('로그인 실패: 이메일 또는 비밀번호가 잘못되었습니다.');
}
} else {
console.log('등록되지 않은 회원입니다.');
}
},
},
};
</script>
<style scoped></style>