boris/Ecobuddy
1
0
Fork 0
Code Issues 12 Pull Requests Packages Projects 1 Releases Wiki Activity

erm

Browse Source 
Signed-off-by: boris <boris@borishub.co.uk>
This commit is contained in:
boris
2025-04-20 16:49:23 +01:00
parent 709596eea2
commit 78508a7cbd
29 changed files with 2623 additions and 2956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
Views/template/createModal.phtml
View File

@@ -1,4 +1,3 @@
<?php if($view->user->getAccessLevel() == 1): ?>
<!-- Create Facility Modal -->
<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
@@ -10,136 +9,115 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form id="createForm">
<input type="hidden" name="action" value="create">
<!-- Create facility form -->
<form id="createFacilityForm">
<!-- Form fields -->
<div class="mb-3">
<label for="titlCreate" class="form-label">Title</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-tag text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="titlCreate" name="titlCreate" placeholder="Enter facility title" required>
</div>
<label for="createTitle" class="form-label">Facility Name</label>
<input type="text" class="form-control" id="createTitle" name="title" required>
</div>
<div class="mb-3">
<label for="cateCreate" class="form-label">Category</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-bookmark text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="cateCreate" name="cateCreate" placeholder="Enter facility category" required>
</div>
<label for="createCategory" class="form-label">Category</label>
<select class="form-select" id="createCategory" name="category" required>
<option value="" selected disabled>Select a category</option>
<option value="recycling">Recycling Center</option>
<option value="compost">Composting Facility</option>
<option value="ewaste">E-Waste Collection</option>
<option value="donation">Donation Center</option>
<option value="refill">Refill Station</option>
<option value="repair">Repair Shop</option>
<option value="garden">Community Garden</option>
<option value="market">Farmers Market</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-3">
<label for="descCreate" class="form-label">Description</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-card-text text-success"></i>
</span>
<textarea class="form-control border-start-0" id="descCreate" name="descCreate" placeholder="Enter facility description" rows="3" required></textarea>
</div>
<label for="createDescription" class="form-label">Description</label>
<textarea class="form-control" id="createDescription" name="description" rows="3" required></textarea>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="hnumCreate" class="form-label">House/Building Number</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-house text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="hnumCreate" name="hnumCreate" placeholder="Enter number" required>
</div>
<label for="createLatitude" class="form-label">Latitude</label>
<input type="number" step="any" class="form-control" id="createLatitude" name="latitude" required>
</div>
<div class="col-md-6 mb-3">
<label for="strtCreate" class="form-label">Street Name</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-signpost text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="strtCreate" name="strtCreate" placeholder="Enter street name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="townCreate" class="form-label">Town/City</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-building text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="townCreate" name="townCreate" placeholder="Enter town/city" required>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cntyCreate" class="form-label">County</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-map text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="cntyCreate" name="cntyCreate" placeholder="Enter county" required>
</div>
<label for="createLongitude" class="form-label">Longitude</label>
<input type="number" step="any" class="form-control" id="createLongitude" name="longitude" required>
</div>
</div>
<div class="mb-3">
<label for="postCreate" class="form-label">Postcode</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-mailbox text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="postCreate" name="postCreate" placeholder="Enter postcode" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="latCreate" class="form-label">Latitude</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-geo-alt text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="latCreate" name="latCreate" placeholder="Enter latitude" required>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lngCreate" class="form-label">Longitude</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-geo-alt text-success"></i>
</span>
<input type="text" class="form-control border-start-0" id="lngCreate" name="lngCreate" placeholder="Enter longitude" required>
</div>
</div>
<label for="createAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="createAddress" name="address" required>
</div>
<div class="mb-3">
<label for="contCreate" class="form-label">Contributor</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 bg-light" id="contCreate" name="contCreate" placeholder="Auto-filled with your username" disabled required>
</div>
<small class="text-muted">This will be automatically filled with your username</small>
<label for="createContact" class="form-label">Contact Information</label>
<input type="text" class="form-control" id="createContact" name="contact">
</div>
<div class="mb-3">
<label for="createWebsite" class="form-label">Website</label>
<input type="url" class="form-control" id="createWebsite" name="website" placeholder="https://">
</div>
<div class="mb-3">
<label for="createHours" class="form-label">Operating Hours</label>
<input type="text" class="form-control" id="createHours" name="hours" placeholder="e.g., Mon-Fri: 9am-5pm">
</div>
<div class="mb-3">
<label for="createStatus" class="form-label">Status</label>
<select class="form-select" id="createStatus" name="status" required>
<option value="operational">Operational</option>
<option value="limited">Limited Service</option>
<option value="closed">Temporarily Closed</option>
<option value="planned">Planned</option>
</select>
</div>
<div id="createError" class="alert alert-danger" style="display: none;"></div>
</form>
</div>
<div class="modal-footer bg-light">
<div class="w-100 d-flex justify-content-between">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" form="createForm" class="btn btn-success">
<i class="bi bi-plus-circle me-1"></i>Create Facility
</button>
</div>
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="createFacilityButton">
<i class="bi bi-plus-circle me-1"></i>Create Facility
</button>
</div>
</div>
</div>
</div>
<?php endif; ?>
<script>
// Only allow admin users to access this modal
document.addEventListener('DOMContentLoaded', function() {
const createModal = document.getElementById('createModal');
if (createModal) {
createModal.addEventListener('show.bs.modal', async function(event) {
// Validate authentication with server first
let isAdmin = false;
if (simpleAuth.isAuthenticated()) {
try {
// This will validate the token with the server and handle refresh if needed
const isValid = await simpleAuth.validateOnLoad();
if (isValid) {
isAdmin = simpleAuth.isAdmin();
}
} catch (error) {
console.error('Error validating authentication:', error);
isAdmin = false;
}
}
if (!isAdmin) {
event.preventDefault();
alert('You need administrator privileges to add new facilities.');
}
});
}
});
</script>

