You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
4.6 KiB
117 lines
4.6 KiB
<!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>
|