@@ -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>
|
Reference in New Issue
Block a user