LatestDuplicate_Working

Paused

App Files Files Community

LatestDuplicate_Working / templates /gui2.html

Marthee

Upload gui2.html

fd73091 verified 10 months ago

raw

history blame contribute delete

2.69 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Password Modal</title>
	<link rel="stylesheet" href="static/popups.css">
	</head>
	<body>

	<!-- Popup Modal HTML Structure -->
	<div id="mpopupBoxpassword" class="mpopuppassword">
	<!-- Modal content -->
	<div class="modal-contentpassword">
	<div class="modal-bodypassword" id="modal-bodyTextpassword">
	<p id='enterPText'>Enter Password to access ADR Console.</p>
	<input type="password" id="passwordField" placeholder="Enter Password" style="display: block; margin: 10px 0;">
	<button id="submitBtn">Submit</button>
	</div>
	</div>
	</div>

	<div id="errorMessage" class="error-message" style="display: none;">Error Validating. Please Refresh and Try Again.</div>


	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
	// Show the modal on page load
	document.getElementById('mpopupBoxpassword').style.display = "flex";

	// Event listener for the submit button
	document.getElementById('submitBtn').onclick = function() {
	validatePassword();
	};

	function validatePassword() {
	var enteredPassword = document.getElementById("passwordField").value;

	// Send the entered password to the Flask backend for validation
	$.ajax({
	url: '/check_password', // Flask route for password validation
	type: 'POST',
	data: {
	password: enteredPassword // Send entered password as form data
	},
	success: function(response) {
	if (response.authenticated) {
	console.log('Correct Password');
	document.getElementById('mpopupBoxpassword').style.display = "none"; // Hide modal on success
	window.location.href = "/mainGUI"; // Redirect to the main GUI page
	} else {
	document.getElementById("passwordField").style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
	}
	},
	error: function(jqXHR, textStatus, errorThrown) {
	// Show error message if validation fails
	document.getElementById('errorMessage').style.display = "block"; // Show error message
	}
	});
	}
	</script>
	</body>
	</html>