markmywords/templates/password_prompt.html

{% extends "base.html" %}

{% block title %}Password Protected - markMyWords{% endblock %}

{% block extra_head %}
<style>
    .password-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
    }
    
    .password-box {
        background: white;
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 40px;
        max-width: 400px;
        width: 100%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .password-box h2 {
        margin: 0 0 10px 0;
        color: #333;
        text-align: center;
    }
    
    .password-box p {
        margin: 0 0 25px 0;
        color: #666;
        text-align: center;
        font-size: 14px;
    }
    
    .password-form {
        display: flex;
        flex-direction: column;
    }
    
    .password-form input[type="password"] {
        padding: 12px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        font-family: inherit;
    }
    
    .password-form input[type="password"]:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
    
    .password-form button {
        padding: 12px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        transition: background-color 0.3s;
    }
    
    .password-form button:hover {
        background-color: #45a049;
    }
    
    .password-form button:active {
        background-color: #3d8b40;
    }
    
    .error-message {
        color: #d32f2f;
        margin-bottom: 15px;
        padding: 10px;
        background-color: #ffebee;
        border-radius: 4px;
        display: none;
        text-align: center;
        font-size: 14px;
    }
    
    .file-name {
        color: #999;
        font-size: 12px;
        text-align: center;
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }
</style>
{% endblock %}

{% block content %}
<div class="password-container">
    <div class="password-box">
        <h2>🔒 Protected Document</h2>
        <p>This document is password protected. Please enter the password to view it.</p>
        
        <form class="password-form" id="passwordForm">
            <div class="error-message" id="errorMessage"></div>
            <input 
                type="password" 
                id="passwordInput" 
                placeholder="Enter password" 
                required
                autofocus
            >
            <button type="submit">Unlock</button>
        </form>
        
        <div class="file-name">
            📄 {{ filename }}
        </div>
    </div>
</div>

<script>
    document.getElementById('passwordForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const password = document.getElementById('passwordInput').value;
        const errorDiv = document.getElementById('errorMessage');
        const button = e.target.querySelector('button');
        
        // Clear previous errors
        errorDiv.style.display = 'none';
        errorDiv.textContent = '';
        
        // Disable button while submitting
        button.disabled = true;
        button.textContent = 'Authenticating...';
        
        try {
            const response = await fetch('/api/auth/{{ filepath }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    'password': password
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                // Redirect to the file
                window.location.href = data.redirect;
            } else {
                // Show error
                errorDiv.textContent = data.error || 'Authentication failed';
                errorDiv.style.display = 'block';
                document.getElementById('passwordInput').value = '';
                document.getElementById('passwordInput').focus();
            }
        } catch (error) {
            errorDiv.textContent = 'An error occurred. Please try again.';
            errorDiv.style.display = 'block';
            console.error('Authentication error:', error);
        } finally {
            button.disabled = false;
            button.textContent = 'Unlock';
        }
    });
    
    // Allow Enter key to submit
    document.getElementById('passwordInput').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            document.getElementById('passwordForm').dispatchEvent(new Event('submit'));
        }
    });
</script>
{% endblock %}