From d7b1db0081ec8a632dc0bd8ce85944492de0ff86 Mon Sep 17 00:00:00 2001 From: hide_d Date: Thu, 26 Aug 2021 21:10:02 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20jqValidateForm=EC=97=90=20Values=20Type?= =?UTF-8?q?=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hwe/ts/common_deprecated.ts | 3 +- hwe/ts/common_legacy.ts | 60 ----------------- hwe/ts/install.ts | 20 +++++- hwe/ts/install_db.ts | 13 +++- hwe/ts/util/convertFormData.ts | 8 +-- hwe/ts/util/jqValidateForm.ts | 17 +++-- hwe/ts/util/mb_strimwidth.ts | 31 +++++++++ hwe/ts/util/mb_strwidth.ts | 25 ++++++++ js/login.js | 113 --------------------------------- ts/join.ts | 22 +++++-- ts/login.ts | 9 ++- 11 files changed, 122 insertions(+), 199 deletions(-) create mode 100644 hwe/ts/util/mb_strimwidth.ts create mode 100644 hwe/ts/util/mb_strwidth.ts delete mode 100644 js/login.js diff --git a/hwe/ts/common_deprecated.ts b/hwe/ts/common_deprecated.ts index e4be8e5e..7f3797da 100644 --- a/hwe/ts/common_deprecated.ts +++ b/hwe/ts/common_deprecated.ts @@ -1,4 +1,5 @@ -import { activeFlip, mb_strwidth, isBrightColor, getIconPath, errUnknown, errUnknownToast, quickReject, initTooltip } from "./common_legacy"; +import { activeFlip, isBrightColor, getIconPath, errUnknown, errUnknownToast, quickReject, initTooltip } from "./common_legacy"; +import { mb_strwidth } from "./util/mb_strwidth"; import { TemplateEngine } from "./util/TemplateEngine"; import { escapeHtml } from "./legacy/escapeHtml"; import { nl2br } from "./util/nl2br"; diff --git a/hwe/ts/common_legacy.ts b/hwe/ts/common_legacy.ts index 75e692f9..10c06b9b 100644 --- a/hwe/ts/common_legacy.ts +++ b/hwe/ts/common_legacy.ts @@ -8,66 +8,6 @@ import 'bootstrap'; import axios from "axios"; axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; -//TODO: X-Requested-With 믿지 말자. - - - -//https://gist.github.com/demouth/3217440 -/** - * mb_strwidth - * @see http://php.net/manual/function.mb-strwidth.php - */ -export function mb_strwidth(str: string): number { - const l = str.length; - let length = 0; - for (let i = 0; i < l; i++) { - const c = str.charCodeAt(i); - if (0x0000 <= c && c <= 0x0019) { - length += 0; - } else if (0x0020 <= c && c <= 0x1FFF) { - length += 1; - } else if (0x2000 <= c && c <= 0xFF60) { - length += 2; - } else if (0xFF61 <= c && c <= 0xFF9F) { - length += 1; - } else if (0xFFA0 <= c) { - length += 2; - } - } - return length; -} - - -/** - * mb_strimwidth - * @param String - * @param int - * @param int - * @param String - * @return String - * @see http://www.php.net/manual/function.mb-strimwidth.php - */ -export function mb_strimwidth(str: string, start: number, width: number, trimmarker = ''): string { - const trimmakerWidth = mb_strwidth(trimmarker); - const l = str.length; - let trimmedLength = 0; - const trimmedStr: string[] = []; - for (let i = start; i < l; i++) { - const c = str.charAt(i); - const charWidth = mb_strwidth(c); - const next = str.charAt(i + 1); - const nextWidth = mb_strwidth(next); - - trimmedLength += charWidth; - trimmedStr.push(c); - if (trimmedLength + trimmakerWidth + nextWidth > width) { - trimmedStr.push(trimmarker); - break; - } - } - return trimmedStr.join(''); -} - /** * object의 array를 id를 key로 삼는 object로 재 변환 */ diff --git a/hwe/ts/install.ts b/hwe/ts/install.ts index 6e2fd1ed..86795fc0 100644 --- a/hwe/ts/install.ts +++ b/hwe/ts/install.ts @@ -5,8 +5,7 @@ import 'bootstrap'; import { setAxiosXMLHttpRequest } from "./util/setAxiosXMLHttpRequest"; import axios from "axios"; import { InvalidResponse } from "./defs"; -import { Rules } from "async-validator"; -import { JQValidateForm } from "./util/jqValidateForm"; +import { JQValidateForm, NamedRules } from "./util/jqValidateForm"; import { convertFormData } from "./util/convertFormData"; type ResponseScenarioItem = { @@ -130,7 +129,22 @@ function scenarioPreview() { }); } -const descriptor: Rules = { +type InstallFormType = { + turnterm: number, + sync: 1|0, + scenario: number, + fiction: number, + extend: number, + npcmode: number, + show_img_level: number, + tournament_trig: number, + join_mode: number, + autorun_user: string[], + autorun_user_minutes: number, + reserve_open?: string, + pre_reserve_open?: string, +} +const descriptor: NamedRules = { turnterm: { required: true, type: "enum", diff --git a/hwe/ts/install_db.ts b/hwe/ts/install_db.ts index dcfe0435..f8c1e48e 100644 --- a/hwe/ts/install_db.ts +++ b/hwe/ts/install_db.ts @@ -1,8 +1,7 @@ import axios from 'axios'; import jQuery from 'jquery'; -import { Rules } from 'async-validator'; -import { JQValidateForm } from './util/jqValidateForm'; +import { JQValidateForm, NamedRules } from './util/jqValidateForm'; import { convertFormData } from './util/convertFormData'; import { InvalidResponse } from './defs'; import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest'; @@ -10,7 +9,15 @@ import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest'; jQuery(async function ($) { setAxiosXMLHttpRequest(); - const descriptor: Rules = { + type FormValue = { + full_reset: string, + db_host: string, + db_port: number, + db_id: string, + db_pw: string, + db_name: string, + } + const descriptor: NamedRules = { full_reset: { required: true, }, diff --git a/hwe/ts/util/convertFormData.ts b/hwe/ts/util/convertFormData.ts index 2c6d6a48..614c4029 100644 --- a/hwe/ts/util/convertFormData.ts +++ b/hwe/ts/util/convertFormData.ts @@ -3,7 +3,7 @@ import { isArray, isString, isNumber, isBoolean } from "lodash"; export function convertFormData(values: Record): FormData{ const formData = new FormData(); - const simpleConv = (v: unknown):string=>{ + const simpleConv = (v: unknown, key: string):string=>{ if(isString(v)){ return v; } @@ -16,19 +16,19 @@ export function convertFormData(values: Record, $target?: JQuery)=>[Record, Map] } -export class JQValidateForm { +type DefaultFormDataType = Record; + +export type NamedRules> = { + [v in keyof T]: Rule +} + +export class JQValidateForm { + public readonly validator: Schema; public readonly inputs: JQuery; - constructor(public readonly target: JQuery, public readonly rule: Rules, public readonly option?:Option) { + constructor(public readonly target: JQuery, public readonly rule: NamedRules, public readonly option?:Option) { this.validator = new Schema(rule); this.inputs = target.find(':input'); } @@ -29,7 +36,7 @@ export class JQValidateForm { return this; } - public async validate(): Promise { + public async validate(): Promise { if(this.option?.preParse !== undefined){ this.option.preParse(this.target); } @@ -106,6 +113,6 @@ export class JQValidateForm { } this.clearErrMsg(); this.inputs.addClass('is-valid'); - return validateResult; + return validateResult as TypedValue; } } \ No newline at end of file diff --git a/hwe/ts/util/mb_strimwidth.ts b/hwe/ts/util/mb_strimwidth.ts new file mode 100644 index 00000000..ae13c34d --- /dev/null +++ b/hwe/ts/util/mb_strimwidth.ts @@ -0,0 +1,31 @@ +import { mb_strwidth } from "./mb_strwidth"; + +/** + * mb_strimwidth + * @param String + * @param int + * @param int + * @param String + * @return String + * @see http://www.php.net/manual/function.mb-strimwidth.php + */ +export function mb_strimwidth(str: string, start: number, width: number, trimmarker = ''): string { + const trimmakerWidth = mb_strwidth(trimmarker); + const l = str.length; + let trimmedLength = 0; + const trimmedStr: string[] = []; + for (let i = start; i < l; i++) { + const c = str.charAt(i); + const charWidth = mb_strwidth(c); + const next = str.charAt(i + 1); + const nextWidth = mb_strwidth(next); + + trimmedLength += charWidth; + trimmedStr.push(c); + if (trimmedLength + trimmakerWidth + nextWidth > width) { + trimmedStr.push(trimmarker); + break; + } + } + return trimmedStr.join(''); +} diff --git a/hwe/ts/util/mb_strwidth.ts b/hwe/ts/util/mb_strwidth.ts new file mode 100644 index 00000000..c1013c18 --- /dev/null +++ b/hwe/ts/util/mb_strwidth.ts @@ -0,0 +1,25 @@ +//TODO: X-Requested-With 믿지 말자. +//https://gist.github.com/demouth/3217440 +/** + * mb_strwidth + * @see http://php.net/manual/function.mb-strwidth.php + */ +export function mb_strwidth(str: string): number { + const l = str.length; + let length = 0; + for (let i = 0; i < l; i++) { + const c = str.charCodeAt(i); + if (0x0000 <= c && c <= 0x0019) { + length += 0; + } else if (0x0020 <= c && c <= 0x1FFF) { + length += 1; + } else if (0x2000 <= c && c <= 0xFF60) { + length += 2; + } else if (0xFF61 <= c && c <= 0xFF9F) { + length += 1; + } else if (0xFFA0 <= c) { + length += 2; + } + } + return length; +} diff --git a/js/login.js b/js/login.js deleted file mode 100644 index 6e799884..00000000 --- a/js/login.js +++ /dev/null @@ -1,113 +0,0 @@ -$(document).ready(function () { - $("#main_form").validate({ - rules: { - username: { - required: true - }, - password: { - required: true, - } - }, - messages: { - username: { - required: "유저명을 입력해주세요" - }, - password: { - required: "비밀번호를 입력해주세요" - } - }, - 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 () { - var raw_password = $('#password').val(); - var salt = $('#global_salt').val(); - var hash_pw = sha512(salt + raw_password + salt); - - $.post({ - url: 'j_login.php', - dataType: 'json', - data: { - 'username': $('#username').val(), - 'password': hash_pw - } - }).then(function (obj) { - if (obj.result) { - window.location.href = "./"; - return; - } - if (!obj.reqOTP) { - alert(obj.reason); - return; - } - - var $modal = $('#modalOTP').modal(); - $modal.on('shown.bs.modal', function () { - $('#otp_code').focus(); - }); - - - }); - return false; - }); - - $('#otp_form').submit(function () { - $.post({ - url: 'oauth_kakao/j_check_OTP.php', - dataType: 'json', - data: { - 'otp': $('#otp_code').val(), - } - }).then(function (obj) { - if (obj.result) { - alert(obj.reason); - window.location.href = "./"; - return; - } - - alert(obj.reason); - - if (obj.reset) { - $('#modalOTP').modal('hide') - return; - } - }); - return false; - }); - - - if (document.body.clientWidth < 700) { - var targetWidth = document.body.clientWidth * 0.9; - var scale = targetWidth / 700; - var $map = $('#running_map'); - $map.find('.col').css('max-width', targetWidth); - $map.find('.card').css('width', targetWidth); - $map.find('.map-container').css({ - 'transform-origin': 'top left', - 'transform': 'scale({0}, {0})'.format(scale), - 'height': 500 * scale, - }); - $map.find('.map_body').data('scale', scale); - } -}); - -window.fitIframe = function () { - var iframe = document.querySelector('#running_map'); - iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px'; -} \ No newline at end of file diff --git a/ts/join.ts b/ts/join.ts index 1abffc1e..036923d3 100644 --- a/ts/join.ts +++ b/ts/join.ts @@ -1,13 +1,13 @@ import $ from 'jquery'; import axios from 'axios'; -import { Rules } from 'async-validator'; -import { JQValidateForm } from '../hwe/ts/util/jqValidateForm'; +import { JQValidateForm, NamedRules } 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'; +import { mb_strwidth } from '../hwe/ts/util/mb_strwidth'; $(async function () { setAxiosXMLHttpRequest(); @@ -15,7 +15,16 @@ $(async function () { const terms1P = axios('../terms.1.html'); const terms2P = axios('../terms.2.html'); - const descriptor: Rules = { + type JoinFormType = { + secret_agree: boolean, + secret_agree2: boolean, + third_use: boolean, + username: string, + password: string, + confirm_password: string, + nickname: string, + } + const descriptor: NamedRules = { username: { required: true, min: 4, @@ -81,8 +90,10 @@ $(async function () { }, nickname: { required: true, - max: 9, asyncValidator: async (rule, value: string) => { + if (!value || !isString(value) || mb_strwidth(value) > 18) { + throw new Error(`글자 너비가 알파벳 ${18}자보다 길지 않아야합니다`); + } const response = await axios({ url: 'j_check_dup.php', method: 'post', @@ -100,9 +111,6 @@ $(async function () { options: { messages: { required: "유저명을 입력해주세요", - string: { - max: (v, l) => `닉네임은 ${l}자를 넘을 수 없습니다`, - } } } }, diff --git a/ts/login.ts b/ts/login.ts index adef7b9b..790c027f 100644 --- a/ts/login.ts +++ b/ts/login.ts @@ -3,9 +3,8 @@ import 'popper.js'; import Popper from 'popper.js'; (window as unknown as {Popper:unknown}).Popper = Popper; import 'bootstrap'; -import { JQValidateForm } from '../hwe/ts/util/jqValidateForm'; +import { JQValidateForm, NamedRules } from '../hwe/ts/util/jqValidateForm'; import axios from 'axios'; -import { Rules } from 'async-validator'; import { convertFormData } from '../hwe/ts/util/convertFormData'; import { setAxiosXMLHttpRequest } from '../hwe/ts/util/setAxiosXMLHttpRequest'; import { unwrap_any } from '../hwe/ts/util/unwrap_any'; @@ -161,7 +160,11 @@ window.postOAuthResult = postOAuthResult; $(function ($) { setAxiosXMLHttpRequest(); - const descriptor: Rules = { + type LoginFormType = { + username: string, + password: string, + }; + const descriptor: NamedRules = { username: { required: true, type: 'string',