diff --git a/hwe/ts/util/jqValidateForm.ts b/hwe/ts/util/jqValidateForm.ts index 4e12e7ac..8a24c2da 100644 --- a/hwe/ts/util/jqValidateForm.ts +++ b/hwe/ts/util/jqValidateForm.ts @@ -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; diff --git a/js/join.js b/js/join.js deleted file mode 100644 index acddf6b6..00000000 --- a/js/join.js +++ /dev/null @@ -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); - }); -}); \ No newline at end of file diff --git a/oauth_kakao/join.php b/oauth_kakao/join.php index d3094189..8d993cca 100644 --- a/oauth_kakao/join.php +++ b/oauth_kakao/join.php @@ -28,11 +28,8 @@ if($canJoin != 'Y'){ 회원가입 - - - - - + + @@ -44,12 +41,12 @@ if($canJoin != 'Y'){

회원가입 -

+
- +
- - + +
@@ -58,7 +55,7 @@ if($canJoin != 'Y'){
- +
@@ -85,7 +82,7 @@ if($canJoin != 'Y'){
- +
@@ -103,7 +100,7 @@ if($canJoin != 'Y'){
- +
diff --git a/ts/join.ts b/ts/join.ts new file mode 100644 index 00000000..1abffc1e --- /dev/null +++ b/ts/join.ts @@ -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($('#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); +}); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 2d07a20a..1d64b4c9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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',