95
Views/template/footer.phtml
View File

@@ -63,6 +63,101 @@
if (simpleAuth.needsCaptcha() && captchaContainer) {
captchaContainer.style.display = 'flex';
}
// Add login form handler
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;
// Clear previous error
if (loginError) {
loginError.style.display = 'none';
loginError.textContent = '';
}
// Show loading spinner in submit button
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>
`;
// Record start time for minimum spinner display
const startTime = Date.now();
try {
// Attempt login
const result = await simpleAuth.login({
username: username,
password: password,
captchaInput: captchaInput
});
// Calculate elapsed time and wait if needed to show spinner for at least 500ms
const elapsedTime = Date.now() - startTime;
const minSpinnerTime = 500; // 500ms minimum spinner display time
if (elapsedTime < minSpinnerTime) {
await new Promise(resolve => setTimeout(resolve, minSpinnerTime - elapsedTime));
}
if (result.success) {
// Show success message in button
submitButton.classList.remove('btn-success');
submitButton.classList.add('btn-success');
submitButton.innerHTML = `
<i class="bi bi-check-circle me-2"></i>Login successful
`;
// Wait a moment before closing modal and reloading
setTimeout(() => {
// Close modal
const modal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
if (modal) {
modal.hide();
}
// Reload page to update UI
window.location.reload();
}, 500);
} else {
// Show error
if (loginError) {
loginError.textContent = result.error || 'Login failed';
loginError.style.display = 'block';
}
// Show CAPTCHA if needed
if (simpleAuth.needsCaptcha() && captchaContainer) {
captchaContainer.style.display = 'flex';
// Generate new CAPTCHA if needed
if (result.captcha) {
document.getElementById('captchaCode').value = result.captcha;
}
}
// Reset button
submitButton.disabled = false;
submitButton.innerHTML = originalButtonContent;
}
} catch (error) {
console.error('Login error:', error);
if (loginError) {
loginError.textContent = error.message || 'An error occurred during login';
loginError.style.display = 'block';
}
// Reset button
submitButton.disabled = false;
submitButton.innerHTML = originalButtonContent;
}
});
}
// Handle logout button

293
Views/template/header.phtml
View File

@@ -66,11 +66,11 @@
// Add client-side authentication check to update UI
document.addEventListener('DOMContentLoaded', function() {
// Check if user is authenticated on the client side
if (window.auth && window.auth.isAuthenticated()) {
if (simpleAuth && simpleAuth.isAuthenticated()) {
console.log('User is authenticated on client side');
// Get user data
const user = window.auth.getUser();
const user = simpleAuth.getUser();
if (user) {
console.log('User data:', user);
@@ -115,7 +115,7 @@
const logoutButton = document.getElementById('logoutButton');
if (logoutButton) {
logoutButton.addEventListener('click', async function() {
await window.auth.logout();
await simpleAuth.logout();
window.location.reload();
});
}
@@ -174,9 +174,8 @@
<i class="bi bi-sort-alpha-down text-success"></i>
</span>
<select name="sort" class="form-select border-start-0 filter-control" id="sort">
<option value="title">Title</option>
<option selected value="title">Title</option>
<option value="category">Category</option>
<option value="status">Status</option>
<option value="description">Description</option>
<option value="streetName">Street</option>
<option value="county">County</option>
@@ -195,10 +194,8 @@
<i class="bi bi-filter-circle-fill text-success"></i>
</span>
<select name="filterCat" class="form-select border-start-0 filter-control" id="filterCat">
<option value="">All</option>
<option value="title">Title</option>
<option value="category">Category</option>
<option value="status">Status</option>
<option value="description">Description</option>
<option value="streetName">Street</option>
<option value="county">County</option>
@@ -218,36 +215,105 @@
</div>
<!-- User account section -->
<div class="ms-lg-3 mt-3 mt-lg-0">
<?php if(!$view->user->isLoggedIn()): ?>
<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>
<?php else: ?>
<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-light dropdown-toggle" type="button" id="userMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<?php echo $view->user->getUsername(); ?>
</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>
</div>
<?php endif; ?>
<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 (simpleAuth.isAuthenticated()) {
try {
// This will validate the token with the server and handle refresh if needed
isAuthenticated = await simpleAuth.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 = simpleAuth.getUser();
const isAdmin = simpleAuth.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 simpleAuth.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 simpleAuth state changes
window.addEventListener('storage', function(e) {
if (e.key === 'token' || e.key === 'user') {
updateAuthUI();
}
});
</script>
</div>
</div>
</nav>
<!-- Login Modal -->
<?php if(!$view->user->isLoggedIn()): ?>
<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">
@@ -280,21 +346,27 @@
<div id="loginError" class="alert alert-danger" style="display: none;"></div>
<div class="row captcha-container" style="display: none;">
<!-- CAPTCHA Display -->
<div class="col-md-6 mb-3">
<label for="captchaCode" class="form-label">CAPTCHA Code</label>
<input type="text" class="form-control bg-light" id="captchaCode" name="generatedCaptcha" value="" readonly>
</div>
<!-- CAPTCHA Input -->
<div class="col-md-6 mb-3">
<label for="captchaInput" class="form-label">Enter CAPTCHA</label>
<input type="text" class="form-control" id="captchaInput" name="captchaInput" placeholder="Enter code">
<!-- 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 gap-2 mt-4">
<div class="d-grid">
<button type="submit" class="btn btn-success">
<i class="bi bi-box-arrow-in-right me-2"></i>Login
</button>
@@ -302,15 +374,140 @@
</form>
</div>
<div class="modal-footer bg-light">
<div class="w-100 d-flex justify-content-between align-items-center">
<small class="text-muted">Don't have an account? <a href="" onclick="alert('Please contact the administrator to create an account.');" class="text-success">Register</a></small>
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
</div>
<p class="small text-muted mb-0">Don't have an account? <a href="#" class="text-success">Register</a></p>
</div>
</div>
</div>
</div>
<?php endif; ?>
<script>
// Initialize 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 simpleAuth.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 (simpleAuth.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 simpleAuth.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 (simpleAuth.isAuthenticated() && loginModal) {
const modalInstance = bootstrap.Modal.getInstance(loginModal);
if (modalInstance) {
modalInstance.hide();
}
}
});
</script>
<!-- Main content container -->
<div class="container-fluid py-4 px-3">

18
Views/template/loginError.phtml
View File

@@ -1,18 +0,0 @@
<span class="ms-5 me-5 row alert alert-danger" role="alert"><?= $view->loginError ?></span>
<div class="row captcha-container">
<!-- CAPTCHA Display -->
<div class="form-floating mb-3 col">
<input type="text" class="form-control" id="captchaCode" value="<?php
// Generate a simple 5-character CAPTCHA
$captcha = substr(str_shuffle("ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"), 0, 5);
echo $captcha;
?>" readonly>
<label for="captchaCode">CAPTCHA Code</label>
</div>
<!-- CAPTCHA Input -->
<div class="form-floating mb-3 col">
<input type="text" class="form-control" id="captchaInput" name="captchaInput" placeholder="Enter CAPTCHA" required>
<label for="captchaInput">Enter CAPTCHA</label>
</div>
</div>

103
Views/template/loginModal.phtml
View File

@@ -31,21 +31,27 @@
<div id="loginError" class="alert alert-danger" style="display: none;"></div>
<div class="row captcha-container" style="display: none;">
<!-- CAPTCHA Display -->
<div class="col-md-6 mb-3">
<label for="captchaCode" class="form-label">CAPTCHA Code</label>
<input type="text" class="form-control bg-light" id="captchaCode" name="generatedCaptcha" value="" readonly>
</div>
<!-- CAPTCHA Input -->
<div class="col-md-6 mb-3">
<label for="captchaInput" class="form-label">Enter CAPTCHA</label>
<input type="text" class="form-control" id="captchaInput" name="captchaInput" placeholder="Enter code">
<!-- 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 gap-2 mt-4">
<div class="d-grid">
<button type="submit" class="btn btn-success">
<i class="bi bi-box-arrow-in-right me-2"></i>Login
</button>
@@ -60,4 +66,75 @@
</div>
</div>
</div>
</div>
</div>
<script>
// Handle CAPTCHA functionality
document.addEventListener('DOMContentLoaded', function() {
const captchaContainer = document.querySelector('.captcha-container');
const captchaDisplay = document.getElementById('captchaDisplay');
const refreshCaptchaBtn = document.getElementById('refreshCaptcha');
const loginForm = document.getElementById('loginForm');
// Function to update CAPTCHA display
async function updateCaptcha() {
try {
const captcha = await simpleAuth.generateCaptcha();
captchaDisplay.textContent = captcha;
document.getElementById('captchaCode').value = captcha;
} catch (error) {
console.error('Error updating CAPTCHA:', error);
}
}
// Handle CAPTCHA refresh button
if (refreshCaptchaBtn) {
refreshCaptchaBtn.addEventListener('click', updateCaptcha);
}
// Show/hide CAPTCHA based on login attempts
if (simpleAuth.needsCaptcha()) {
captchaContainer.style.display = 'block';
updateCaptcha();
}
// Handle form submission
if (loginForm) {
loginForm.addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const captchaInput = document.getElementById('captchaInput')?.value;
const result = await simpleAuth.login({
username,
password,
captchaInput
});
if (result.success) {
// Close modal and reload page
const modal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
if (modal) {
modal.hide();
}
window.location.reload();
} else {
// Show error
const loginError = document.getElementById('loginError');
if (loginError) {
loginError.textContent = result.error;
loginError.style.display = 'block';
}
// Show CAPTCHA if needed
if (result.captcha) {
captchaContainer.style.display = 'block';
updateCaptcha();
}
}
});
}
});
</script>

2
Views/template/logoutButton.phtml
View File

@@ -1,2 +0,0 @@
<?php echo "<p class='text-center bg-light border-0 rounded mb-1' style='color: black;'>" . $user->getUsername() . "<span class='bi bi-person-fill'></span></p>"?>
<button class="btn bg-danger btn-outline-danger text-light" type="button" id="logoutButton">Logout</button>

55
Views/template/statusModal.phtml
View File

@@ -9,56 +9,13 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<!-- Add Comment Form (Only shown to logged in users) -->
<?php if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true && $_SESSION['access'] >= 1): ?>
<div class="mb-4 border-bottom pb-4">
<h6 class="fw-bold mb-3">
<i class="bi bi-plus-circle text-success me-2"></i>Add New Comment
</h6>
<form id="commentForm">
<input type="hidden" name="action" value="status">
<input type="hidden" name="facilityId" id="commentFacilityId" value="">
<div class="mb-3">
<label for="commentText" class="form-label">Your Comment</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-pencil text-primary"></i>
</span>
<textarea class="form-control border-start-0" id="commentText" name="commentText" rows="3" placeholder="Share your thoughts about this facility..." required></textarea>
</div>
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">
<i class="bi bi-send me-1"></i>Post Comment
</button>
</div>
</form>
</div>
<?php endif; ?>
<!-- Existing Comments Section -->
<div>
<h6 class="fw-bold mb-3">
<i class="bi bi-chat-square-dots text-primary me-2"></i>Comments
</h6>
<div id="commentsContainer" class="comments-container">
<!-- Comments will be loaded here dynamically -->
<div class="text-center py-4 text-muted" id="noCommentsMessage">
<i class="bi bi-chat-square-text fs-4 d-block mb-2"></i>
<p>No comments yet. Be the first to share your thoughts!</p>
</div>
<!-- Comments container - this will be populated by JavaScript -->
<div id="commentsContainer" class="comments-container">
<!-- Comments will be loaded here dynamically -->
<div class="text-center py-4 text-muted" id="noCommentsMessage">
<i class="bi bi-chat-square-text fs-4 d-block mb-2"></i>
<p>Loading comments...</p>
</div>
<!-- Login Prompt for Non-Authenticated Users -->
<?php if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true): ?>
<div class="alert alert-info mt-3">
<i class="bi bi-info-circle me-2"></i>
<span>Please <a href="#" data-bs-toggle="modal" data-bs-target="#loginModal" data-bs-dismiss="modal">log in</a> to add your comments.</span>
</div>
<?php endif; ?>
</div>
</div>
<div class="modal-footer bg-light">