gccmanpower/src/main/resources/templates/gcctapaldetailsmanagement/login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GCC Tapal Details Management - Login</title>

    <!-- CSRF Tokens -->
    <meta th:if="${_csrf != null}" name="_csrf" th:content="${_csrf.token}" />
    <meta th:if="${_csrf != null}" name="_csrf_header" th:content="${_csrf.headerName}" />

    <!-- Include CSS -->
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/login-form-styles.css}">

    <!-- Awesome Font -->
    <link th:href="@{/assets/font-awesome-6.5.2/css/all.min.css}" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <img th:src="@{/assets/header-images/gcc1.png}" alt="Greater Chennai Corporation" class="small-logo">
        <h3>GREATER CHENNAI CORPORATION</h3>
        <h4>பெருநகர சென்னை மாநகராட்சி</h4>
        <br>
        <h3>GCC Tapal Details Management</h3>
        <br>
        <h2>Login</h2>

        <div id="error-box"
            style="color: #c0392b; font-weight: 500; font-size: 0.85rem; margin-bottom: 1.5rem; text-align: center; display: none;">
            <i class="fa-solid fa-circle-exclamation"></i> <span id="error-text">Invalid username or password!</span>
        </div>

        <form id="loginForm" onsubmit="handleLogin(event)">
            <div class="input-field">
                <input type="text" name="usrName" id="usrName" placeholder="Enter Username" required
                    autocomplete="username">
                <div class="underline"></div>
            </div>
            <div class="input-field">
                <input type="password" name="usrPass" id="usrPass" placeholder="Enter Password" required
                    autocomplete="current-password">
                <div class="underline"></div>
            </div>
            <input type="submit" value="Login" id="submit-btn">
        </form>
    </div>

    <!-- Footer Fragment -->
    <th:block th:replace="~{fragments/footer :: footer}"></th:block>

    <!-- Custom JS -->
    <script th:inline="javascript">
        const contextPath = /*[[@{/}]]*/ '';
    </script>

    <script>
        function handleLogin(event) {
            event.preventDefault();

            const errorBox = document.getElementById("error-box");
            const errorText = document.getElementById("error-text");
            const submitBtn = document.getElementById("submit-btn");

            errorBox.style.display = "none";
            submitBtn.disabled = true;
            submitBtn.value = 'Authenticating...';

            const username = document.getElementById("usrName").value;
            const password = document.getElementById("usrPass").value;

            const urlParams = new URLSearchParams();
            urlParams.append('usrName', username);
            urlParams.append('usrPass', password);

            // Fetch CSRF tokens
            const csrfToken = document.querySelector("meta[name='_csrf']")?.getAttribute("content");
            const csrfHeader = document.querySelector("meta[name='_csrf_header']")?.getAttribute("content");

            const headers = {
                'Content-Type': 'application/x-www-form-urlencoded'
            };
            if (csrfToken && csrfHeader) {
                headers[csrfHeader] = csrfToken;
            }

            fetch(contextPath + 'gcctapaldetailsmanagement/api/login', {
                method: 'POST',
                headers: headers,
                body: urlParams
            })
                .then(response => response.json())
                .then(data => {
                    if (data.result) {
                        //alert("username: " + data.usrName + "usrPass:" + data.password);
                        sessionStorage.setItem("tap_usrName", data.usrName);
                        window.location.href = contextPath + 'gcctapaldetailsmanagement/dashboard';
                    } else {
                        submitBtn.disabled = false;
                        submitBtn.value = 'Login';
                        errorText.textContent = data.error || "Authentication failed.";
                        errorBox.style.display = "block";
                    }
                })
                .catch(err => {
                    console.error("Login Error:", err);
                    submitBtn.disabled = false;
                    submitBtn.value = 'Login';
                    errorText.textContent = "Network error. Please try again later.";
                    errorBox.style.display = "block";
                });
        }
    </script>
</body>

</html>