js2ts: join user
This commit is contained in:
@@ -43,7 +43,11 @@ export class JQValidateForm {
|
||||
}
|
||||
console.log(rawValues);
|
||||
|
||||
const validateResult = await this.validator.validate(rawValues).catch(({ fields }) => {
|
||||
const validateResult = await this.validator.validate(rawValues).catch(({fields }) => {
|
||||
if(fields === undefined){
|
||||
console.error('validator 에러, 조건 검사 구문을 확인하세요.');
|
||||
return;
|
||||
}
|
||||
this.clearErrMsg();
|
||||
for(const rawKey of Object.keys(fields)){
|
||||
let $item: JQuery<HTMLElement>;
|
||||
|
||||
-134
@@ -1,134 +0,0 @@
|
||||
$(document).ready( function () {
|
||||
$( "#main_form" ).validate( {
|
||||
rules: {
|
||||
username: {
|
||||
required: true,
|
||||
minlength: 4,
|
||||
maxlength: 64,
|
||||
remote: {
|
||||
url: "j_check_dup.php",
|
||||
type: "post",
|
||||
data: {
|
||||
type:'username',
|
||||
'value':function(){
|
||||
return $('#username').val();
|
||||
}
|
||||
},
|
||||
dataType: 'json'
|
||||
}
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 6
|
||||
},
|
||||
confirm_password: {
|
||||
required: true,
|
||||
minlength: 6,
|
||||
equalTo: "#password"
|
||||
},
|
||||
nickname:{
|
||||
required: true,
|
||||
maxlength: 9,
|
||||
remote: {
|
||||
url: "j_check_dup.php",
|
||||
type: "post",
|
||||
data: {
|
||||
type:'nickname',
|
||||
'value':function(){
|
||||
return $('#nickname').val();
|
||||
}
|
||||
},
|
||||
dataType: 'json'
|
||||
}
|
||||
},
|
||||
secret_agree: "required",
|
||||
secret_agree2: "required"
|
||||
},
|
||||
messages: {
|
||||
username: {
|
||||
required: "유저명을 입력해주세요",
|
||||
minlength: "{0}글자 이상 입력하셔야 합니다",
|
||||
maxlength: '{0}자를 넘을 수 없습니다'
|
||||
},
|
||||
password: {
|
||||
required: "비밀번호를 입력해주세요",
|
||||
minlength: "비밀번호는 적어도 {0}글자 이상이어야 합니다"
|
||||
},
|
||||
confirm_password: {
|
||||
required: "비밀번호를 입력해주세요",
|
||||
minlength: "비밀번호는 적어도 {0}글자 이상이어야 합니다",
|
||||
equalTo: "비밀번호가 일치하지 않습니다"
|
||||
},
|
||||
nickname: {
|
||||
required: "닉네임을 입력해주세요",
|
||||
maxlength: '닉네임은 {0}자를 넘을 수 없습니다'
|
||||
},
|
||||
secret_agree: "동의해야만 가입하실 수 있습니다.",
|
||||
secret_agree2: "동의해야만 가입하실 수 있습니다."
|
||||
},
|
||||
errorElement: "div",
|
||||
errorPlacement: function ( error, element ) {
|
||||
// Add the `help-block` class to the error element
|
||||
error.addClass( "invalid-feedback" );
|
||||
|
||||
if ( element.prop( "type" ) === "checkbox" ) {
|
||||
error.insertAfter( element.parent( "label" ) );
|
||||
} else {
|
||||
error.insertAfter( element );
|
||||
}
|
||||
},
|
||||
highlight: function ( element, errorClass, validClass ) {
|
||||
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
|
||||
},
|
||||
unhighlight: function (element, errorClass, validClass) {
|
||||
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
|
||||
}
|
||||
} );
|
||||
|
||||
$( "#main_form" ).submit(function(){
|
||||
if(!$("#main_form").valid()){
|
||||
return;
|
||||
}
|
||||
var raw_password = $('#password').val();
|
||||
var salt = $('#global_salt').val();
|
||||
console.log(salt + raw_password + salt);
|
||||
var hash_pw = sha512(salt + raw_password + salt);
|
||||
|
||||
$.post({
|
||||
url:'j_join_process.php',
|
||||
dataType:'json',
|
||||
data:{
|
||||
'secret_agree':$('#secret_agree').prop("checked"),
|
||||
'secret_agree2':$('#secret_agree2').prop("checked"),
|
||||
'third_use':$('#third_use').prop("checked"),
|
||||
'username':$('#username').val(),
|
||||
'password':hash_pw,
|
||||
'nickname':$('#nickname').val(),
|
||||
|
||||
}
|
||||
}).then(function(obj){
|
||||
if(!obj.result){
|
||||
alert(obj.reason);
|
||||
}
|
||||
else{
|
||||
alert('회원 등록되었습니다.\n첫 로그인 과정에서 인증 코드를 입력하는 것으로 계정이 활성화됩니다.');
|
||||
}
|
||||
|
||||
window.location.href = "../";
|
||||
|
||||
});
|
||||
console.log('Yes!');
|
||||
return false;
|
||||
});
|
||||
} );
|
||||
|
||||
|
||||
$(function($){
|
||||
$.get('../terms.1.html').then(function(txt){
|
||||
$('#terms1').html(txt);
|
||||
});
|
||||
|
||||
$.get('../terms.2.html').then(function(txt){
|
||||
$('#terms2').html(txt);
|
||||
});
|
||||
});
|
||||
+9
-12
@@ -28,11 +28,8 @@ if($canJoin != 'Y'){
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>회원가입</title>
|
||||
<?=WebUtil::printJS('../e_lib/jquery-3.3.1.min.js')?>
|
||||
<?=WebUtil::printJS('../e_lib/bootstrap.bundle.min.js')?>
|
||||
<?=WebUtil::printJS('../e_lib/jquery.validate.min.js')?>
|
||||
<?=WebUtil::printJS('../e_lib/sha512.min.js')?>
|
||||
<?=WebUtil::printJS('../js/join.js')?>
|
||||
<?=WebUtil::printJS('../dist_js/vendors.js')?>
|
||||
<?=WebUtil::printJS('../dist_js/join.js')?>
|
||||
<?=WebUtil::printCSS('../e_lib/bootstrap.min.css')?>
|
||||
<?=WebUtil::printCSS('../css/login.css')?>
|
||||
</head>
|
||||
@@ -44,12 +41,12 @@ if($canJoin != 'Y'){
|
||||
<div class="card">
|
||||
<h3 class="card-header">
|
||||
회원가입
|
||||
</h3>
|
||||
</h3>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<form id="main_form" method="post" action="#">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="username" class="col-sm-3 col-form-label">계정명</label>
|
||||
@@ -58,7 +55,7 @@ if($canJoin != 'Y'){
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="password" class="col-sm-3 col-form-label">비밀번호</label>
|
||||
<div class="col-sm-9">
|
||||
@@ -85,7 +82,7 @@ if($canJoin != 'Y'){
|
||||
<div class="col-sm-9">
|
||||
<div class="card">
|
||||
<div class="card-body terms" id="terms1">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
@@ -103,7 +100,7 @@ if($canJoin != 'Y'){
|
||||
<div class="col-sm-9">
|
||||
<div class="card">
|
||||
<div class="card-body terms" id="terms2">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
|
||||
+181
@@ -0,0 +1,181 @@
|
||||
import $ from 'jquery';
|
||||
import axios from 'axios';
|
||||
import { Rules } from 'async-validator';
|
||||
import { JQValidateForm } from '../hwe/ts/util/jqValidateForm';
|
||||
import { convertFormData } from '../hwe/ts/util/convertFormData';
|
||||
import { InvalidResponse } from '../hwe/ts/defs';
|
||||
import { setAxiosXMLHttpRequest } from '../hwe/ts/util/setAxiosXMLHttpRequest';
|
||||
import { unwrap_any } from '../hwe/ts/util//unwrap_any';
|
||||
import { sha512 } from 'js-sha512';
|
||||
import { isString } from 'lodash';
|
||||
|
||||
$(async function () {
|
||||
setAxiosXMLHttpRequest();
|
||||
|
||||
const terms1P = axios('../terms.1.html');
|
||||
const terms2P = axios('../terms.2.html');
|
||||
|
||||
const descriptor: Rules = {
|
||||
username: {
|
||||
required: true,
|
||||
min: 4,
|
||||
max: 64,
|
||||
type: 'string',
|
||||
asyncValidator: async (rule, value: string) => {
|
||||
const response = await axios({
|
||||
url: 'j_check_dup.php',
|
||||
method: 'post',
|
||||
responseType: 'json',
|
||||
data: convertFormData({
|
||||
type: 'username',
|
||||
value: value,
|
||||
})
|
||||
});
|
||||
const isValid: boolean|string = response.data;
|
||||
if (isString(isValid)) {
|
||||
throw new Error(isValid);
|
||||
}
|
||||
},
|
||||
options: {//FIXME: options.messages가 동작하지 않는다?
|
||||
messages: {
|
||||
required: "유저명을 입력해주세요",
|
||||
string: {
|
||||
min: (v, l) => `${l}글자 이상 입력하셔야 합니다`,
|
||||
max: (v, l) => `${l}자를 넘을 수 없습니다`,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
type: 'string',
|
||||
min: 6,
|
||||
options: {
|
||||
messages: {
|
||||
required: "비밀번호를 입력해주세요",
|
||||
string: {
|
||||
min: (v, l) => `비밀번호는 적어도 ${l}글자 이상이어야 합니다`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
confirm_password: {
|
||||
required: true,
|
||||
type: 'string',
|
||||
min: 6,
|
||||
validator: (rule, value: string, _callback, source) => {
|
||||
console.log(value);
|
||||
if (value != (source.password ?? '')) {
|
||||
return new Error('비밀번호가 일치하지 않습니다');
|
||||
}
|
||||
return true;
|
||||
},
|
||||
options: {
|
||||
messages: {
|
||||
required: "비밀번호를 입력해주세요",
|
||||
string: {
|
||||
min: (v, l) => `비밀번호는 적어도 ${l}글자 이상이어야 합니다`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
nickname: {
|
||||
required: true,
|
||||
max: 9,
|
||||
asyncValidator: async (rule, value: string) => {
|
||||
const response = await axios({
|
||||
url: 'j_check_dup.php',
|
||||
method: 'post',
|
||||
responseType: 'json',
|
||||
data: convertFormData({
|
||||
type: 'nickname',
|
||||
value: value,
|
||||
})
|
||||
});
|
||||
const isValid: boolean|string = response.data;
|
||||
if (isString(isValid)) {
|
||||
throw new Error(isValid);
|
||||
}
|
||||
},
|
||||
options: {
|
||||
messages: {
|
||||
required: "유저명을 입력해주세요",
|
||||
string: {
|
||||
max: (v, l) => `닉네임은 ${l}자를 넘을 수 없습니다`,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
secret_agree: {
|
||||
required: true,
|
||||
transform: (v)=>v=='on',
|
||||
type: 'enum',
|
||||
enum: [true],
|
||||
message: '동의해야만 가입하실 수 있습니다.',
|
||||
},
|
||||
secret_agree2: {
|
||||
required: true,
|
||||
transform: (v)=>v=='on',
|
||||
type: 'enum',
|
||||
enum: [true],
|
||||
message: '동의해야만 가입하실 수 있습니다.',
|
||||
},
|
||||
third_use: {
|
||||
required: true,
|
||||
transform: (v)=>v=='on',
|
||||
type: 'boolean'
|
||||
}
|
||||
}
|
||||
const validator = new JQValidateForm($('#main_form'), descriptor);
|
||||
validator.installChangeHandler();
|
||||
|
||||
$("#main_form").on('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const values = await validator.validate();
|
||||
if (values === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const raw_password = values.password;
|
||||
const salt = unwrap_any<string>($('#global_salt').val());
|
||||
console.log(salt + raw_password + salt);
|
||||
const hash_pw = sha512(salt + raw_password + salt);
|
||||
|
||||
let result: InvalidResponse;
|
||||
|
||||
try {
|
||||
const response = await axios({
|
||||
url: 'j_join_process.php',
|
||||
responseType: 'json',
|
||||
method: 'post',
|
||||
data: convertFormData({
|
||||
secret_agree: values.secret_agree,
|
||||
secret_agree2: values.secret_agree2,
|
||||
third_use: values.third_use,
|
||||
username: values.username,
|
||||
password: hash_pw,
|
||||
nickname: values.nickname,
|
||||
})
|
||||
});
|
||||
result = response.data;
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
alert(`실패했습니다: ${e}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!result.result) {
|
||||
alert(result.reason);
|
||||
window.location.href = "../";
|
||||
return;
|
||||
}
|
||||
|
||||
alert('회원 등록되었습니다.\n첫 로그인 과정에서 인증 코드를 입력하는 것으로 계정이 활성화됩니다.');
|
||||
window.location.href = "../";
|
||||
});
|
||||
|
||||
$('#terms1').html((await terms1P).data);
|
||||
$('#terms2').html((await terms2P).data);
|
||||
});
|
||||
@@ -116,6 +116,7 @@ module.exports = (env) => {
|
||||
'entrance': './ts/entrance.ts',
|
||||
'user_info': './ts/user_info.ts',
|
||||
'admin_member': './ts/admin_member.ts',
|
||||
'join': './ts/join.ts',
|
||||
},
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
|
||||
Reference in New Issue
Block a user