기본 골격

2023-05-08 10:16:00 +09:00
parent 169ba6448c
commit 2412d289c3
606 changed files with 214162 additions and 114780 deletions
@@ -0,0 +1,144 @@
+<!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="email" class="form-control" name="id" id="id" maxlength="20" required>
+                    <label for="id" class="form-label">이메일</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="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);
+
+            if (document.loginForm.message !== null && document.loginForm.message.value !== "") {
+                alert(document.loginForm.message.value);
+            }
+        }
+
+        $(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) {
+                        alert("[[#{validate.passLengthShort}]]");
+                    } 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>