Files
chocomae/src/web/module/maestro_section_register.html
T

639 lines
23 KiB
HTML

<style>
.nav-tabs li.disabled a {
pointer-events: none;
}
</style>
<script type="text/javascript">
var maestroName = "";
var isAvailableID = false;
var password = "";
var email = "";
var accountType = 0;
var selectedAccountTypeValue = -1;
var selectedAccountTypeText = "";
var tabs = new Array();
var tabContents = new Array();
var 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;
var 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);
var isCheckAcceptClauses = $("#check_accept_clauses").is(":checked");
if(!isCheckAcceptClauses) {
showErrorMessage("약관을 읽고, 위에 있는 체크 버튼을 눌러 주세요.", "error");
$("#check_accept_clauses").focus();
return;
}
var accountTypeNo = Number(selectedAccountTypeValue);
var playerCount = NumberUtil.numberWithCommas(accountTypePlayerCount(accountTypeNo)) + "명";
var price = NumberUtil.numberWithCommas(accountTypePrice(accountTypeNo)) + "원";
$(".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=" + encodeURIComponent(email) + "&account_type=" + selectedAccountTypeValue,
(function(jsonData) {
isAvailableID = true;
// $("#warningEmailModal").modal();
}),
(function(errorMessage, errorCode) {
isAvailableID = false;
if($("#error_message").length) {
showErrorMessage(errorMessage, "error");
}
$("#maestro_name").val("");
$("#maestro_name").focus();
})
);
}
function showContractModal() {
console.log("showContractModal");
$("#contractModal").modal();
}
$('#myTab a').on('click', function (e) {
e.preventDefault();
// $(this).tab('show')
})
</script>
<div class="modal fade" id="contractModal" tabindex="-1" role="dialog" aria-labelledby="contractModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header alert-danger">
<h5 class="modal-title" id="contractModalLabel">초코마에 약관 (2018년 11월 15일)</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="card bg-danger">
<div class="card-header text-white">
IE(인터넷 익스플로러) 10 이상에서만 사용 가능
</div>
<div class="card-body bg-white">
<h5 class="card-title text-danger">IE9 이하의 실행 환경이라면, 유료 계정 등록을 절대로 하지 말아주세요.</h5>
<p class="card-text">
<ul>
<li>IE9 버전 이하에서 화면이 깨져 보입니다.</li>
<li>IE9 버전에서도 실행이 안됩니다.</li>
<li>크롬, 파이어폭스, 사파리등 IE외의 브라우저에서는 잘 됩니다.</li>
</ul>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
결제
</div>
<div class="card-body">
<h5 class="card-title">계좌 이체(송금)</h5>
<p class="card-text">
<ul>
<li>죄송합니다. 현재 계좌 이체(송금)만 받고 있습니다.</li>
<li>여력이 없어서 신용카드, 모바일 결제를 구현하지 못했습니다.</li>
<li>전자세금계산서 발행 문의는 홈페이지 하단의 이메일로 연락주세요.</li>
</ul>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
개인 정보 취급
</div>
<div class="card-body">
<h5 class="card-title">마에스트로 계정</h5>
<p class="card-text">
<ul>
<li>계정 가입시, 최소한의 정보만을 요청하고 있습니다.</li>
<li>결제 및 가입 안내, 계정 정보 변경 및 확인을 위해 개인 이메일을 요청하고 있습니다.</li>
<li>초코마에 사이트, 마에스트로 계정과 관련 없는 스팸 메일은 절대로 보내지 않습니다.</li>
<li>이메일 계정을 다른 회사나 개인에 절대로 양도하거나 판매하지 않습니다.</li>
<li>마에스트로 계정 암호는 DB에 암호화되어 저장됩니다. 관리자 및 개발자도 절대 알 수 없습니다.</li>
</ul>
</p>
<h5 class="card-title">학생 계정</h5>
<p class="card-text">
<ul>
<li>학생 계정은 마에스트로가 직접 등록하고 관리합니다.</li>
<li>학생 계정의 패스워드(입장번호)는 암호화되지 않은채 DB에 저장됩니다.</li>
<li>학생 계정의 패스워드(입장번호)는 마에스트로가 보고 수정할 수 있습니다.</li>
<li>마에스트로가 요청할 경우, 학생 계정의 패스워드(입장번호)를 관리자 및 개발자가 수정할 수 있습니다.</li>
</ul>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
계정 활성화
</div>
<div class="card-body">
<h5 class="card-title">활성화</h5>
<p class="card-text">
<ul>
<li>입금 내역을 수작업으로 확인하고 있습니다.</li>
<li>입금 내역을 확인하는대로, 가능한 빨리 마에스트로 계정을 활성화해드리겠습니다.</li>
<li>계정 유효 기간은 1년입니다.</li>
<li>유효 기간 종료 1달 전부터, 유효 기간 연장 신청을 하실 수 있습니다.</li>
</ul>
</p>
<h5 class="card-title">비활성화</h5>
<p class="card-text">
<ul>
<li>유효 기간이 끝나면 계정이 비활성화 됩니다.</li>
<li>비활셩화 된 계정은 6개월 후에 자동 삭제됩니다.<br/>
(마에스트로 계정과 학생들의 모든 데이터)</li>
</ul>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
계정 업그레이드
</div>
<div class="card-body">
<h5 class="card-title">업그레이드</h5>
<p class="card-text">
<ul>
<li>사용중인 요금제보다 높은 요금제로 변경이 가능합니다.</li>
<li>업그레이드하면, 유효 기간이 1년으로 다시 채워집니다.</li>
</ul>
</p>
<h5 class="card-title">다운그레이드</h5>
<p class="card-text">
<ul>
<li>다운그레이드는 제공하지 않고 있습니다.</li>
</ul>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
서비스 이용의 정지 및 중지
</div>
<div class="card-body">
<h5 class="card-title">서비스 정지</h5>
<p class="card-text">
<ul>
<li>서비스용 설비의 보수 및 공사가 있을 경우, 부득이하게 서비스가 정지될 수 있습니다.</li>
<li>현재, 개인이 개발하고 운영하고 있어서 대처가 늦어질 수 있습니다. 많은 양해 부탁드립니다.</li>
</ul>
</p>
<h5 class="card-title">서비스 중지</h5>
<p class="card-text">
<ul>
<li>국가비상사태, 서비스 설비의 장애등 정상적 서비스가 불가능한 경우,</li>
<li>개인이 감당할 수 없는 서비스 비용이 발생할 경우, 서비스를 중지할 수 있습니다.</li>
<li>서비스를 중지하게 되면, 추가 가입이나 연장, 업그레이드를 막고 남은 기간동안 정상적으로 사용할 수 있도록 하겠습니다.</li>
</ul>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
환불
</div>
<div class="card-body">
<h5 class="card-title">환불 정책</h5>
<p class="card-text">
<ul>
<li>[ 결제한 금액 * 남은 날짜 / 365일 ] 에서 100원 단위를 절삭한 금액을 환불해드립니다.<br/>
(100원 단위 절삭은 송금 수수료 지출 등의 비용을 감안하였습니다. 양해 부탁드립니다)</li>
<li>악의적인 환불을 방지하기 위해, 결제 직후의 환불 요청시에도 1달(30일)을 사용한 것으로 계산하고 나머지 기간 비율만큼을 환불해 드리겠습니다.<br/>
(1만원 결제, 364일이 남았을 때의 환불액 :<br/>
[ 10,000 * 335 / 365 = 9,178 ] => 9,000원)</li>
<li>수작업으로 환불을 진행하기 때문에, 시간이 약간 걸릴 수 있습니다.</li>
</ul>
</p>
<h5 class="card-title">환불 요청</h5>
<p class="card-text">
<ul>
<li>홈페이지 하단의 이메일로 아래 내용을 입력해서 보내주세요.</li>
<li>1) 마에스트로 계정명</li>
<li>2) 환불받을 은행 및 계좌번호</li>
<li>3) 환불 사유</li>
</ul>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
면책
</div>
<div class="card-body">
<h5 class="card-title">아래 상황의 경우, 고객에 대한 책임 및 손해배상을 하지 않습니다.</h5>
<p class="card-text">
<ul>
<li>전시, 사변, 천재지변, 국가비상사태 등 불가항력으로 서비스를 제공할 수 없는 경우<br/>
<li>사용자의 고의 또는 과실로 서비스를 제공할 수 없는 경우</li>
<li>HW, SW 시스템의 시설 장애로 서비스 이용이 중단될 경우</li>
<li>계약 만료, 해지 등으로 사용자 계정이 정지되거나 해지되어 데이터를 삭제한 이후</li>
</ul>
</p>
</div>
</div>
<br/>
<h5 class="card-title text-primary text-center">현재, 개인이 개발하고 운영하는 만큼 부족한 점이 많습니다.<br/>
최선을 다해 서비스하겠습니다. 많은 이해 부탁드립니다.</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<div class="modal fade" id="warningEmailModal" tabindex="-1" role="dialog" aria-labelledby="warningEmailModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header alert-danger">
<h5 class="modal-title" id="exerienceMaestroModalLabel">스팸 메일 해제 안내</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
등록하신 이메일 주소로 "입금 안내 메일"을 발송했습니다.<br/>
<br/>
그런데 네이버/다음 메일 등에서 [초코 마에] 메일이 [스팸 메일함]로 들어가고 있네요.<br/>
<span class="font-weight-bold text-danger">번거로우시겠지만 네이버/다음 메일의 [스팸 메일함]에서 해당 메일을 [스팸 해제] 처리 부탁드립니다.</span><br/>
(이후에 "계정 등록 알림", "계정 유효기간 종료 예고"" 등의 메일이 발송될 예정입니다)<br/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<div class="container py-3">
<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>
<option value="4">500명 (4만원)</option>
<option value="5">1,000명 (5만원)</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 mt-3" style="background-color: #ffdddd">
<h4>약관 주요 내용 요약</h4>
<p style="text-align: right;">마지막 갱신 : 2018년 11월 15일</p>
<ul>
<li><span class="text-danger">IE9 이하는 실행이 안됩니다!</span> IE10 이상, 크롬, 파이어폭스, 사파리 등에서만 사용 가능합니다.</li>
<li>결제는 계좌 이체(송금)으로만 가능합니다. 신용카드, 모바일 결제는 준비되지 않았습니다.</li>
<li>마에스트로 계정 암호는 DB에 암호화되어 안전하게 저장됩니다.</li>
<li>결제후 1년이 지나면 마에스트로 계정과 학생들의 계정이 비활성화 됩니다.</li>
<li>비활성화된 계정은 6개월후에 삭제됩니다. (마에스트로 및 학생 계정의 모든 정보 삭제)</li>
<li>계정 업그레이드가 가능합니다. (유효 기간이 다시 1년으로 채워짐)</li>
<li><span class="card-title text-primary text-center">현재, 개인이 개발하고 운영하는 만큼 부족한 점이 많습니다. 많은 이해 부탁드립니다.</span></li>
</ul>
<a class="btn btn-danger btn-block btn-lg" href="javascript:void(0);" onClick="showContractModal();">전체 약관 읽기</a>
</div>
</div>
<div class="tab-pane fade" id="check" role="tabpanel" aria-labelledby="check-info">
<div class="px-5 py-4 mt-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 text-primary">???</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 text-primary">???</span> (<span class="price_account text-primary">???</span> / 1년)</label>
</div>
</form>
<div class="mb-4">
입력하신 내용이 모두 맞는지 확인해주세요.<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>
<ul>
<li>아래의 입금 계좌 정보를 등록하신 <span class="email_data text-primary font-weight-bold">????</span> 메일로 보냈습니다.<br/>
<!--
그런데 네이버/다음 메일 등에서 [초코 마에] 메일이 [스팸 메일함]로 들어가고 있네요.</li>
<li><span class="font-weight-bold text-danger">번거로우시겠지만 네이버/다음 메일의 [스팸 메일함]에서 해당 메일을 [스팸 해제] 처리 부탁드립니다.</span><br/>
([계정 등록 알림], [계정 유효기간 종료 예고] 등의 메일이 이후에 발송될 예정입니다)</li>
-->
</ul>
</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">3333-07-4977969 (예금주 : 박지상)</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 mt-3" style="background-color: #ddffff">
<h4>계정 활성화 안내</h4>
<ul>
<li>입금 내역이 확인되는대로 마에스트로 아이디를 활성화 해드리겠습니다.</li>
<li>현재 수작업으로 확인하고 계정을 활성화하고 있어서 시간이 조금 걸리고 있습니다. 양해 부탁드립니다.</li>
<li>마에스트로 계정이 활성화되는대로 즉시 알림 메일을 드리겠습니다.</li>
</ul>
</div>
</div> <!-- 신청 완료 -->
</div> <!-- 탭 내용 -->
</div> <!-- container -->