<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="/include/head.html"></th:block>
    <link rel="stylesheet" th:href="@{/css/login.css}">
</head>
<body id="body">
<div class="loginWrap">
    <form class="container" method="post" th:action="@{/phits/login}">
        <div class="logo">
            <img src="/images/logo/logo.png">
            <p>포항시교통정보센터</p>
        </div>
        <div class="title">관리자</div>
        <input id="id" type="text" name="username" placeholder="ID">
        <input id="pwd" type="password" name="password" placeholder="비밀번호">
        <div onclick="login()" class="button">로그인</div>
    </form>
</div>
<th:block th:include="/include/footer.html"></th:block>
</body>
</html>

<script>

    let loginFail = "";
    let errorInput = null;
    loginFail = "[[${param.LoginFail}]]";
    if (loginFail) {
        alertError(loginFail, '로그인', null);
    }
    const $id  = $('#id');
    const $pwd = $('#pwd');
    const form = $('.container');

    function login() {
        if (isNull($id.val())) {
            alertError("ID를 입력해주세요", '로그인', $id);
            return
        }

        if (isNull($pwd.val())) {
            alertError("비밀번호를 입력해주세요", '로그인', $pwd);
            return
        }

        getDataAsync('/api/login/loginCheck', 'POST', {id : $id.val(), pwd: $pwd.val()},  null, (jsonData)=>{
            if (jsonData && jsonData.success === "F") {
                alertError(jsonData.message, '로그인', $pwd);
            }
            else {
                form.submit();
            }
        }, null)

    }

    $id.on('keydown', (event)=>enterLogin(event));
    $pwd.on('keydown', (event)=>enterLogin(event));

    function enterLogin(event) {
        if (event.originalEvent.key === 'Enter'){
            if (isNull($id.val())) {
                return $id.focus();
            }

            if (isNull($pwd.val())) {
                return $pwd.focus();
            }
            login();
        }
    }
</script>