File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="container">
<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 }" @submit.prevent="handleRegister" novalidate>
<div class="col-12">
<label for="yourName" class="form-label">이름</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required>
<div class="invalid-feedback">이름을 입력해주세요.</div>
</div>
<div class="col-12">
<label for="yourdept" class="form-label">부서</label>
<select v-model="dept" id="inputState" class="form-select">
<option value="" disabled selected>부서를 선택하세요</option>
<option v-for="(item, index) in DeptData" :key="index" :value="item.deptNM">
{{ item.deptNM }}
</option>
</select>
</div>
<div class="col-12">
<label for="yourlevel" class="form-label">직급</label>
<select v-model="level" id="yourlevel" class="form-select">
<option value="" disabled selected>직급을 선택하세요</option>
<option value="level0">계약직(인턴)</option>
<option value="level1">사원</option>
<option value="level2">주임</option>
<option value="level3">대리</option>
<option value="level4">과장</option>
</select>
</div>
<div class="col-12">
<label for="youremail" class="form-label">Email</label>
<div class="input-group has-validation">
<input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly>
<div class="invalid-feedback">회사 이메일을 입력해주세요.</div>
</div>
</div>
<div class="col-12">
<label for="yourPassword" class="form-label">비밀번호 변경</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 v-model="acceptTerms" class="form-check-input" name="terms" type="checkbox" value="" id="acceptTerms" required> -->
<!-- <label class="form-check-label" for="acceptTerms">이용약관에 동의합니다.</label> -->
<div class="invalid-feedback">이용약관에 동의하셔야 합니다.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary w-100" type="submit">수정</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
password: '',
dept: '',
level: '',
acceptTerms: false,
formSubmitted: false,
logo: "/client/resources/img/logo_t.png", // 경로를 Vue 프로젝트 구조에 맞게 설정
};
},
methods: {
handleRegister() {
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);
console.log('Name:', this.name);
console.log('Accept Terms:', this.acceptTerms);
if (this.email && this.password && this.name && this.acceptTerms && this.dept && this.level ) {
// 로컬 스토리지에 회원가입 정보 저장
const userData = {
name: this.name,
email: this.email,
password: this.password,
dept: this.dept,
level: this.level,
};
console.log('User Data to be saved:', userData);
try {
localStorage.setItem("UserInfo", JSON.stringify(userData));
alert('회원가입이 완료되었습니다!');
// Redirect to login page
this.$router.push("/login");
} catch (error) {
console.error("Error saving to localStorage:", error);
alert("회원가입 중 오류가 발생했습니다.");
}
} else {
alert("모든 필드를 입력해주세요.");
}
},
},
created() {
// 로컬스토리지에서 데이터 불러오기
const storedData = localStorage.getItem('DeptData');
if (storedData) {
this.DeptData = JSON.parse(storedData);
}
},
};
</script>
<style scoped>
</style>