jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: apply bootstrap - register

Browse Source
This commit is contained in:
Jisang Park
2018-07-25 11:46:37 +09:00
parent d03f54edc9
commit ecb0066c73
7 changed files with 185 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/js/main.js
+30
View File
@@ -62,4 +62,34 @@ function logout() {
maestroID = -1;
sessionStorage.setItem("maestroID", maestroID);
location.href = './../main/index.html';
}
function showErrorMessage(message, type) {
console.log("showErrorMessage : " + message);
let messageBox = $("#message_box");
if(!messageBox)
return;
let alertType = "";
switch(type) {
case "success":
alertType = "alert-success";
break;
case "warning":
alertType = "alert-warning";
break;
case "info":
alertType = "alert-info";
break;
case "error":
default:
alertType = "alert-danger";
}
messageBox.html(
'<div class="alert ' + alertType + '" role="alert">'
+ '<button type="button" class="close" data-dismiss="alert">&times;</button>'
+ message
+ '</div>'
);
}
src/web/main/login.html
+3
View File
@@ -41,6 +41,9 @@
</div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
<script src="../../../resources/bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
</body>
src/web/main/register.html
-1
View File
@@ -42,7 +42,6 @@
</div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
<script src="../../../resources/bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
src/web/module/footer.html
+1 -1
View File
@@ -1,4 +1,4 @@
<footer class="page-footer bg-dark text-white blue py-2">
<footer class="page-footer bg-dark text-white blue pt-4 pb-2">
<div class="container text-center text-md-left">
<div class="row">
src/web/module/maestro_section_login.html
+42 -18
View File
@@ -4,6 +4,16 @@ function login() {
let name = $("#maestro_name").val();
let password = $("#password").val();
if(name.length === 0) {
showErrorMessage("아이디를 입력해 주세요.", "error");
$("#maestro_name").focus();
return;
} else if(password.length === 0) {
showErrorMessage("암호를 입력해 주세요.", "error");
$("#password").focus();
return;
}
sendRequestServer( //url, sendParams, onSuccess, onFail, isDebugMode);
"./../server/maestro/login.php",
"maestro_name=" + name + "&password=" + password,
@@ -16,12 +26,9 @@ function login() {
},
(errorMessage, errorCode) => {
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
console.log("errorCode : " + errorCode);
let errorType = "error";
switch(errorCode) {
case "not_registered_id":
$("#maestro_name").val("");
@@ -33,6 +40,8 @@ function login() {
$("#password").focus();
break;
}
showErrorMessage(errorMessage, errorType);
}
);
@@ -43,17 +52,14 @@ function login() {
<div class="container">
<div>
<span id="error_message">
</span>
</div>
<div class="px-5 py-4 my-3" style="background-color: #99ccff">
<h4 class="mb-4">로그인</h4>
<form class="mx-4">
<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-4">
@@ -65,23 +71,41 @@ function login() {
<label for="password" class="col-sm-2 col-form-label">* 암호</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="password" placeholder="Password">
<p><br/></p>
<button type="button" class="btn btn-primary btn-lg px-5" onClick="login()">로그인</button>
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg" onClick="login()">로그인</button>
</form>
</div>
<div class="px-5 py-4 my-3" style="background-color: #99ccff">
<div class="px-5 py-4 my-3" style="background-color: #66ccff">
<h4 class="mb-4">마에스트로 계정 가입</h4>
<ul>
<li>1만원 : 학생 20명</li>
<li>2만원 : 학생 30명</li>
<li>3만원 : 학생 100명</li>
</ul>
<div class="row justify-content-center mb-3">
<div class="col-4">
<h5>마에스트로 관리 기능</h5>
<ul>
<li>학생 등록 및 삭제</li>
<li>학생 정보 수정</li>
<li>앱 활성화 / 비활성화</li>
<li class="d-none">랭킹</li>
<li class="d-none">기록</li>
</ul>
</div>
<div class="col-4">
<h5>계정 등록 비용 (금액 / 1년)</h5>
<ul>
<li>1만원 : 학생 20명</li>
<li>2만원 : 학생 30명</li>
<li>3만원 : 학생 100명</li>
</ul>
</div>
</div>
<p><a class="btn btn-primary btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입</a>
src/web/module/maestro_section_register.html
+103 -87
View File
@@ -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>
src/web/server/maestro/add_maestro.php
+6 -6
View File
@@ -19,16 +19,16 @@ if(!is_numeric($enterCode)) {
*/
$maestroID = hasMaestroName($maestro_name);
$maestroID = has_maestro_name($maestro_name);
if($maestroID !== null) {
set_error_message($maestro_name." : 이미 등록된 마에스트로 계정입니다.");
send_result_fail();
exit;
}
addMaestro($maestro_name, $password, $email, $account_type);
add_maestro($maestro_name, $password, $email, $account_type);
$maestroID = hasMaestroName($maestro_name);
$maestroID = has_maestro_name($maestro_name);
if($maestroID === null) {
set_error_message($maestro_name." : 알 수 없는 이유로 마에스트로 계정 등록이 취소되었습니다.");
send_result_fail();
@@ -41,7 +41,7 @@ exit;
function hasMaestroName($maestroName) {
function has_maestro_name($maestroName) {
global $db_conn;
$query = "
@@ -60,11 +60,11 @@ function hasMaestroName($maestroName) {
return $maestroID;
}
function addMaestro($maestro_name, $password, $email, $account_type) {
function add_maestro($maestro_name, $password, $email, $account_type) {
global $db_conn;
$query = "
INSERT INTO moty_maestro (Name, Password, Email, AccountType, ActivateStatus, UserCount, AcceptClausesDateTime, MaestroTestID)
INSERT INTO moty_maestro (Name, Password, Email, AccountType, ActivateStatus, PlayerCount, AcceptClausesDateTime, MaestroTestID)
VALUES (?, PASSWORD(?), ?, ?, 0, 0, NOW(), -1)";
$stmt = $db_conn->prepare($query);
$stmt->bind_param("sssi", $maestro_name, $password, $email, $account_type);