<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/base_layout}">


<body>

<section layout:fragment="contentFragment">
    <style>
        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-floating:focus-within {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>
    <!-- javascript warning tag  -->

    <div class="container">
        <div class="mt-2">
            <h1 class="text-center">로그인</h1>
        </div>
        <main class="form-signin mt-2">
            <form role="form" name="loginForm" id="loginForm" th:action="@{/actionLogin.do}" method="post">
                <input type="hidden" id="message" name="message" th:value="${loginMessage}">
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

                <div class="form-floating">
                    <input type="text" class="form-control" name="id" id="id" maxlength="20" required>
                    <label for="id" class="form-label">ID</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control mb-3" name="password" id="password" minlength="8" maxlength="20" required>
                    <label for="password" class="form-label">비밀번호</label>
                </div>
                <div class="checkbox mb-3">
                    <input type="checkbox" class="form-check-input" name="checkId" id="checkId">
                    <label class="form-check-label" for="checkId">아이디 저장</label>
                </div>
                <button class="w-100 btn btn-lg btn-primary" type="button" id="actionLogin" th:text="#{loginForm.login}">Sign in</button>
            </form>
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
                <div class="toast-header">
                    <strong class="mr-auto">알림</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                </div>
            </div>
            <div class="mt-2 text-center">
                <span class="text-muted"><a href="/forgot_password.do">비밀번호 초기화</a></span>
            </div>
        </main>
    </div>
</section>
</body>


<th:block layout:fragment="contentScript">
    <script>
        function setCookie(name, value, expires) {
            let cookie = `${name}=${encodeURIComponent(value)}; path=/`;

            if (expires instanceof Date) {
                cookie += `; expires=${expires.toUTCString()}`;
            }
            document.cookie = cookie;
        }

        function getCookie(name) {
            let decodedCookie = decodeURIComponent(document.cookie);
            let ca = decodedCookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) === 0) {
                    return c.substring(name.length + 1, c.length);
                }
            }
            return null;
        }

        function getId(form) {
            form.checkId.checked = ((form.id.value = getCookie("saveid")) !== null);
        }

        function fnInit() {
            getId(document.loginForm);

            let message = document.loginForm.message.value;
            if (message) {
                $('.toast-body').text(message);
                $('.toast').toast('show');
            }
        }

        $(function () {
            fnInit();
            let actionLogin = function (event) {
                let form = document.loginForm;
                if ($('#checkId').is(':checked')) {
                    setCookie("saveid", $('#id').val(), new Date(new Date().getTime() + 1000 * 3600 * 24 * 30));
                } else {
                    setCookie("saveid", $('#id').val(), new Date(new Date().getTime() - 1));
                }

                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                } else {
                    if (form.password.value.length < 8) {
                        let message = "[[#{validate.passLengthShort}]]";
                        $('.toast-body').text(message);
                        $('.toast').toast('show');
                    } else {
                        form.submit();
                    }
                }
                form.classList.add('was-validated');
            };

            $('#actionLogin').on('click', actionLogin);
            $('#password').on("keydown", function (event) {
                if (event.key === "Enter" || event.keyCode === 13 || event.code === 'Enter') {
                    event.preventDefault();
                    actionLogin(event);
                }
            });

        });
    </script>

</th:block>

</html>
