Updated to do local content w/ passwording and encryption

2026-08-28 14:59:19 -04:00
parent 2dc05e72d4
commit af59158ff9
9 changed files with 1642 additions and 233 deletions
@@ -0,0 +1,179 @@
+{% 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/{{ repo }}/{{ 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 %}