Ecobuddy/Views/template/loginModal.phtml

<!-- 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">
                <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>
            </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 auth.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 (auth.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 auth.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>