Updated to do local content w/ passwording and encryption

templates/password_prompt.html

@@ -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 %}

templates/view.html

@@ -2,19 +2,76 @@
 
 {% block title %}{{ filename }} - markMyWords{% endblock %}
 
+{% block extra_head %}
+<style>
+    .protection-badge {
+        display: inline-block;
+        background-color: #fff3cd;
+        border: 1px solid #ffc107;
+        color: #856404;
+        padding: 6px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        margin-left: 10px;
+    }
+    
+    .protection-badge::before {
+        content: "🔒 ";
+    }
+    
+    .admin-controls {
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid #eee;
+        display: none;
+    }
+    
+    .admin-controls.visible {
+        display: block;
+    }
+    
+    .admin-button {
+        padding: 6px 12px;
+        margin-right: 10px;
+        border: 1px solid #ddd;
+        background-color: #f5f5f5;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        transition: background-color 0.2s;
+    }
+    
+    .admin-button:hover {
+        background-color: #e0e0e0;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container">
     <div class="breadcrumb">
         <a href="/">Home</a> > 
         <span class="breadcrumb-repo">{{ repo }}</span> >
         <span class="breadcrumb-file">{{ filename }}</span>
+        {% if is_protected %}<span class="protection-badge" title="This document is password protected"></span>{% endif %}
     </div>
 
     <article class="markdown-content">
-        <h1>{{ filename }}</h1>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+            <h1>{{ filename }}</h1>
+        </div>
         <div class="content-body">
             {{ content|safe }}
         </div>
     </article>
 </div>
+
+<script>
+    // Check if admin controls should be shown via query parameter
+    const params = new URLSearchParams(window.location.search);
+    if (params.has('admin')) {
+        document.querySelector('.admin-controls').classList.add('visible');
+    }
+</script>
 {% endblock %}