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

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>