Fix: apply bootstrap - register
This commit is contained in:
@@ -1,30 +1,13 @@
|
||||
<style>
|
||||
|
||||
.login {
|
||||
background-color: #ff0000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register {
|
||||
background-color: #0000ff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
#page-tabs ul li {
|
||||
/*width: 341px;*/
|
||||
list-style: none;
|
||||
color: #dddddd;
|
||||
float: left;
|
||||
font-size: 1.3em;
|
||||
line-height: 60px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
.nav-tabs li.disabled a {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
let maestroName = "";
|
||||
@@ -36,14 +19,19 @@ let accountType = 0;
|
||||
let selectedAccountTypeValue = -1;
|
||||
let selectedAccountTypeText = "";
|
||||
|
||||
let tab1, tab2, tab3;
|
||||
let tabs = new Array();
|
||||
let tabContents = new Array();
|
||||
|
||||
let accountValidator = new AccountValidator();
|
||||
|
||||
$(document).ready(function() {
|
||||
tab1 = $("#page-tabs li").filter(":eq(0)");
|
||||
tab2 = $("#page-tabs li").filter(":eq(1)");
|
||||
tab3 = $("#page-tabs li").filter(":eq(2)");
|
||||
tabs.push($("#input-info"));
|
||||
tabs.push($("#check-info"));
|
||||
tabs.push($("#registered-account"));
|
||||
|
||||
tabContents.push($("#input"));
|
||||
tabContents.push($("#check"));
|
||||
tabContents.push($("#registered"));
|
||||
});
|
||||
|
||||
function checkMaestroID() {
|
||||
@@ -60,7 +48,11 @@ function checkMaestroID() {
|
||||
|
||||
(jsonData) => {
|
||||
isAvailableID = true;
|
||||
$("#error_message").text(maestroName + " : 생성 가능한 마에스트로 계정 이름입니다.");
|
||||
let message = maestroName + " : 새로 등록할 수 있는 마에스트로 아이디입니다.";
|
||||
showErrorMessage(message, "success");
|
||||
|
||||
$("#id_ckeck_help").text("");
|
||||
$("#password").focus();
|
||||
},
|
||||
|
||||
(errorMessage, errorCode) => {
|
||||
@@ -72,81 +64,112 @@ function checkMaestroID() {
|
||||
}
|
||||
|
||||
function onErrorMaestroID(message) {
|
||||
if($("#error_message").length) {
|
||||
$("#error_message").text(message);
|
||||
}
|
||||
showErrorMessage(message, "error");
|
||||
|
||||
$("#maestro_name").val("");
|
||||
$("#maestro_name").focus();
|
||||
}
|
||||
|
||||
function onErrorMaestroPW(message) {
|
||||
if($("#error_message").length) {
|
||||
$("#error_message").text(message);
|
||||
}
|
||||
showErrorMessage(message, "error");
|
||||
|
||||
$("#password").val("");
|
||||
$("#password").focus();
|
||||
}
|
||||
|
||||
function checkData() {
|
||||
if(!isAvailableID) {
|
||||
$("#error_message").text("아이디 중복 확인을 해 주세요.");
|
||||
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();
|
||||
if(!accountValidator.isValidMaestroPW(password)) {
|
||||
if(password.length === 0) {
|
||||
showErrorMessage("암호를 입력해 주세요.", "error");
|
||||
$("#password").focus();
|
||||
return;
|
||||
} else if(!accountValidator.isValidMaestroPW(password)) {
|
||||
onErrorMaestroPW(accountValidator.messageForInvalidMaestroPW(password));
|
||||
return;
|
||||
}
|
||||
// if(password.length === 0) {
|
||||
// $("#error_message").text("패스워드를 입력해 주세요.");
|
||||
// $("#password").focus();
|
||||
// return;
|
||||
// }
|
||||
|
||||
email = $("#email").val();
|
||||
if(email.length === 0) {
|
||||
$("#error_message").text("이메일을 입력해 주세요.");
|
||||
showErrorMessage("이메일을 입력해 주세요.", "error");
|
||||
$("#email").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
selectedAccountTypeValue = $("#account_type option:selected").val();
|
||||
selectedAccountTypeText = $("#account_type option:selected").text();
|
||||
selectedAccountTypeValue = $("#account_type").val();
|
||||
// selectedAccountTypeText = $("#account_type option:selected").text();
|
||||
console.log(selectedAccountTypeValue);
|
||||
console.log(selectedAccountTypeText);
|
||||
// console.log(selectedAccountTypeText);
|
||||
|
||||
let isCheckAcceptClauses = $("#check_accept_clauses").is(":checked");
|
||||
if(!isCheckAcceptClauses) {
|
||||
$("#error_message").text("약관을 읽고, 동의 체크 버튼을 눌러 주세요.");
|
||||
showErrorMessage("약관을 읽고, 위에 있는 체크 버튼을 눌러 주세요.", "error");
|
||||
$("#check_accept_clauses").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
$(".maestro_name").append(maestro_name);
|
||||
$(".password").append(password);
|
||||
$(".email").append(email);
|
||||
$(".account_type").append(selectedAccountTypeText);
|
||||
$(".price_account").append(selectedAccountTypeText);
|
||||
let playerCount = "명";
|
||||
let price = "0원";
|
||||
switch(Number(selectedAccountTypeValue)) {
|
||||
case 1:
|
||||
playerCount = "20명";
|
||||
price = "1만원";
|
||||
break;
|
||||
|
||||
$("#error_message").text("");
|
||||
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_data").css("display", "none");
|
||||
$("#register_account").css("display", "block");
|
||||
|
||||
tab1.removeClass("activated");
|
||||
tab2.addClass("activated");
|
||||
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");
|
||||
|
||||
tab2.removeClass("activated");
|
||||
tab3.addClass("activated");
|
||||
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",
|
||||
@@ -160,7 +183,7 @@ function register_account() {
|
||||
isAvailableID = false;
|
||||
|
||||
if($("#error_message").length) {
|
||||
$("#error_message").text(errorMessage);
|
||||
showErrorMessage(errorMessage, "error");
|
||||
}
|
||||
|
||||
$("#maestro_name").val("");
|
||||
@@ -172,38 +195,26 @@ function register_account() {
|
||||
|
||||
$('#myTab a').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
$(this).tab('show')
|
||||
// $(this).tab('show')
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
/*
|
||||
.nav-tabs li.disabled a {
|
||||
pointer-events: none;
|
||||
}
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="input-info" data-toggle="tab" href="#input" role="tab" aria-controls="input" aria-selected="true">마에스트로 계정 신청</a>
|
||||
<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" id="check-info" data-toggle="tab" href="#check" role="tab" aria-controls="check" aria-selected="false">신청 정보 확인</a>
|
||||
<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" id="registered-account" data-toggle="tab" href="#registered" role="tab" aria-controls="registered" aria-selected="false">신청 완료</a>
|
||||
<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> <!-- 탭 -->
|
||||
|
||||
@@ -216,6 +227,9 @@ $('#myTab a').on('click', function (e) {
|
||||
|
||||
<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>
|
||||
@@ -223,8 +237,9 @@ $('#myTab a').on('click', function (e) {
|
||||
<input type="text" class="form-control" id="maestro_name" placeholder="아이디 입력">
|
||||
<small class="form-text text-muted">4~16 글자. 영문, 숫자만 사용 가능합니다.</small>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<input type="button" class="form-control btn btn-warning" value="중복 체크" onClick="checkMaestroID()">
|
||||
<div class="col-sm-6">
|
||||
<input type="button" id="id_ckeck" class="btn btn-warning" value="중복 체크" onClick="checkMaestroID()">
|
||||
<small id="id_ckeck_help" class="form-text text-muted">아이디 입력 후, [중복 체크] 버튼을 눌러주세요.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -247,10 +262,11 @@ $('#myTab a').on('click', function (e) {
|
||||
<label for="account_type" class="col-sm-2 col-form-label">* 학생 수</label>
|
||||
<div class="col-sm-4">
|
||||
<select id="account_type" class="form-control">
|
||||
<option selected>20명 (1만원 / 1년)</option>
|
||||
<option>50명 (2만원 / 1년)</option>
|
||||
<option>100명 (3만원 / 1년)</option>
|
||||
<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>
|
||||
|
||||
@@ -259,7 +275,7 @@ $('#myTab a').on('click', function (e) {
|
||||
<label class="form-check-label" for="check_accept_clauses">아래 주요 약관을 읽었으며, 모든 내용에 동의합니다.</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block btn-lg" onClick="checkData()">등록 신청</button>
|
||||
<button type="button" class="btn btn-primary btn-block btn-lg" onClick="checkData()">등록 신청</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@@ -290,15 +306,15 @@ $('#myTab a').on('click', function (e) {
|
||||
<div class="px-5 py-4 my-3" style="background-color: #66ccff">
|
||||
<h4>신청 정보 확인</h4>
|
||||
|
||||
마에스트로 아이디 : <span class="maestro_name"></span><br/>
|
||||
암호 : <span class="password"></span><br/>
|
||||
이메일 : <span class="email"></span><br/>
|
||||
학생 수 : <span class="account_type"></span><br/>
|
||||
마에스트로 아이디 : <span class="maestro_name_data"></span><br/>
|
||||
암호 : <span class="password_data"></span><br/>
|
||||
이메일 : <span class="email_data"></span><br/>
|
||||
학생 수 : <span class="player_count"></span><br/>
|
||||
|
||||
<div>
|
||||
위의 내용이 모두 맞는지 확인해주세요.
|
||||
아래의 등록 신청 버튼을 누르면, 입력하신 이메일 주소로도 입금 내용을 보내드립니다.
|
||||
신청후에 <span class="price_account"></span>원을 송금해주세요.
|
||||
신청후에 <span class="price_account"></span>을 송금해주세요.
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
@@ -319,21 +335,21 @@ $('#myTab a').on('click', function (e) {
|
||||
|
||||
<h4>신청 완료</h4>
|
||||
|
||||
<p>마에스트로 아이디 <span class="maestro_name">????</span> 가 신청되었습니다.</p>
|
||||
<p>마에스트로 아이디 <span class="maestro_name_data">????</span> 가 신청되었습니다.</p>
|
||||
|
||||
<h5>입금 계좌</h5>
|
||||
<div>
|
||||
카카오뱅크 : 9999-999999<br/>
|
||||
계좌 이름 : 박지상<br/>
|
||||
금액 : <span class="price_account"></span>원
|
||||
<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_name"></span>로 입력해주세요.</div>
|
||||
금액 : <span class="price_account"></span>
|
||||
<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_name_data"></span>로 입력해주세요.</div>
|
||||
<div class="tip">보내는 사람 이름을 마에스트로 아이디로 해주실 경우, 가장 빠르게 계정을 활성화 해드릴 수 있습니다.</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
방금 <span class="email"></span> 이메일로 입금 안내 내용을 보내드렸습니다.
|
||||
방금 <span class="email_data"></span> 이메일로 입금 안내 내용을 보내드렸습니다.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user