yoganandhank
/
CRS_logs_project
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added session and changes in page design

master
yoganandhank 1 year ago
parent
77999abd65
commit
c466078c99
2 changed files with 483 additions and 472 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 159
      src/main/resources/templates/modules/crslogspages/birthanddeath.html
  2. 82
      src/main/resources/templates/modules/crslogspages/loginpage.html

159
src/main/resources/templates/modules/crslogspages/birthanddeath.html
View File

@ -10,11 +10,18 @@
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap Icons CDN in <head> if not already --> <!-- Include Bootstrap Icons CDN in <head> if not already -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- <link th:href="@{/styles/birthanddeath.css}" rel="stylesheet" /> -->
</head>
<style> <style>
.form-check { .form-check {
display: flex; display: flex;
align-items: center; align-items: center;
@ -405,7 +412,7 @@ body {
@media (min-width: 769px) { @media (min-width: 769px) {
.mobile-username, .mobile-username,
.mobile-logout { .mobile-logout {
display: none;
display: block;
} }
.header .center-text{ .header .center-text{
@ -417,7 +424,7 @@ body {
</style> </style>
</head>
<body style="background-color: #ebf1fa;"> <body style="background-color: #ebf1fa;">
@ -557,7 +564,7 @@ body {
id="mothername"> id="mothername">
</div> </div>
<div class="col-md-5 mt-3">
<div class="col-md-5 mt-3">
<label for="birth-captcha-input">Enter Captcha <span class="text-danger">*</span></label> <label for="birth-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div id="birth-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div> <div id="birth-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
@ -566,7 +573,7 @@ body {
<input type="text" id="birth-captcha-input" class="form-control mt-2" <input type="text" id="birth-captcha-input" class="form-control mt-2"
placeholder="Enter Captcha" placeholder="Enter Captcha"
onpaste="return false" oncopy="return false" oncut="return false" /> onpaste="return false" oncopy="return false" oncut="return false" />
</div>
</div>
</div> </div>
@ -660,7 +667,7 @@ body {
<input type="text" id="death-captcha-input" class="form-control mt-2" <input type="text" id="death-captcha-input" class="form-control mt-2"
placeholder="Enter Captcha" placeholder="Enter Captcha"
onpaste="return false" oncopy="return false" oncut="return false" /> onpaste="return false" oncopy="return false" oncut="return false" />
</div>
</div>
</div> </div>
@ -742,25 +749,26 @@ body {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script <script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Your custom script
<script th:src="@{/script/birthanddeath.js}"></script> -->
<script>
<script>
// Redirect after 60 seconds (1 minute) of inactivity
// Redirect after 60 seconds (1 minute) of inactivity
let timeoutDuration = 10 * 60 * 1000; // 60 seconds let timeoutDuration = 10 * 60 * 1000; // 60 seconds
let timeout; let timeout;
@ -782,14 +790,14 @@ body {
resetTimeout(); resetTimeout();
$(document).ready(function () {
$(document).ready(function () {
$('#birthModal, #deathModal').on('hidden.bs.modal', function () { $('#birthModal, #deathModal').on('hidden.bs.modal', function () {
window.location.reload(); window.location.reload();
}); });
});
});
$(document).ready(function () {
$(document).ready(function () {
function resetFields(cardId) { function resetFields(cardId) {
// Clear all input fields inside the given card // Clear all input fields inside the given card
$(`#${cardId} input[type="text"], #${cardId} input[type="date"]`).val(''); $(`#${cardId} input[type="text"], #${cardId} input[type="date"]`).val('');
@ -803,19 +811,19 @@ body {
$('#death-link').on('click', function () { $('#death-link').on('click', function () {
resetFields('death-card'); resetFields('death-card');
}); });
});
});
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
const today = new Date().toISOString().split("T")[0]; // yyyy-mm-dd format const today = new Date().toISOString().split("T")[0]; // yyyy-mm-dd format
document.getElementById("dateofbirth").setAttribute("max", today); document.getElementById("dateofbirth").setAttribute("max", today);
document.getElementById("dateofdeath").setAttribute("max", today); document.getElementById("dateofdeath").setAttribute("max", today);
});
});
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
const userName = localStorage.getItem("userName"); const userName = localStorage.getItem("userName");
console.log("userName ",userName);
//console.log("userName ",userName);
if (userName) { if (userName) {
@ -837,8 +845,7 @@ body {
} }
$('#logoutBtn').click(function (e) {
e.stopPropagation();
$('#logoutBtn,#logoutBtnMobile').click(function () {
Swal.fire({ Swal.fire({
title: "Are you sure?", title: "Are you sure?",
@ -865,7 +872,7 @@ body {
} }
}); });
}); });
});
});
const links = document.querySelectorAll('.nav-link'); const links = document.querySelectorAll('.nav-link');
@ -876,29 +883,29 @@ body {
}); });
/* card display script */
/* card display script */
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const birthLink = document.getElementById("birth-link");
const deathLink = document.getElementById("death-link");
const birthCard = document.getElementById("birth-card");
const deathCard = document.getElementById("death-card");
const birthLink = document.getElementById("birth-link");
const deathLink = document.getElementById("death-link");
const birthCard = document.getElementById("birth-card");
const deathCard = document.getElementById("death-card");
function showCard(selectedLink, selectedCard, otherLink, otherCard) {
function showCard(selectedLink, selectedCard, otherLink, otherCard) {
selectedCard.style.display = "block"; selectedCard.style.display = "block";
otherCard.style.display = "none"; otherCard.style.display = "none";
selectedLink.classList.add("active"); selectedLink.classList.add("active");
otherLink.classList.remove("active"); otherLink.classList.remove("active");
}
}
birthLink.addEventListener("click", function () {
birthLink.addEventListener("click", function () {
showCard(birthLink, birthCard, deathLink, deathCard); showCard(birthLink, birthCard, deathLink, deathCard);
});
});
deathLink.addEventListener("click", function () {
deathLink.addEventListener("click", function () {
showCard(deathLink, deathCard, birthLink, birthCard); showCard(deathLink, deathCard, birthLink, birthCard);
});
});
//////////////////////////////////////////////
});
});
//////////////////////////////////////////////
function generateCaptcha(type) { function generateCaptcha(type) {
@ -922,7 +929,7 @@ function generateCaptcha(type) {
element.style.padding = "5px"; element.style.padding = "5px";
element.style.userSelect = "none"; element.style.userSelect = "none";
} }
}
}
function validateCaptcha(type) { function validateCaptcha(type) {
const generated = document.getElementById(`${type}-captcha`).textContent.trim(); const generated = document.getElementById(`${type}-captcha`).textContent.trim();
@ -949,26 +956,26 @@ function validateCaptcha(type) {
} }
return true; return true;
}
}
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
generateCaptcha("birth"); generateCaptcha("birth");
generateCaptcha("death"); generateCaptcha("death");
});
});
function fetchBirthData() { function fetchBirthData() {
const dob = document.getElementById('dateofbirth').value;
const gender = document.querySelector('input[name="gender"]:checked')?.value;
const captchaInput = document.getElementById('birth-captcha-input');
const dob = document.getElementById('dateofbirth').value;
const gender = document.querySelector('input[name="gender"]:checked')?.value;
const captchaInput = document.getElementById('birth-captcha-input');
console.log("gender:", gender);
//console.log("gender:", gender);
// Validate Date of Birth
// Validate Date of Birth
if (!dob) { if (!dob) {
Swal.fire({ Swal.fire({
icon: 'warning', icon: 'warning',
@ -988,21 +995,21 @@ function fetchBirthData() {
return; return;
} }
// CAPTCHA validation first
// Validate CAPTCHA
if (!validateCaptcha('birth')) {
// CAPTCHA validation first
// Validate CAPTCHA
if (!validateCaptcha('birth')) {
//captchaInput.classList.add('is-invalid'); //captchaInput.classList.add('is-invalid');
//captchaInput.focus(); //captchaInput.focus();
return; return;
} else {
} else {
captchaInput.classList.remove('is-invalid'); captchaInput.classList.remove('is-invalid');
}
}
const formattedDob = dob.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
console.log("dob:", formattedDob);
$('#pageLoader').show();
const formattedDob = dob.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
//console.log("dob:", formattedDob);
$('#pageLoader').show();
$.ajax({
$.ajax({
url: '/crs/api/birth-details', url: '/crs/api/birth-details',
method: 'GET', method: 'GET',
data: { data: {
@ -1077,54 +1084,54 @@ function fetchBirthData() {
} }
alert("Error: " + message); alert("Error: " + message);
} }
});
});
} }
function fetchDeathData() { function fetchDeathData() {
const dod = document.getElementById('dateofdeath').value;
const gender = document.querySelector('input[name="deathgender"]:checked')?.value;
const captchaInput = document.getElementById('death-captcha-input');
const dod = document.getElementById('dateofdeath').value;
const gender = document.querySelector('input[name="deathgender"]:checked')?.value;
const captchaInput = document.getElementById('death-captcha-input');
console.log("gender:", gender);
// console.log("gender:", gender);
// Validate Date of Birth
if (!dod) {
// Validate Date of Birth
if (!dod) {
Swal.fire({ Swal.fire({
icon: 'warning', icon: 'warning',
title: 'Missing Date of Birth', title: 'Missing Date of Birth',
text: 'Please enter your Date of Birth.' text: 'Please enter your Date of Birth.'
}); });
return; return;
}
}
// Validate Gender
if (!gender) {
// Validate Gender
if (!gender) {
Swal.fire({ Swal.fire({
icon: 'warning', icon: 'warning',
title: 'Missing Gender Selection', title: 'Missing Gender Selection',
text: 'Please select a gender.' text: 'Please select a gender.'
}); });
return; return;
}
}
if (!validateCaptcha('death')) {
if (!validateCaptcha('death')) {
//captchaInput.classList.add('is-invalid'); //captchaInput.classList.add('is-invalid');
//captchaInput.focus(); //captchaInput.focus();
return; return;
} else {
} else {
captchaInput.classList.remove('is-invalid'); captchaInput.classList.remove('is-invalid');
}
}
const formattedDod = dod.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
const formattedDod = dod.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
console.log("dod:", formattedDod);
$('#pageLoader').show();
// console.log("dod:", formattedDod);
$('#pageLoader').show();
$.ajax({
$.ajax({
url: '/crs/api/death-details', url: '/crs/api/death-details',
method: 'GET', method: 'GET',
data: { data: {
@ -1187,7 +1194,7 @@ function fetchDeathData() {
} }
alert("Error: " + message); alert("Error: " + message);
} }
});
});
} }
@ -1195,7 +1202,7 @@ function fetchDeathData() {
function saveCertificateLog(regNo, eventDate, url, service){ function saveCertificateLog(regNo, eventDate, url, service){
$.ajax({
$.ajax({
url: '/crs/api/saveCertificateLogs', url: '/crs/api/saveCertificateLogs',
type: 'POST', type: 'POST',
data: { data: {
@ -1205,17 +1212,17 @@ function saveCertificateLog(regNo, eventDate, url, service){
service: service service: service
}, },
success: function() { success: function() {
console.log('View logged successfully');
//console.log('View logged successfully');
}, },
error: function(xhr, status, error) { error: function(xhr, status, error) {
console.error('Logging failed:', error); console.error('Logging failed:', error);
} }
});
});
} }
</script>
</script>
</body> </body>
</html> </html>

82
src/main/resources/templates/modules/crslogspages/loginpage.html
View File

@ -3,29 +3,18 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GCC - Birth & Death</title>
<title>GCC - Birth And Death</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Bootstrap Icons CDN in <head> if not already --> <!-- Include Bootstrap Icons CDN in <head> if not already -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- jQuery (Only load it once) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Popper.js (Required for Bootstrap 4) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- SweetAlert JS (optional if you plan to use it) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- <link th:href="@{/styles/loginpage.css}" rel="stylesheet" /> -->
<style> <style>
/* Header Styling */ /* Header Styling */
.header { .header {
background-color: #134356; background-color: #134356;
@ -173,6 +162,7 @@
width: 150px; /* optional: set fixed width */ width: 150px; /* optional: set fixed width */
} }
</style> </style>
</head> </head>
<body style="background-color: #ebf1fa;"> <body style="background-color: #ebf1fa;">
@ -269,7 +259,7 @@
<span class="text-danger">*</span> <span class="text-danger">*</span>
<input type="text" <input type="text"
id="phoneNumber" class="form-control" id="phoneNumber" class="form-control"
placeholder="Enter Mobile number"
placeholder="Enter Registered Mobile number"
oninput="validatePhoneNumber(this)"> oninput="validatePhoneNumber(this)">
</div> </div>
@ -362,8 +352,24 @@
<script>
<!-- jQuery (Only load it once) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Popper.js (Required for Bootstrap 4) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- SweetAlert JS (optional if you plan to use it) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- <script th:src="@{/script/loginpage.js}"></script> -->
<script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
@ -429,38 +435,35 @@ $(document).ready(function () {
// phone number validation
/* function validatePhoneNumber(input) {
// Remove any non-numeric characters using regex
input.value = input.value.replace(/[^0-9]/g, '');
// Limit the input to 10 digits
if (input.value.length > 10) {
input.value = input.value.slice(0, 10);
}
} */
function validatePhoneNumber(input) { function validatePhoneNumber(input) {
// Remove non-numeric characters // Remove non-numeric characters
let value = input.value.replace(/[^0-9]/g, ''); let value = input.value.replace(/[^0-9]/g, '');
// Prevent first digit from being 0
if (value.startsWith('0')) {
value = value.substring(1);
// Prevent input if first digit is 0
if (value.length === 1 && value[0] === '0') {
value = '';
} }
// Limit to 10 digits
// Enforce Indian mobile format: starts with 6-9 and has exactly 10 digits
if (value.length > 10) { if (value.length > 10) {
value = value.slice(0, 10); value = value.slice(0, 10);
} }
// Update input value
input.value = value; input.value = value;
}
// Optional: check for invalid numbers starting with digits other than 6-9
if (value.length === 10 && !/^[6-9]\d{9}$/.test(value)) {
Swal.fire({
title: "Invalid Mobile Number",
text: "Please enter a valid 10-digit Indian mobile number starting with 6-9.",
icon: "error",
confirmButtonText: "OK",
allowOutsideClick: false
});
input.value = "";
}
}
$('#registersubmit').click(function (event) { $('#registersubmit').click(function (event) {
@ -635,7 +638,7 @@ $(document).ready(function () {
setTimeout(function () { setTimeout(function () {
Swal.close(); Swal.close();
console.log("OTP sent response:", response);
//console.log("OTP sent response:", response);
$('#mobilenotxt').html(mobileNumber); $('#mobilenotxt').html(mobileNumber);
$('#otpForm').modal({ $('#otpForm').modal({
@ -690,7 +693,7 @@ $(document).ready(function () {
dataType: 'json', dataType: 'json',
success: function (response) { success: function (response) {
console.log("response...",response);
//console.log("response...",response);
if (response.userName) { if (response.userName) {
localStorage.setItem("userName", response.userName); localStorage.setItem("userName", response.userName);
} }
@ -701,7 +704,7 @@ $(document).ready(function () {
Swal.close(); Swal.close();
if (response.status === "Success") { if (response.status === "Success") {
//alert("inside line 890 " + response.userName); //alert("inside line 890 " + response.userName);
console.log("Welcome, " , response.userName);
//console.log("Welcome, " , response.userName);
Swal.fire({ Swal.fire({
title: "OTP Verified!", title: "OTP Verified!",
text: "Your OTP has been successfully verified.", text: "Your OTP has been successfully verified.",
@ -832,5 +835,6 @@ $(document).ready(function () {
</script> </script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save