js2ts: index(login)

- fix-workaround: popper 로드

hwe/ts/battle_simulator.ts

@@ -1,4 +1,6 @@
 import $ from 'jquery';
+import Popper from 'popper.js';
+(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import { DateTime } from 'luxon';
 import download from 'downloadjs';

hwe/ts/common_legacy.ts

@@ -1,6 +1,8 @@
 import { unwrap } from "./util/unwrap";
 
 import $ from "jquery";
+import Popper from 'popper.js';
+(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 
 import axios from "axios";

hwe/ts/install.ts

@@ -1,4 +1,6 @@
 import $ from "jquery";
+import Popper from 'popper.js';
+(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import { setAxiosXMLHttpRequest } from "./util/setAxiosXMLHttpRequest";
 import axios from "axios";

hwe/ts/recent_map.ts

@@ -1,4 +1,6 @@
 import $ from 'jquery';
+import Popper from 'popper.js';
+(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import { reloadWorldMap } from './map';
 

index.php

@@ -21,19 +21,19 @@ if ($session->isLoggedIn()) {
 
 $runningServer = null;
 
-foreach(ServConfig::getServerList() as $setting){
+foreach (ServConfig::getServerList() as $setting) {
-    if(!$setting->isExists()){
+    if (!$setting->isExists()) {
         continue;
     }
-    if(!$setting->isRunning()){
+    if (!$setting->isRunning()) {
         continue;
     }
     $runningServer = [
-        'color'=>$setting->getColor(),
+        'color' => $setting->getColor(),
-        'korName'=>$setting->getKorName(),
+        'korName' => $setting->getKorName(),
-        'name'=>$setting->getShortName(),
+        'name' => $setting->getShortName(),
-        'exists'=>$setting->isExists(),
+        'exists' => $setting->isExists(),
-        'enable'=>$setting->isRunning()
+        'enable' => $setting->isRunning()
     ];
     break;
 }
@@ -47,105 +47,24 @@ foreach(ServConfig::getServerList() as $setting){
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>삼국지 모의전투 HiDCHe</title>
+    <script>
+        var kakao_oauth_client_id = '<?= KakaoKey::REST_KEY ?>';
+        var kakao_oauth_redirect_uri = '<?= KakaoKey::REDIRECT_URI ?>';
+    </script>
     <?= WebUtil::printJS('d_shared/common_path.js') ?>
     <?= WebUtil::printJS('dist_js/vendors.js') ?>
-    <?= WebUtil::printJS('dist_js/common.js') ?>
+    <?= WebUtil::printJS('dist_js/login.js') ?>
 
     <?= WebUtil::printCSS('d_shared/common.css') ?>
     <?= WebUtil::printCSS('e_lib/bootstrap.min.css') ?>
     <?= WebUtil::printCSS('css/login.css') ?>
-    <?= WebUtil::printJS('e_lib/jquery.validate.min.js') ?>
-    <?= WebUtil::printJS('e_lib/sha512.min.js') ?>
-    <?= WebUtil::printJS('js/login.js') ?>
     <meta name="description" content="실시간으로 진행되는 삼국지 웹게임(삼모전)입니다">
     <meta name="keywords" content="삼국지,삼모전,웹게임,힏체,힏체섭,히데체,히데체섭,HiDCHe,체섭">
     <meta property="og:type" content="website">
     <meta property="og:title" content="삼국지 모의전투 HiDCHe">
     <meta property="og:description" content="실시간으로 진행되는 삼국지 웹게임(삼모전)입니다">
     <meta property="og:url" content="https://sam.hided.net">
-    <script>
-        var oauthMode = null;
 
-        function getOAuthToken(mode, scope_list) {
-            if (mode === undefined) {
-                mode = 'login';
-            }
-            if (scope_list === undefined) {
-                scope_list = null;
-            }
-            oauthMode = mode;
-            var url = 'https://kauth.kakao.com/oauth/authorize?' +
-                'client_id=<?= KakaoKey::REST_KEY ?>&' +
-                'redirect_uri=<?= KakaoKey::REDIRECT_URI ?>&' +
-                'response_type=code';
-            if (Array.isArray(scope_list)) {
-                url += '&scope=' + scope_list.join(',');
-            } else if (typeof scope_list === 'string' || scope_list instanceof String) {
-                url += '&scope=' + scope_list;
-            }
-
-            window.open(url, "KakaoAccountLogin", "width=600,height=450,resizable=yes,scrollbars=yes");
-        }
-
-        function sendTempPasswordToKakaoTalk() {
-            $.post({
-                url: 'oauth_kakao/j_login_oauth.php',
-                dataType: 'json'
-            }).then(function(obj) {
-                var t = $.Deferred();
-                if (!obj.result) {
-                    t.reject();
-                }
-                return $.post({
-                    url: 'oauth_kakao/j_change_pw.php',
-                    dataType: 'json'
-                });
-            }).then(function(obj) {
-                if (!obj.result) {
-                    alert(obj.reason);
-                } else {
-                    alert('임시 비밀번호가 카카오톡으로 전송되었습니다.');
-                }
-            });
-        }
-
-        function doLoginUsingOAuth() {
-            $.post({
-                url: 'oauth_kakao/j_login_oauth.php',
-                dataType: 'json'
-            }).then(function(obj) {
-                if (obj.result) {
-                    window.location.href = "./";
-                    return;
-                }
-                if (!obj.reqOTP) {
-                    alert(obj.reason);
-                    return;
-                }
-                $('#modalOTP').modal().on('shown.bs.modal', function() {
-                    $('#otp_code').focus();
-                });
-
-            });
-        }
-
-        function postOAuthResult(result) {
-            if (result == 'join') {
-                window.location.href = 'oauth_kakao/join.php';
-            } else if (result == 'req_email') {
-                alert('이메일 정보 공유를 허가해 주셔야 합니다.');
-            } else if (result == 'login') {
-                console.log('로그인모드');
-                if (oauthMode == 'change_pw') {
-                    sendTempPasswordToKakaoTalk();
-                } else {
-                    doLoginUsingOAuth();
-                }
-            } else {
-                alert('예외 발생!');
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -160,64 +79,65 @@ foreach(ServConfig::getServerList() as $setting){
             </ul>
         </div>
     </nav>
-        <div class="container" style="margin-top:120px;">
+    <div class="container" style="margin-top:120px;">
-            <h1 class="row justify-content-md-center">삼국지 모의전투 HiDCHe</h1>
+        <h1 class="row justify-content-md-center">삼국지 모의전투 HiDCHe</h1>
-            <div class="row justify-content-md-center">
+        <div class="row justify-content-md-center">
-                <div class="col" style="max-width:450px;">
+            <div class="col" style="max-width:450px;">
-                    <div class="card" id="login_card">
+                <div class="card" id="login_card">
-                        <h3 class="card-header">
+                    <h3 class="card-header">
-                            로그인
+                        로그인
-                        </h3>
+                    </h3>
-                        <div class="card-body">
+                    <div class="card-body">
 
-                            <form id="main_form" method="post" action="#">
+                        <form id="main_form" method="post" action="#">
-                                <div class="form-group row">
+                            <div class="form-group row">
-                                    <label for="username" class="col-5 col-md-4 col-form-label">계정명</label>
+                                <label for="username" class="col-5 col-md-4 col-form-label">계정명</label>
-                                    <div class="col-7 col-md-8">
+                                <div class="col-7 col-md-8">
-                                        <input autocomplete="username" type="text" class="form-control" name="username" id="username" autofocus="autofocus" placeholder="계정명" />
+                                    <input autocomplete="username" type="text" class="form-control" name="username" id="username" autofocus="autofocus" placeholder="계정명" />
-                                    </div>
                                 </div>
+                            </div>
 
 
-                                <div class="form-group row">
+                            <div class="form-group row">
-                                    <label for="password" class="col-5 col-md-4 col-form-label">비밀번호</label>
+                                <label for="password" class="col-5 col-md-4 col-form-label">비밀번호</label>
-                                    <div class="col-7 col-md-8">
+                                <div class="col-7 col-md-8">
-                                        <input autocomplete="current-password" type="password" class="form-control" name="password" id="password" placeholder="비밀번호" />
+                                    <input autocomplete="current-password" type="password" class="form-control" name="password" id="password" placeholder="비밀번호" />
-                                    </div>
                                 </div>
+                            </div>
 
-                                <input type="hidden" id="global_salt" name="global_salt" value="<?= RootDB::getGlobalSalt() ?>">
+                            <input type="hidden" id="global_salt" name="global_salt" value="<?= RootDB::getGlobalSalt() ?>">
-                                <div class="form-group row">
+                            <div class="form-group row">
-                                    <div class="col-5 col-md-4 " style="position:relative;"><button type="button" onclick="getOAuthToken('login', ['account_email','talk_message']);" id="btn_kakao_login" title="카카오톡으로 가입&amp;로그인"></button></div>
+                                <div class="col-5 col-md-4 " style="position:relative;"><button type="button" id="btn_kakao_login" title="카카오톡으로 가입&amp;로그인"></button></div>
-                                    <div class="col-7 col-md-8">
+                                <div class="col-7 col-md-8">
-                                        <div class="btn-group btn-group-lg d-flex login_btn_group" role="group">
+                                    <div class="btn-group btn-group-lg d-flex login_btn_group" role="group">
-                                            <button type="submit" class="btn btn-primary login-button w-100">로그인</button>
+                                        <button type="submit" class="btn btn-primary login-button w-100">로그인</button>
-                                            <div class="btn-group" role="group">
+                                        <div class="btn-group" role="group">
-                                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </button>
+                                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">추가 기능</span></button>
-                                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
+                                            <div class="dropdown-menu dropdown-menu-right">
-                                                    <a class="dropdown-item" href="javascript:getOAuthToken('change_pw', 'talk_message');">비밀번호 초기화</a>
+                                                <a class="dropdown-item" id='oauth_change_pw' href="#">비밀번호 초기화</a>
-                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </form>
+                            </div>
-                        </div>
+                        </form>
                     </div>
                 </div>
             </div>
-<?php if($runningServer): ?>
+        </div>
+        <?php if ($runningServer) : ?>
             <div class="row justify-content-md-center" style='margin-top:20px;'>
                 <div class="col" style="max-width:750px;">
-                    <iframe id="running_map" src="<?=$runningServer['name']?>/recent_map.php"></iframe>
+                    <iframe id="running_map" src="<?= $runningServer['name'] ?>/recent_map.php"></iframe>
                 </div>
             </div>
-<?php endif; ?>
+        <?php endif; ?>
-        </div>
+    </div>
-        <div id="bottom_box">
+    <div id="bottom_box">
-            <div class="container"><a href="terms.2.html">개인정보처리방침</a> &amp; <a href="terms.1.html">이용약관</a><br>© 2020 • HideD
+        <div class="container"><a href="terms.2.html">개인정보처리방침</a> &amp; <a href="terms.1.html">이용약관</a><br>© 2020 • HideD
-                <br>크롬과 파이어폭스에 최적화되어있습니다.</div>
+            <br>크롬과 파이어폭스에 최적화되어있습니다.
         </div>
+    </div>
 
     <div class="modal fade" id="modalOTP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">

oauth_kakao/j_check_OTP.php

@@ -90,5 +90,5 @@ RootDB::db()->update('member', [
 Json::die([
     'result'=>true,
     'reset'=>false,
-    'reason'=>"로그인을 성공했습니다. {$tokenValidUntil}까지 유효합니다."
+    'validUntil'=>$tokenValidUntil,
 ]);

ts/login.ts

@@ -0,0 +1,296 @@
+import $ from 'jquery';
+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 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';
+import { sha512 } from 'js-sha512';
+import { unwrap } from '../hwe/ts/util/unwrap';
+import { InvalidResponse } from './defs';
+
+
+type LoginResponse = {
+    result: true,
+} | {
+    result: false,
+    reqOTP: boolean,
+    reason: string,
+}
+
+type OTPResponse = {
+    result: true,
+    validUntil: string,
+} | {
+    result: false,
+    reset: boolean,
+    reason: string,
+}
+
+declare global {
+    interface Window {
+        getOAuthToken: (mode: string, scope_list: string[]) => void;
+        postOAuthResult: (mode: string) => void;
+    }
+}
+
+declare const kakao_oauth_client_id: string;
+declare const kakao_oauth_redirect_uri: string;
+
+let oauthMode: string | null = null;
+
+function getOAuthToken(mode: string, scope_list?: string[] | string) {
+    if (mode === undefined) {
+        mode = 'login';
+    }
+    oauthMode = mode;
+    let url = `https://kauth.kakao.com/oauth/authorize?client_id=${kakao_oauth_client_id}&redirect_uri=${kakao_oauth_redirect_uri}&response_type=code`;
+    if (Array.isArray(scope_list)) {
+        url += `&scope=${scope_list.join(',')}`;
+    } else if (typeof scope_list === 'string') {
+        url += `&scope=${scope_list}`;
+    }
+
+    window.open(url, "KakaoAccountLogin", "width=600,height=450,resizable=yes,scrollbars=yes");
+}
+window.getOAuthToken = getOAuthToken;
+
+async function sendTempPasswordToKakaoTalk(): Promise<void> {
+
+    let result: InvalidResponse;
+
+    try {
+        const response = await axios({
+            url: 'oauth_kakao/j_login_oauth.php',
+            responseType: 'json',
+            method: 'post',
+        });
+        result = response.data;
+    }
+    catch (e) {
+        console.error(e);
+        alert(`실패했습니다_login: ${e}`);
+        return;
+    }
+
+    if (!result.result) {
+        alert(result.reason);
+        return;
+    }
+
+    try {
+        const response = await axios({
+            url: 'oauth_kakao/j_change_pw.php',
+            responseType: 'json',
+            method: 'post',
+        });
+        result = response.data;
+    }
+    catch (e) {
+        console.error(e);
+        alert(`실패했습니다_pw: ${e}`);
+        return;
+    }
+
+    alert('임시 비밀번호가 카카오톡으로 전송되었습니다.');
+}
+
+async function doLoginUsingOAuth() {
+    let result: LoginResponse;
+
+    try {
+        const response = await axios({
+            url: 'oauth_kakao/j_login_oauth.php',
+            responseType: 'json',
+            method: 'post',
+        });
+        result = response.data;
+    }
+    catch (e) {
+        console.error(e);
+        alert(`실패했습니다_login: ${e}`);
+        return;
+    }
+
+    if (result.result) {
+        window.location.href = "./";
+        return;
+    }
+
+    if (!result.reqOTP) {
+        alert(result.reason);
+        return;
+    }
+
+    const $modal = $('#modalOTP').modal();
+    $modal.on('shown.bs.modal', function () {
+        $('#otp_code').trigger('focus');
+    });
+}
+
+function postOAuthResult(mode: string) {
+    if (mode == 'join') {
+        window.location.href = 'oauth_kakao/join.php';
+        return;
+    }
+
+    if (mode == 'req_email') {
+        alert('이메일 정보 공유를 허가해 주셔야 합니다.');
+        return;
+    }
+
+    if (mode == 'login') {
+        console.log('로그인모드');
+        if (oauthMode == 'change_pw') {
+            void sendTempPasswordToKakaoTalk();
+        } else {
+            void doLoginUsingOAuth();
+        }
+        return;
+    }
+
+    alert('예외 발생!');
+}
+window.postOAuthResult = postOAuthResult;
+
+
+$(function ($) {
+    setAxiosXMLHttpRequest();
+
+    const descriptor: Rules = {
+        username: {
+            required: true,
+            type: 'string',
+            message: '유저명을 입력해주세요',
+        },
+        password: {
+            required: true,
+            type: 'string',
+            message: '비밀번호를 입력해주세요'
+        }
+    };
+
+    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());
+        const hash_pw = sha512(salt + raw_password + salt);
+
+        let result: LoginResponse;
+
+        try {
+            const response = await axios({
+                url: 'j_login.php',
+                responseType: 'json',
+                method: 'post',
+                data: convertFormData({
+                    username: values.username,
+                    password: hash_pw,
+                })
+            });
+            result = response.data;
+        }
+        catch (e) {
+            console.error(e);
+            alert(`실패했습니다: ${e}`);
+            return;
+        }
+
+
+        if (result.result) {
+            window.location.href = "./";
+            return;
+        }
+
+        if (!result.reqOTP) {
+            alert(result.reason);
+            return;
+        }
+
+        const $modal = $('#modalOTP').modal();
+        $modal.on('shown.bs.modal', function () {
+            $('#otp_code').trigger('focus');
+        });
+    });
+
+    $('#otp_form').on('submit', async function (e) {
+        e.preventDefault();
+
+        let result: OTPResponse;
+
+        try {
+            const response = await axios({
+                url: 'oauth_kakao/j_check_OTP.php',
+                responseType: 'json',
+                method: 'post',
+                data: convertFormData({
+                    otp: unwrap_any<string>($('#otp_code').val()),
+                })
+            });
+            result = response.data;
+        }
+        catch (e) {
+            console.error(e);
+            alert(`실패했습니다: ${e}`);
+            return;
+        }
+
+        if (result.result) {
+            alert(`로그인되었습니다. ${result.validUntil}까지 유효합니다.`);
+            window.location.href = "./";
+            return;
+        }
+
+        alert(result.reason);
+
+        if (result.reset) {
+            $('#modalOTP').modal('hide')
+            return;
+        }
+    });
+
+    $('#oauth_change_pw').on('click', function (e) {
+        e.preventDefault();
+        getOAuthToken('change_pw', 'talk_message');
+    });
+
+    $('#btn_kakao_login').on('click', function(e){
+        e.preventDefault();
+        getOAuthToken('login', ['account_email','talk_message']);
+    })
+
+
+    //TODO: 모바일에서 크기 비례 지도 다시 띄우기?
+    /*
+    if (document.body.clientWidth < 700) {
+        const targetWidth = document.body.clientWidth * 0.9;
+        const scale = targetWidth / 700;
+        const $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 () {
+    const iframe = unwrap(document.querySelector<HTMLIFrameElement>('#running_map'));//TODO: 근황 여러개 볼 수 있도록?
+    const scrollHeight = unwrap(iframe.contentWindow).document.body.scrollHeight;
+    iframe.style.height = `${scrollHeight}px`;
+}

ts/user_info.ts

@@ -1,5 +1,7 @@
 import { setAxiosXMLHttpRequest } from "../hwe/ts/util/setAxiosXMLHttpRequest";
 import $ from 'jquery';
+import Popper from 'popper.js';
+(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import axios from 'axios';
 import { DateTime } from "luxon";

webpack.config.js

@@ -117,6 +117,7 @@ module.exports = (env) => {
             'user_info': './ts/user_info.ts',
             'admin_member': './ts/admin_member.ts',
             'join': './ts/join.ts',
+            'login': './ts/login.ts',
         },
         output: {
             filename: '[name].js',