feat: Implement Phase 4 Web Interface with bugfixes (v0.5.2)
## Phase 4: Web Interface Implementation Implemented complete web interface with public and admin routes, templates, CSS, and development authentication. ### Core Features **Public Routes**: - Homepage with recent published notes - Note permalinks with microformats2 - Server-side rendering (Jinja2) **Admin Routes**: - Login via IndieLogin - Dashboard with note management - Create, edit, delete notes - Protected with @require_auth decorator **Development Authentication**: - Dev login bypass for local testing (DEV_MODE only) - Security safeguards per ADR-011 - Returns 404 when disabled **Templates & Frontend**: - Base layouts (public + admin) - 8 HTML templates with microformats2 - Custom responsive CSS (114 lines) - Error pages (404, 500) ### Bugfixes (v0.5.1 → v0.5.2) 1. **Cookie collision fix (v0.5.1)**: - Renamed auth cookie from "session" to "starpunk_session" - Fixed redirect loop between dev login and admin dashboard - Flask's session cookie no longer conflicts with auth 2. **HTTP 404 error handling (v0.5.1)**: - Update route now returns 404 for nonexistent notes - Delete route now returns 404 for nonexistent notes - Follows ADR-012 HTTP Error Handling Policy - Pattern consistency across all admin routes 3. **Note model enhancement (v0.5.2)**: - Exposed deleted_at field from database schema - Enables soft deletion verification in tests - Follows ADR-013 transparency principle ### Architecture **New ADRs**: - ADR-011: Development Authentication Mechanism - ADR-012: HTTP Error Handling Policy - ADR-013: Expose deleted_at Field in Note Model **Standards Compliance**: - Uses uv for Python environment - Black formatted, Flake8 clean - Follows git branching strategy - Version incremented per versioning strategy ### Test Results - 405/406 tests passing (99.75%) - 87% code coverage - All security tests passing - Manual testing confirmed working ### Documentation - Complete implementation reports in docs/reports/ - Architecture reviews in docs/reviews/ - Design documents in docs/design/ - CHANGELOG updated for v0.5.2 ### Files Changed **New Modules**: - starpunk/dev_auth.py - starpunk/routes/ (public, admin, auth, dev_auth) **Templates**: 10 files (base, pages, admin, errors) **Static**: CSS and optional JavaScript **Tests**: 4 test files for routes and templates **Docs**: 20+ architectural and implementation documents 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="admin-container">
|
||||
<nav class="admin-nav">
|
||||
<a href="{{ url_for('admin.dashboard') }}">Dashboard</a>
|
||||
<a href="{{ url_for('admin.new_note_form') }}">New Note</a>
|
||||
<form action="{{ url_for('auth.logout') }}" method="POST" class="logout-form">
|
||||
<button type="submit" class="button button-secondary">Logout</button>
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
<div class="admin-content">
|
||||
{% if user_me %}
|
||||
<p class="user-identity">Logged in as: <strong>{{ user_me }}</strong></p>
|
||||
{% endif %}
|
||||
|
||||
{% block admin_content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
{% block title %}Dashboard - StarPunk Admin{% endblock %}
|
||||
|
||||
{% block admin_content %}
|
||||
<div class="dashboard">
|
||||
<h2>All Notes</h2>
|
||||
|
||||
<div class="dashboard-actions">
|
||||
<a href="{{ url_for('admin.new_note_form') }}" class="button button-primary">
|
||||
+ New Note
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if notes %}
|
||||
<table class="note-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Content</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for note in notes %}
|
||||
<tr>
|
||||
<td class="note-content-preview">
|
||||
<div class="note-excerpt">
|
||||
{{ note.content[:100] }}{% if note.content|length > 100 %}...{% endif %}
|
||||
</div>
|
||||
<small class="note-slug">{{ note.slug }}</small>
|
||||
</td>
|
||||
<td class="note-date">
|
||||
{{ note.created_at.strftime('%b %d, %Y') }}
|
||||
</td>
|
||||
<td class="note-status">
|
||||
{% if note.published %}
|
||||
<span class="status-badge status-published">Published</span>
|
||||
{% else %}
|
||||
<span class="status-badge status-draft">Draft</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="note-actions">
|
||||
{% if note.published %}
|
||||
<a href="{{ url_for('public.note', slug=note.slug) }}" class="button button-small" target="_blank">
|
||||
View
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('admin.edit_note_form', note_id=note.id) }}" class="button button-small">
|
||||
Edit
|
||||
</a>
|
||||
<form action="{{ url_for('admin.delete_note_submit', note_id=note.id) }}" method="POST" class="delete-form" onsubmit="return confirm('Are you sure you want to delete this note?');">
|
||||
<input type="hidden" name="confirm" value="yes">
|
||||
<button type="submit" class="button button-small button-danger">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<p>No notes yet. Create your first note!</p>
|
||||
<a href="{{ url_for('admin.new_note_form') }}" class="button button-primary">
|
||||
Create First Note
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
{% block title %}Edit Note - StarPunk Admin{% endblock %}
|
||||
|
||||
{% block admin_content %}
|
||||
<div class="note-editor">
|
||||
<h2>Edit Note</h2>
|
||||
<p class="note-meta">
|
||||
Slug: <code>{{ note.slug }}</code> |
|
||||
Created: {{ note.created_at.strftime('%B %d, %Y at %I:%M %p') }}
|
||||
</p>
|
||||
|
||||
<form action="{{ url_for('admin.update_note_submit', note_id=note.id) }}" method="POST" class="note-form">
|
||||
<div class="form-group">
|
||||
<label for="content">Content (Markdown)</label>
|
||||
<textarea
|
||||
id="content"
|
||||
name="content"
|
||||
rows="20"
|
||||
required
|
||||
autofocus
|
||||
>{{ note.content }}</textarea>
|
||||
<small>Use Markdown syntax for formatting</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-checkbox">
|
||||
<input type="checkbox" id="published" name="published" {% if note.published %}checked{% endif %}>
|
||||
<label for="published">Published</label>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="button button-primary">Update Note</button>
|
||||
<a href="{{ url_for('admin.dashboard') }}" class="button button-secondary">Cancel</a>
|
||||
<form action="{{ url_for('admin.delete_note_submit', note_id=note.id) }}" method="POST" class="delete-form" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this note? This cannot be undone.');">
|
||||
<input type="hidden" name="confirm" value="yes">
|
||||
<button type="submit" class="button button-danger">Delete Note</button>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/preview.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Login - StarPunk Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="login-container">
|
||||
<h2>Admin Login</h2>
|
||||
<p>Sign in with your personal website using IndieLogin</p>
|
||||
|
||||
<form action="{{ url_for('auth.login_initiate') }}" method="POST" class="login-form">
|
||||
<div class="form-group">
|
||||
<label for="me">Your Website URL</label>
|
||||
<input
|
||||
type="url"
|
||||
id="me"
|
||||
name="me"
|
||||
placeholder="https://example.com"
|
||||
required
|
||||
autofocus
|
||||
>
|
||||
<small>Enter your website URL (must match admin configuration)</small>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button button-primary">Sign in with IndieLogin</button>
|
||||
</form>
|
||||
|
||||
{% if config.DEV_MODE %}
|
||||
<div class="dev-login-option">
|
||||
<hr>
|
||||
<p class="dev-warning">Development mode active</p>
|
||||
<a href="{{ url_for('dev_auth.dev_login') }}" class="button button-warning">
|
||||
Quick Dev Login (No Auth)
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="login-help">
|
||||
<h3>What is IndieLogin?</h3>
|
||||
<p>
|
||||
IndieLogin allows you to sign in using your own website.
|
||||
No password required - just authenticate with your domain.
|
||||
</p>
|
||||
<a href="https://indielogin.com/api" target="_blank" rel="noopener">
|
||||
Learn more about IndieLogin
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
{% block title %}New Note - StarPunk Admin{% endblock %}
|
||||
|
||||
{% block admin_content %}
|
||||
<div class="note-editor">
|
||||
<h2>Create New Note</h2>
|
||||
|
||||
<form action="{{ url_for('admin.create_note_submit') }}" method="POST" class="note-form">
|
||||
<div class="form-group">
|
||||
<label for="content">Content (Markdown)</label>
|
||||
<textarea
|
||||
id="content"
|
||||
name="content"
|
||||
rows="20"
|
||||
placeholder="Write your note in markdown..."
|
||||
required
|
||||
autofocus
|
||||
></textarea>
|
||||
<small>Use Markdown syntax for formatting</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-checkbox">
|
||||
<input type="checkbox" id="published" name="published" checked>
|
||||
<label for="published">Publish immediately</label>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="button button-primary">Create Note</button>
|
||||
<a href="{{ url_for('admin.dashboard') }}" class="button button-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/preview.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user