{% extends "_layout.html" %}

{% block content %}
    <form id="frm_install" method="post" action="{{ url_for('install') }}" autocomplete="off" onsubmit="return frm_install_submit(this);">
        <input type="hidden" name="token" value="">
        <div class="ins_inner">
            <table class="ins_frm">
                <caption>데이터베이스 정보입력</caption>
                <colgroup>
                    <col style="width:150px">
                    <col>
                </colgroup>
                <tbody>
                    <tr>
                        <th scope="row"><label for="db_engine">Engine</label></th>
                        <td>
                            <select id="db_engine" name="db_engine" title="데이터베이스 엔진">
                                <option value="sqlite">SQLite</option>
                                <option value="mysql">MySQL</option>
                                <option value="postgresql">PostgreSQL</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_host">Host</label></th>
                        <td><input type="text" id="db_host" name="db_host" value="localhost" title="데이터베이스 Host"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_port">Port</label></th>
                        <td><input type="text" id="db_port" name="db_port" value="3306" title="데이터베이스 Port"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_user">User</label></th>
                        <td><input type="text" id="db_user" name="db_user" title="데이터베이스 User"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_password">Password</label></th>
                        <td><input type="text" id="db_password" name="db_password" title="데이터베이스 비밀번호"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_name">Database Name</label></th>
                        <td>
                            <input type="text" id="db_name" name="db_name" title="데이터베이스 이름">
                        </td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="db_table_prefix">TABLE명 접두사</label></th>
                        <td>
                            <input type="text" id="db_table_prefix" name="db_table_prefix"  value="g6_" title="TABLE 접두사">
                            <span>TABLE명 접두사는 영문자, 숫자, _ 만 입력 가능합니다.</span>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="re_install">{{ app_name }} 재설치</label></th>
                        <td>
                            <label><input type="checkbox" id="reinstall" name="reinstall" value="1"> 재설치</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        
            <table class="ins_frm">
                <caption>최고관리자 정보입력</caption>
                <colgroup>
                    <col style="width:150px">
                    <col>
                </colgroup>
                <tbody>
                    <tr>
                        <th scope="row"><label for="admin_id">ID</label></th>
                        <td><input type="text" id="admin_id" name="admin_id" value="admin" title="최고관리자 ID"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="admin_password">비밀번호</label></th>
                        <td><input type="password" id="admin_password" name="admin_password" value="" title="최고관리자 비밀번호"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="admin_name">이름</label></th>
                        <td><input type="text" id="admin_name" name="admin_name" value="최고관리자" title="최고관리자 이름"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="admin_email">E-mail</label></th>
                        <td><input type="text" id="admin_email" name="admin_email" value="admin@your-domain.com"title="최고관리자 이메일"></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="re_install">최고관리자 미설정</label></th>
                        <td>
                            <label><input type="checkbox" id="is_skip_admin" name="is_skip_admin" value="1"> 미설정</label>
                            <span>이미 최고관리자 계정이 있을 경우에만 사용하시길 권장합니다.</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="warning" id="warning_reinstall">
                <strong class="st_strong">
                    주의! 이미 동일한 이름의 테이블이 존재한다면, 기존의 자료가 삭제되므로 주의하십시오.
                </strong>
            </div>
            <div class="warning" id="warning_skip_admin">
                <strong class="st_strong">
                    주의! 최고관리자 설정을 하지 않을 경우 관리자 페이지에 바로 접근할 수 없습니다. <br>
                    직접 데이터베이스에 접속하여 최고관리자 계정을 생성/설정해야 합니다.
                </strong>
            </div>
            주의사항을 이해하셨다면 "다음" 버튼을 클릭하여 설치를 계속 진행하십시오.
            <div class="inner_btn">
                <input type="submit" value="다음">
            </div>
        </div>
    </form>
    <script>
    // 데이터베이스 변경 시 입력 폼 표시 여부
    document.getElementById('db_engine').addEventListener('change', (e) => {
        const db_host = document.getElementById('db_host');
        const db_port = document.getElementById('db_port');
        const db_user = document.getElementById('db_user');
        const db_password = document.getElementById('db_password');
        const db_name = document.getElementById('db_name');

        if (e.target.value == 'sqlite') {
            db_host.parentNode.parentNode.style.display = 'none';
            db_port.parentNode.parentNode.style.display = 'none';
            db_user.parentNode.parentNode.style.display = 'none';
            db_password.parentNode.parentNode.style.display = 'none';
            db_name.parentNode.parentNode.style.display = 'none';
        } else {
            db_host.parentNode.parentNode.style.display = '';
            db_port.parentNode.parentNode.style.display = '';
            db_user.parentNode.parentNode.style.display = '';
            db_password.parentNode.parentNode.style.display = '';
            db_name.parentNode.parentNode.style.display = '';
        }
    });

    document.getElementById('reinstall').addEventListener('change', (e) => {
        if (e.target.checked) {
            if (!confirm('재설치를 하시면 기존의 데이터베이스 자료가 전부 삭제됩니다.\n계속하시겠습니까?')) {
                e.target.checked = false;
            } else {
                document.getElementById('warning_reinstall').style.display = 'block';
            }
        } else {
            document.getElementById('warning_reinstall').style.display = 'none';
        }
    });

    document.getElementById('is_skip_admin').addEventListener('change', (e) => {
        if (e.target.checked) {
            if (!confirm('최고관리자 설정을 하지 않으면 관리자페이지 접근이 어렵습니다.\n계속하시겠습니까?')) {
                e.target.checked = false;
            } else {
                document.getElementById('warning_skip_admin').style.display = 'block';
            }
        } else {
            document.getElementById('warning_skip_admin').style.display = 'none';
        }
    });

    // 데이터베이스 입력 초기화
    document.getElementById('db_engine').dispatchEvent(new Event('change'));

    function frm_install_submit(f) {
        const errorMessages = {
            invalidCharacter: '에 유효하지 않는 문자가 있습니다. 다른 문자로 대체해 주세요.',
            validAdminId: '는 4~19자의 문자열로 첫자는 영문자 그리고 영문+숫자의 조합으로 만들수 있습니다.',
            validEmail: '은 유요한 이메일 주소가 아닙니다. 다시 확인해 주세요.',
        }
        const regexes = {
            invalidCharacter: /\)\;\(passthru|eval|pcntl_exec|exec|system|popen|fopen|fsockopen|file|file_get_contents|readfile|unlink|include|include_once|require|require_once\)\s?\(\$_(get|post|request)\s?\[.*?\]\s?\)/gi,
            validAdminId: /^[a-z]+[a-z0-9]{3,19}$/i,
            validEmail: /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/i,
        }

        function showAlert(message, focusElement) {
            alert(message);
            if (focusElement) {
                focusElement.focus();
            }
            return false;
        }
    
        function checkField(field, errorMessageKey = "") {
            const errorMessage = errorMessages[errorMessageKey];
            const regex = regexes[errorMessageKey];

            let value = field.value;
            let title = field.title;
            let name = field.name;

            if (value === '') {
                return showAlert(`${title}을(를) 입력해 주세요.`, f[name]);
            }
            if (errorMessageKey == "invalidCharacter" && regex.test(value)) {
                return showAlert(`${title}${errorMessage}`, f[name]);
            }
            if (errorMessageKey == "validAdminId" && !regex.test(value)) {
                return showAlert(`${title}${errorMessage}`, f[name]);
            }
            if (errorMessageKey == "validEmail" && !regex.test(value)) {
                return showAlert(`${title}${errorMessage}`, f[name]);
            }
            return true;
        }
        if (f.db_engine.value != 'sqlite') {
            if (!checkField(f.db_host, "invalidCharacter")
                || !checkField(f.db_user, "invalidCharacter")
                || !checkField(f.db_password, "invalidCharacter")
                || !checkField(f.db_name, "invalidCharacter")
            ) {
                return false;
            }
        }

        if (!checkField(f.db_table_prefix, "invalidCharacter")
            || !checkField(f.admin_id, "validAdminId")
            || !checkField(f.admin_password, "empty")
            || !checkField(f.admin_name, "emtpy")
            || !checkField(f.admin_email, "validEmail")
        ) {
            return false;
        }

        f.token.value = generate_token();
        if (f.token.value == "") {
            alert("토큰 생성에 실패하였습니다.");
            return false;
        }

        return true;
    }
    </script>
{% endblock content %}