js2ts: join user

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<HTMLElement>;

js/join.js

@@ -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);
-    });
-});

oauth_kakao/join.php

@@ -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('../dist_js/vendors.js')?>
-    <?=WebUtil::printJS('../e_lib/bootstrap.bundle.min.js')?>
+    <?=WebUtil::printJS('../dist_js/join.js')?>
-    <?=WebUtil::printJS('../e_lib/jquery.validate.min.js')?>
-    <?=WebUtil::printJS('../e_lib/sha512.min.js')?>
-    <?=WebUtil::printJS('../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">

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<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);
+});

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',