409 lines
13 KiB
HTML
409 lines
13 KiB
HTML
<style>
|
|
|
|
.nav-tabs li.disabled a {
|
|
pointer-events: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
let maestroName = "";
|
|
let isAvailableID = false;
|
|
|
|
let password = "";
|
|
let email = "";
|
|
let accountType = 0;
|
|
let selectedAccountTypeValue = -1;
|
|
let selectedAccountTypeText = "";
|
|
|
|
let tabs = new Array();
|
|
let tabContents = new Array();
|
|
|
|
let accountValidator = new AccountValidator();
|
|
|
|
$(document).ready(function() {
|
|
tabs.push($("#input-info"));
|
|
tabs.push($("#check-info"));
|
|
tabs.push($("#registered-account"));
|
|
|
|
tabContents.push($("#input"));
|
|
tabContents.push($("#check"));
|
|
tabContents.push($("#registered"));
|
|
});
|
|
|
|
function checkMaestroID() {
|
|
maestroName = $("#maestro_name").val();
|
|
|
|
if(!accountValidator.isValidMaestroID(maestroName)) {
|
|
onErrorMaestroID(accountValidator.messageForInvalidMaestroID(maestroName));
|
|
return;
|
|
}
|
|
|
|
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
|
|
"./../server/maestro/check_id.php",
|
|
"maestro_name=" + maestroName,
|
|
|
|
(function(jsonData) {
|
|
isAvailableID = true;
|
|
let message = maestroName + " : 새로 등록할 수 있는 마에스트로 아이디입니다.";
|
|
showErrorMessage(message, "success");
|
|
|
|
// $("#password").focus();
|
|
}),
|
|
|
|
(function(errorMessage, errorCode) {
|
|
isAvailableID = false;
|
|
onErrorMaestroID(errorMessage);
|
|
})
|
|
|
|
);
|
|
}
|
|
|
|
function onErrorMaestroID(message) {
|
|
showErrorMessage(message, "error");
|
|
|
|
$("#maestro_name").val("");
|
|
$("#maestro_name").focus();
|
|
}
|
|
|
|
function onErrorMaestroPW(message) {
|
|
showErrorMessage(message, "error");
|
|
|
|
$("#password").val("");
|
|
$("#password").focus();
|
|
}
|
|
|
|
function checkData() {
|
|
maestroName = $("#maestro_name").val();
|
|
if(maestroName.length === 0) {
|
|
showErrorMessage("아이디를 입력해 주세요.", "error");
|
|
$("#maestro_name").focus();
|
|
return;
|
|
} else if(!isAvailableID) {
|
|
onErrorMaestroID("아이디 중복 확인을 해 주세요.", "error");
|
|
$("#check_id").focus();
|
|
return;
|
|
}
|
|
|
|
password = $("#password").val();
|
|
console.log("password : " + password);
|
|
if(password.length === 0) {
|
|
showErrorMessage("암호를 입력해 주세요.", "error");
|
|
$("#password").focus();
|
|
return;
|
|
} else if(!accountValidator.isValidMaestroPW(password)) {
|
|
onErrorMaestroPW(accountValidator.messageForInvalidMaestroPW(password));
|
|
return;
|
|
}
|
|
|
|
email = $("#email").val();
|
|
if(email.length === 0) {
|
|
showErrorMessage("이메일을 입력해 주세요.", "error");
|
|
$("#email").focus();
|
|
return;
|
|
}
|
|
|
|
selectedAccountTypeValue = $("#account_type").val();
|
|
// selectedAccountTypeText = $("#account_type option:selected").text();
|
|
console.log(selectedAccountTypeValue);
|
|
// console.log(selectedAccountTypeText);
|
|
|
|
let isCheckAcceptClauses = $("#check_accept_clauses").is(":checked");
|
|
if(!isCheckAcceptClauses) {
|
|
showErrorMessage("약관을 읽고, 위에 있는 체크 버튼을 눌러 주세요.", "error");
|
|
$("#check_accept_clauses").focus();
|
|
return;
|
|
}
|
|
|
|
let playerCount = "명";
|
|
let price = "0원";
|
|
switch(Number(selectedAccountTypeValue)) {
|
|
case 1:
|
|
playerCount = "20명";
|
|
price = "1만원";
|
|
break;
|
|
|
|
case 2:
|
|
playerCount = "50명";
|
|
price = "2만원";
|
|
break;
|
|
|
|
case 3:
|
|
playerCount = "100명";
|
|
price = "3만원";
|
|
break;
|
|
}
|
|
|
|
$(".maestro_name_data").text(maestroName);
|
|
$(".password_data").text(password);
|
|
$(".email_data").text(email);
|
|
$(".player_count").text(playerCount);
|
|
$(".price_account").text(price);
|
|
|
|
$("input[name=maestro_name_data]").val(maestroName);
|
|
$("input[name=password_data]").val(password);
|
|
$("input[name=email_data]").val(email);
|
|
$("input[name=player_count]").val(playerCount);
|
|
$("input[name=price_account]").val(price);
|
|
|
|
$("#input_data").css("display", "none");
|
|
$("#register_account").css("display", "block");
|
|
|
|
tabs[0].removeClass("text-primary active show");
|
|
tabs[0].addClass("text-secondary");
|
|
tabs[1].removeClass("text-secondary active show");
|
|
tabs[1].addClass("text-primary active show");
|
|
|
|
tabContents[0].removeClass("active");
|
|
tabContents[0].removeClass("show");
|
|
tabContents[1].addClass("active");
|
|
tabContents[1].addClass("show");
|
|
}
|
|
|
|
function register_account() {
|
|
$("#register_account").css("display", "none");
|
|
$("#banking_guide").css("display", "block");
|
|
|
|
tabs[1].removeClass("text-primary active show");
|
|
tabs[1].addClass("text-secondary");
|
|
tabs[2].removeClass("text-secondary active show");
|
|
tabs[2].addClass("text-primary active show");
|
|
|
|
tabContents[1].removeClass("active");
|
|
tabContents[1].removeClass("show");
|
|
tabContents[2].addClass("active");
|
|
tabContents[2].addClass("show");
|
|
|
|
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
|
|
"./../server/maestro/add_maestro.php",
|
|
"maestro_name=" + maestroName + "&password=" + password + "&email=" + email + "&account_type=" + selectedAccountTypeValue,
|
|
|
|
(function(jsonData) {
|
|
isAvailableID = true;
|
|
}),
|
|
|
|
(function(errorMessage, errorCode) {
|
|
isAvailableID = false;
|
|
|
|
if($("#error_message").length) {
|
|
showErrorMessage(errorMessage, "error");
|
|
}
|
|
|
|
$("#maestro_name").val("");
|
|
$("#maestro_name").focus();
|
|
})
|
|
|
|
);
|
|
}
|
|
|
|
$('#myTab a').on('click', function (e) {
|
|
e.preventDefault()
|
|
// $(this).tab('show')
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item disabled">
|
|
<a class="nav-link text-primary active" id="input-info" data-toggle="tab" href="#input" role="tab" aria-controls="input" aria-selected="true">마에스트로 계정 신청</a>
|
|
</li>
|
|
|
|
<li class="nav-item disabled">
|
|
<a class="nav-link text-secondary" id="check-info" data-toggle="tab" href="#check" role="tab" aria-controls="check" aria-selected="false">신청 정보 확인</a>
|
|
</li>
|
|
|
|
<li class="nav-item disabled">
|
|
<a class="nav-link text-secondary" id="registered-account" data-toggle="tab" href="#registered" role="tab" aria-controls="registered" aria-selected="false">신청 완료</a>
|
|
</li>
|
|
</ul> <!-- 탭 -->
|
|
|
|
|
|
<div class="tab-content" id="myTabContent">
|
|
|
|
<div class="tab-pane fade show active" id="input" role="tabpanel" aria-labelledby="input-info">
|
|
|
|
<div class="px-5 py-4 my-3" style="background-color: #99ccff">
|
|
<h4 class="mb-4">마에스트로 계정 정보 입력</h4>
|
|
|
|
<div id="message_box">
|
|
</div>
|
|
|
|
<form class="mx-4">
|
|
<div class="form-group row">
|
|
<label for="maestro_name" class="col-sm-2 col-form-label">* 아이디</label>
|
|
<div class="col-sm-6">
|
|
<input type="text" class="form-control" id="maestro_name" placeholder="아이디 입력">
|
|
<small class="form-text text-muted">4~20 글자. 한글도 사용 가능합니다.</small>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<input type="button" id="id_ckeck" class="btn btn-outline-dark" value="중복 체크" onClick="checkMaestroID()">
|
|
<!-- <small id="id_ckeck_help" class="form-text text-muted">아이디 입력 후, [중복 체크] 버튼을 눌러주세요.</small> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label for="password" class="col-sm-2 col-form-label">* 암호</label>
|
|
<div class="col-sm-6">
|
|
<input type="text" class="form-control" id="password" placeholder="Password">
|
|
<small class="form-text text-muted">4~16 글자. 영문, 숫자만 사용 가능합니다.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label for="email" class="col-sm-2 col-form-label">* 이메일</label>
|
|
<div class="col-sm-6">
|
|
<input type="email" class="form-control" id="email" placeholder="name@example.com">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label for="account_type" class="col-sm-2 col-form-label">* 학생 수</label>
|
|
<div class="col-sm-6">
|
|
<select id="account_type" class="form-control">
|
|
<option value="1" selected>20명 (1만원)</option>
|
|
<option value="2">50명 (2만원)</option>
|
|
<option value="3">100명 (3만원)</option>
|
|
</select>
|
|
<small class="form-text text-muted">계정 활성화 날짜로부터 1년동안 유효합니다.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group form-check">
|
|
<input type="checkbox" class="form-check-input" id="check_accept_clauses">
|
|
<label class="form-check-label" for="check_accept_clauses">아래 주요 약관을 읽었으며, 모든 내용에 동의합니다.</label>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-primary btn-block btn-lg" onClick="checkData()">등록 신청</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div class="px-5 py-4 my-3" style="background-color: #ffdddd">
|
|
<h4>약관 주요 내용 요약</h4>
|
|
|
|
<p style="text-align: right;">마지막 갱신 : 2018년 6월 26일</p>
|
|
|
|
<ul>
|
|
<li>결제는 계좌 이체(송금)으로만 가능합니다. 신용카드 결제는 준비되지 않았습니다.</li>
|
|
<li>서버가 불안정할 수 있습니다. 문제 발생시 메일로 알려주시면 최대한 빨리 정상화 하겠습니다.</li>
|
|
<li>결제후 1년이 지나면 마에스트로 계정과 학생들의 계정이 비활성화 됩니다.</li>
|
|
<li>비활성화 되기 전에 연장 결제 해주시면, 남은 기간도 함께 연장됩니다.</li>
|
|
<li>비활성화된 계정은, 6개월후에 삭제됩니다. 마에스트로 계정 및 학생들의 계정 정보 모두가 사라집니다.</li>
|
|
<li>서비스 업그레이드는 가능합니다. 업그레이드한 날부터 1년간 업그레이드 서비스가 시작됩니다.</li>
|
|
</ul>
|
|
|
|
<button class="btn btn-danger btn-block btn-lg">전체 약관 읽기</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="tab-pane fade" id="check" role="tabpanel" aria-labelledby="check-info">
|
|
|
|
<div class="px-5 py-4 my-3" style="background-color: #99ccff">
|
|
<h4 class="mb-4">신청 정보 확인</h4>
|
|
|
|
<form class="mx-4">
|
|
<div class="row">
|
|
<label class="col-sm-2 col-form-label">* 아이디</label>
|
|
<label class="col-sm-9 col-form-label"><span class="maestro_name_data text-primary font-weight-bold">???</span></label>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="row">
|
|
<label class="col-sm-2 col-form-label">* 암호</label>
|
|
<label class="col-sm-9 col-form-label"><span class="password_data">???</span></label>
|
|
</div>
|
|
-->
|
|
|
|
<div class="row">
|
|
<label class="col-sm-2 col-form-label">* 이메일</label>
|
|
<label class="col-sm-9 col-form-label"><span class="email_data">???</span></label>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label class="col-sm-2 col-form-label">* 학생 수</label>
|
|
<label class="col-sm-9 col-form-label"><span class="player_count">???</span> (<span class="price_account">???</span> / 1년)</label>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<div class="mb-4">
|
|
위의 내용이 모두 맞는지 확인해주세요.<br/>
|
|
아래의 등록 신청 버튼을 누르면, 입력하신 이메일 주소로도 입금 내용을 보내드립니다.<br/>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-block btn-lg" onClick="register_account()">계정 신청</button>
|
|
</div>
|
|
|
|
</div> <!-- 신청 정보 확인 -->
|
|
|
|
|
|
|
|
<div class="tab-pane fade" id="registered" role="tabpanel" aria-labelledby="registered-account">
|
|
|
|
<div class="px-5 py-4 my-3" style="background-color: #99ccff">
|
|
<h4 class="mb-4">신청 완료</h4>
|
|
|
|
<p>마에스트로 아이디 <span class="maestro_name_data text-primary font-weight-bold">????</span> 가 신청되었습니다.</p>
|
|
|
|
<div>
|
|
방금 <span class="email_data text-primary font-weight-bold"></span> 이메일로 입금 안내 내용을 보내드렸습니다.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="px-5 py-4 my-3" style="background-color: #ffce54">
|
|
<h4 class="mb-4">입금 계좌</h4>
|
|
|
|
<form class="mx-4">
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">* 카카오뱅크</label>
|
|
<label class="col-sm-9 col-form-label">000-000000</label>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">* 계좌명</label>
|
|
<label class="col-sm-9 col-form-label">박지상</label>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">* 금액</label>
|
|
<label class="col-sm-9 col-form-label"><span class="price_account">???원</span></label>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">* 송금자명</label>
|
|
<div class="col-sm-9">
|
|
<label class="col-form-label"><span class="maestro_name_data text-primary font-weight-bold">???</span> (로 입력해주세요)</label>
|
|
<small class="form-text text-muted">빠른 입금 확인과 계정 활성화를 위해, 송금자명을 아이디로 입력 부탁드립니다.</small>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div class="px-5 py-4 my-3" style="background-color: #ffdddd">
|
|
<h4>계정 활성화 안내</h4>
|
|
|
|
<ul>
|
|
<li>계정 신청 내역과 입금 내역을 확인한 후, 바로 마에스트로 아이디를 활성화하겠습니다.</li>
|
|
<li>최대 24시간 안에 활성화하도록 항상 노력하겠습니다.</li>
|
|
<li>계정 신청 내역과 입금 내역이 맞지 않을 경우, 이메일로 문의드리게 됩니다.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div> <!-- 신청 완료 -->
|
|
|
|
</div> <!-- 탭 내용 -->
|
|
|
|
</div> <!-- container --> |