466 lines
23 KiB
PHTML
Executable File
466 lines
23 KiB
PHTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="EcoBuddy - Sustainable facilities management platform">
|
|
<meta name="author" content="">
|
|
<link rel="icon" type="image/x-icon" href="/images/ecoBuddy_x32.png">
|
|
|
|
<!-- Bootstrap core CSS from CDN for faster loading -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
|
|
<!-- CSS theme -->
|
|
<link href="/public/css/default.css" rel="stylesheet">
|
|
|
|
<!-- Bootstrap Icons -->
|
|
<link href="/public/css/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<!-- Leaflet -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
|
|
|
<!-- Dynamic page title based on the current page -->
|
|
<title>Ecobuddy - <?php echo $view->pageTitle; ?></title>
|
|
|
|
<!-- Load simplified authentication helper -->
|
|
<script src="/public/js/auth.js"></script>
|
|
|
|
<!-- Load API client -->
|
|
<script src="/public/js/apiClient.js"></script>
|
|
|
|
<!-- Load facility data script -->
|
|
<script src="/public/js/facilityData.js"></script>
|
|
|
|
<!-- Initialise facility data from PHP server-side data -->
|
|
<script>
|
|
<?php if (isset($view->facilityDataSet) && is_array($view->facilityDataSet)): ?>
|
|
try {
|
|
// Convert PHP data to JavaScript object with proper encoding
|
|
// Using JSON_UNESCAPED_SLASHES and JSON_UNESCAPED_UNICODE for proper character handling
|
|
const initialData = <?php echo json_encode($view->facilityDataSet,
|
|
JSON_UNESCAPED_SLASHES |
|
|
JSON_UNESCAPED_UNICODE |
|
|
JSON_PARTIAL_OUTPUT_ON_ERROR
|
|
); ?>;
|
|
|
|
// Validate and store data in sessionStorage for use across the application
|
|
if (Array.isArray(initialData) && initialData.length > 0) {
|
|
sessionStorage.setItem('facilityData', JSON.stringify(initialData));
|
|
|
|
// initialise based on DOM state to ensure scripts run at the right time
|
|
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
|
if (typeof initialiseFacilityData === 'function') {
|
|
initialiseFacilityData(initialData);
|
|
}
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof initialiseFacilityData === 'function') {
|
|
initialiseFacilityData(initialData);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Add client-side authentication check to update UI
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check if user is authenticated on the client side
|
|
if (auth && auth.isAuthenticated()) {
|
|
console.log('User is authenticated on client side');
|
|
|
|
// Get user data
|
|
const user = auth.getUser();
|
|
if (user) {
|
|
console.log('User data:', user);
|
|
|
|
// Hide login button if it exists
|
|
const loginButton = document.getElementById('loginButton');
|
|
if (loginButton) {
|
|
loginButton.style.display = 'none';
|
|
}
|
|
|
|
// Hide login modal if it exists
|
|
const loginModal = document.getElementById('loginModal');
|
|
if (loginModal) {
|
|
loginModal.style.display = 'none';
|
|
}
|
|
|
|
// Show user menu
|
|
const userMenuContainer = document.createElement('div');
|
|
userMenuContainer.className = 'user-menu';
|
|
userMenuContainer.innerHTML = `
|
|
<div class="user-avatar">
|
|
<i class="bi bi-person-fill text-success"></i>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-light dropdown-toggle" type="button" id="userMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
|
${user.username}
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenuButton">
|
|
<li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>Profile</a></li>
|
|
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Settings</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><button class="dropdown-item text-danger" id="logoutButton"><i class="bi bi-box-arrow-right me-2"></i>Logout</button></li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
|
|
// Replace login button with user menu
|
|
if (loginButton) {
|
|
loginButton.parentNode.replaceChild(userMenuContainer, loginButton);
|
|
}
|
|
|
|
// Add logout button handler
|
|
const logoutButton = document.getElementById('logoutButton');
|
|
if (logoutButton) {
|
|
logoutButton.addEventListener('click', async function() {
|
|
await auth.logout();
|
|
window.location.reload();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('Error processing facility data:', error);
|
|
}
|
|
<?php endif; ?>
|
|
</script>
|
|
</head>
|
|
|
|
<body role="document">
|
|
<!-- Navigation bar -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
|
|
<div class="container-fluid px-3">
|
|
<!-- Brand logo and name -->
|
|
<a class="navbar-brand d-flex align-items-center" href="/index.php">
|
|
<img src="/images/ecoBuddy_x64.png" alt="EcoBuddy Logo" width="48" height="48" class="me-2">
|
|
<span class="fw-bold text-success">EcoBuddy</span>
|
|
</a>
|
|
|
|
<!-- Mobile menu toggle -->
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
|
|
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Navigation content -->
|
|
<div class="collapse navbar-collapse" id="navbarContent">
|
|
<!-- Main navigation links -->
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/index.php">
|
|
<i class="bi bi-house-fill me-1"></i>Home
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/map.php">
|
|
<i class="bi bi-map-fill me-1"></i>Map
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<!-- User account section -->
|
|
<div class="ms-lg-3 mt-3 mt-lg-0" id="userAuthSection">
|
|
<!-- This section will be populated by JavaScript based on authentication status -->
|
|
<div class="spinner-border spinner-border-sm text-success" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Function to update the authentication UI
|
|
async function updateAuthUI() {
|
|
const authSection = document.getElementById('userAuthSection');
|
|
|
|
// Show loading spinner (this is unnecessary but I like it :D)
|
|
authSection.innerHTML = `
|
|
<div class="spinner-border spinner-border-sm text-success" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
`;
|
|
|
|
// Record start time for minimum spinner display
|
|
const startTime = Date.now();
|
|
|
|
// Validate token with server first
|
|
let isAuthenticated = false;
|
|
if (auth.isAuthenticated()) {
|
|
try {
|
|
// This will validate the token with the server and handle refresh if needed
|
|
isAuthenticated = await auth.validateOnLoad();
|
|
} catch (error) {
|
|
console.error('Error validating authentication:', error);
|
|
isAuthenticated = false;
|
|
}
|
|
}
|
|
|
|
// Calculate elapsed time and wait if needed to show my very cool spinner for 500ms
|
|
const elapsedTime = Date.now() - startTime;
|
|
const minSpinnerTime = 500; // 500ms
|
|
|
|
if (elapsedTime < minSpinnerTime) {
|
|
await new Promise(resolve => setTimeout(resolve, minSpinnerTime - elapsedTime));
|
|
}
|
|
|
|
if (isAuthenticated) {
|
|
// User is logged in - show user menu
|
|
const user = auth.getUser();
|
|
const isAdmin = auth.isAdmin();
|
|
|
|
authSection.innerHTML = `
|
|
<div class="user-menu">
|
|
<div class="user-avatar">
|
|
<i class="bi bi-person-fill text-success"></i>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-link dropdown-toggle text-dark text-decoration-none" type="button" id="userMenuDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
${user.username}
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenuDropdown">
|
|
${isAdmin ? '<li><a class="dropdown-item" href="/admin"><i class="bi bi-gear me-2"></i>Admin Panel</a></li>' : ''}
|
|
<li><a class="dropdown-item" href="/profile"><i class="bi bi-person me-2"></i>My Profile</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><button class="dropdown-item" name="logoutButton"><i class="bi bi-box-arrow-right me-2"></i>Logout</button></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Add event listener for logout button
|
|
const logoutButton = authSection.querySelector('button[name="logoutButton"]');
|
|
if (logoutButton) {
|
|
logoutButton.addEventListener('click', async () => {
|
|
await auth.logout();
|
|
window.location.reload();
|
|
});
|
|
}
|
|
} else {
|
|
// User is not logged in - show login button
|
|
authSection.innerHTML = `
|
|
<button type="button" class="btn btn-success" id="loginButton" data-bs-toggle="modal" data-bs-target="#loginModal">
|
|
<i class="bi bi-box-arrow-in-right me-1"></i>Login
|
|
</button>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Update auth UI when the page loads
|
|
document.addEventListener('DOMContentLoaded', updateAuthUI);
|
|
|
|
// Also update when auth state changes
|
|
window.addEventListener('storage', function(e) {
|
|
if (e.key === 'token' || e.key === 'user') {
|
|
updateAuthUI();
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Login Modal -->
|
|
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header bg-light">
|
|
<h5 class="modal-title" id="loginModalLabel">
|
|
<i class="bi bi-box-arrow-in-right text-success me-2"></i>Login to EcoBuddy
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-4">
|
|
<form id="loginForm">
|
|
<div class="mb-3">
|
|
<label for="username" class="form-label">Username</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-light border-end-0">
|
|
<i class="bi bi-person text-success"></i>
|
|
</span>
|
|
<input type="text" class="form-control border-start-0" id="username" name="username" placeholder="Enter your username" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Password</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-light border-end-0">
|
|
<i class="bi bi-lock text-success"></i>
|
|
</span>
|
|
<input type="password" class="form-control border-start-0" id="password" name="password" placeholder="Enter your password" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loginError" class="alert alert-danger" style="display: none;"></div>
|
|
|
|
<!-- CAPTCHA container (hidden by default) -->
|
|
<div class="captcha-container mb-3" style="display: none;">
|
|
<div class="card bg-light">
|
|
<div class="card-body">
|
|
<h6 class="card-title">Security Check</h6>
|
|
<p class="card-text small">Please enter the characters you see below:</p>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="captcha-code bg-white p-2 border rounded me-2 text-center" style="font-family: monospace; letter-spacing: 3px; font-weight: bold; min-width: 100px;">
|
|
<span id="captchaDisplay"></span>
|
|
</div>
|
|
<input type="text" class="form-control" id="captchaInput" placeholder="Enter code" autocomplete="off">
|
|
<input type="hidden" id="captchaCode" name="captchaCode">
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="refreshCaptcha">
|
|
<i class="bi bi-arrow-clockwise"></i> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-success">
|
|
<i class="bi bi-box-arrow-in-right me-2"></i>Login
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer bg-light">
|
|
<p class="small text-muted mb-0">Don't have an account? <a href="#" onclick="alert('Please contact the administrator to create an account.');" class="text-success">Register</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// initialise login modal functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const loginModal = document.getElementById('loginModal');
|
|
const loginForm = document.getElementById('loginForm');
|
|
const loginError = document.getElementById('loginError');
|
|
const captchaContainer = document.querySelector('.captcha-container');
|
|
const captchaDisplay = document.getElementById('captchaDisplay');
|
|
const refreshCaptchaBtn = document.getElementById('refreshCaptcha');
|
|
|
|
// Function to update CAPTCHA display
|
|
async function updateCaptcha() {
|
|
try {
|
|
const captcha = await auth.generateCaptcha();
|
|
if (captchaDisplay) {
|
|
captchaDisplay.textContent = captcha;
|
|
}
|
|
if (document.getElementById('captchaCode')) {
|
|
document.getElementById('captchaCode').value = captcha;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating CAPTCHA:', error);
|
|
if (loginError) {
|
|
loginError.textContent = 'Error generating security check. Please try again.';
|
|
loginError.style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle CAPTCHA refresh button
|
|
if (refreshCaptchaBtn) {
|
|
refreshCaptchaBtn.addEventListener('click', updateCaptcha);
|
|
}
|
|
|
|
// Show/hide CAPTCHA based on login attempts
|
|
if (auth.needsCaptcha() && captchaContainer) {
|
|
captchaContainer.style.display = 'block';
|
|
updateCaptcha();
|
|
}
|
|
|
|
// Handle form submission
|
|
if (loginForm) {
|
|
loginForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
// Get form data
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const captchaInput = document.getElementById('captchaInput')?.value;
|
|
|
|
// Show loading state
|
|
const submitButton = this.querySelector('button[type="submit"]');
|
|
const originalButtonContent = submitButton.innerHTML;
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = `
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
<span class="ms-2">Logging in...</span>
|
|
`;
|
|
|
|
try {
|
|
// Attempt login
|
|
const result = await auth.login({
|
|
username,
|
|
password,
|
|
captchaInput
|
|
});
|
|
|
|
if (result.success) {
|
|
// Show success message
|
|
submitButton.classList.remove('btn-success');
|
|
submitButton.classList.add('btn-success');
|
|
submitButton.innerHTML = `
|
|
<i class="bi bi-check-circle me-2"></i>Login successful
|
|
`;
|
|
|
|
// Hide error message if shown
|
|
if (loginError) {
|
|
loginError.style.display = 'none';
|
|
}
|
|
|
|
// Close modal and reload page after a brief delay
|
|
setTimeout(() => {
|
|
const modal = bootstrap.Modal.getInstance(loginModal);
|
|
if (modal) {
|
|
modal.hide();
|
|
}
|
|
window.location.reload();
|
|
}, 500);
|
|
} else {
|
|
// Show error message
|
|
if (loginError) {
|
|
loginError.textContent = result.error;
|
|
loginError.style.display = 'block';
|
|
}
|
|
|
|
// Show CAPTCHA if needed
|
|
if (result.captcha && captchaContainer) {
|
|
captchaContainer.style.display = 'block';
|
|
updateCaptcha();
|
|
}
|
|
|
|
// Reset button
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalButtonContent;
|
|
}
|
|
} catch (error) {
|
|
// Show error message
|
|
if (loginError) {
|
|
loginError.textContent = error.message || 'An error occurred during login';
|
|
loginError.style.display = 'block';
|
|
}
|
|
|
|
// Reset button
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalButtonContent;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Hide modal if user is already authenticated
|
|
if (auth.isAuthenticated() && loginModal) {
|
|
const modalInstance = bootstrap.Modal.getInstance(loginModal);
|
|
if (modalInstance) {
|
|
modalInstance.hide();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- Main content container -->
|
|
<div class="container-fluid py-4 px-3">
|
|
<div class="row" id="content">
|
|
|
|
|
|
|