Initial Claude implementation

app/templates/_nav.html

@@ -0,0 +1,17 @@
+<header class="topbar">
+  <div class="brand"><a href="/">{{ app_name }}</a></div>
+  <nav>
+    <a href="/">Dashboard</a>
+    {% if user.is_superuser or "users:read" in user.permissions %}
+      <a href="/admin/users">Users</a>
+    {% endif %}
+    {% if user.is_superuser or "roles:read" in user.permissions %}
+      <a href="/admin/roles">Roles</a>
+    {% endif %}
+    <a href="/docs" target="_blank">API docs</a>
+  </nav>
+  <form method="post" action="/logout" class="logout">
+    <span class="muted">{{ user.email }}</span>
+    <button type="submit" class="btn btn-ghost">Sign out</button>
+  </form>
+</header>

app/templates/admin/_roles_table.html

@@ -0,0 +1,24 @@
+<div id="role-list" class="card">
+  <table class="table">
+    <thead>
+      <tr><th>ID</th><th>Name</th><th>Description</th><th>Permissions</th><th></th></tr>
+    </thead>
+    <tbody>
+      {% for r in roles %}
+        <tr id="role-{{ r.id }}">
+          <td>{{ r.id }}</td>
+          <td>{{ r.name }}</td>
+          <td>{{ r.description or "" }}</td>
+          <td>{% for perm in r.permissions %}<span class="tag">{{ perm.name }}</span>{% endfor %}</td>
+          <td class="row-actions">
+            <button class="btn btn-danger"
+                    hx-delete="/admin/roles/{{ r.id }}"
+                    hx-target="#role-{{ r.id }}"
+                    hx-swap="outerHTML"
+                    hx-confirm="Delete role {{ r.name }}?">Delete</button>
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

app/templates/admin/_user_row.html

@@ -0,0 +1,19 @@
+<tr id="user-{{ u.id }}">
+  <td>{{ u.id }}</td>
+  <td>{{ u.email }}</td>
+  <td>{{ u.full_name or "" }}</td>
+  <td>{{ "✓" if u.is_active else "—" }}</td>
+  <td>{{ "✓" if u.is_superuser else "—" }}</td>
+  <td>{% for role in u.roles %}<span class="tag">{{ role.name }}</span>{% endfor %}</td>
+  <td class="row-actions">
+    <button class="btn btn-ghost"
+            hx-get="/admin/users/{{ u.id }}/edit"
+            hx-target="#user-{{ u.id }}"
+            hx-swap="outerHTML">Edit</button>
+    <button class="btn btn-danger"
+            hx-delete="/admin/users/{{ u.id }}"
+            hx-target="#user-{{ u.id }}"
+            hx-swap="outerHTML"
+            hx-confirm="Delete user {{ u.email }}?">Delete</button>
+  </td>
+</tr>

app/templates/admin/_user_row_edit.html

@@ -0,0 +1,30 @@
+<tr id="user-{{ u.id }}">
+  <td colspan="7">
+    <form hx-post="/admin/users/{{ u.id }}"
+          hx-target="#user-{{ u.id }}"
+          hx-swap="outerHTML"
+          class="inline-edit">
+      <span class="muted">#{{ u.id }} · {{ u.email }}</span>
+      <label>Name <input type="text" name="full_name" value="{{ u.full_name or '' }}"></label>
+      <label>New password <input type="password" name="password" placeholder="(unchanged)"></label>
+      <label class="check"><input type="checkbox" name="is_active" value="true" {{ "checked" if u.is_active }}> Active</label>
+      <label class="check"><input type="checkbox" name="is_superuser" value="true" {{ "checked" if u.is_superuser }}> Superuser</label>
+      <fieldset class="roles-field">
+        <legend>Roles</legend>
+        {% for role in roles %}
+          <label class="check">
+            <input type="checkbox" name="role_ids" value="{{ role.id }}"
+                   {{ "checked" if role in u.roles }}> {{ role.name }}
+          </label>
+        {% endfor %}
+      </fieldset>
+      <div class="row-actions">
+        <button type="submit" class="btn btn-primary">Save</button>
+        <button type="button" class="btn btn-ghost"
+                hx-get="/admin/users/{{ u.id }}/row"
+                hx-target="#user-{{ u.id }}"
+                hx-swap="outerHTML">Cancel</button>
+      </div>
+    </form>
+  </td>
+</tr>

app/templates/admin/_users_table.html

@@ -0,0 +1,14 @@
+<div id="user-list" class="card">
+  <table class="table">
+    <thead>
+      <tr>
+        <th>ID</th><th>Email</th><th>Name</th><th>Active</th><th>Superuser</th><th>Roles</th><th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for u in users %}
+        {% include "admin/_user_row.html" %}
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

app/templates/admin/roles.html

@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+{% block title %}Roles · {{ app_name }}{% endblock %}
+{% block body %}
+{% include "_nav.html" %}
+<main class="container">
+  <h1>Roles &amp; permissions</h1>
+
+  <div class="card">
+    <h2>Create role</h2>
+    <form hx-post="/admin/roles" hx-target="#role-list" hx-swap="outerHTML" class="form-grid">
+      <label>Name <input type="text" name="name" required></label>
+      <label>Description <input type="text" name="description"></label>
+      <fieldset class="roles-field">
+        <legend>Permissions</legend>
+        {% for perm in permissions %}
+          <label class="check"><input type="checkbox" name="permission_ids" value="{{ perm.id }}"> {{ perm.name }}</label>
+        {% else %}
+          <span class="muted">No permissions defined. Run the seed script.</span>
+        {% endfor %}
+      </fieldset>
+      <button type="submit" class="btn btn-primary">Add role</button>
+    </form>
+  </div>
+
+  {% include "admin/_roles_table.html" %}
+</main>
+{% endblock %}

app/templates/admin/users.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% block title %}Users · {{ app_name }}{% endblock %}
+{% block body %}
+{% include "_nav.html" %}
+<main class="container">
+  <h1>Users</h1>
+
+  <div class="card">
+    <h2>Create user</h2>
+    <form hx-post="/admin/users" hx-target="#user-list" hx-swap="outerHTML" class="form-grid">
+      <label>Email <input type="email" name="email" required></label>
+      <label>Full name <input type="text" name="full_name"></label>
+      <label>Password <input type="password" name="password" required></label>
+      <label class="check">
+        <input type="checkbox" name="is_superuser" value="true"> Superuser
+      </label>
+      <fieldset class="roles-field">
+        <legend>Roles</legend>
+        {% for role in roles %}
+          <label class="check"><input type="checkbox" name="role_ids" value="{{ role.id }}"> {{ role.name }}</label>
+        {% endfor %}
+      </fieldset>
+      <button type="submit" class="btn btn-primary">Add user</button>
+    </form>
+  </div>
+
+  {% include "admin/_users_table.html" %}
+</main>
+{% endblock %}

app/templates/base.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% block title %}{{ app_name }}{% endblock %}</title>
+  <link rel="stylesheet" href="/static/css/style.css">
+  <script src="https://unpkg.com/htmx.org@1.9.12"
+          integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
+          crossorigin="anonymous"></script>
+</head>
+<body>
+  {% block body %}{% endblock %}
+</body>
+</html>

app/templates/dashboard.html

@@ -0,0 +1,40 @@
+{% extends "base.html" %}
+{% block title %}Dashboard · {{ app_name }}{% endblock %}
+{% block body %}
+{% include "_nav.html" %}
+<main class="container">
+  <h1>Dashboard</h1>
+  <p class="muted">Welcome back, {{ user.full_name or user.email }}.</p>
+
+  <div class="grid">
+    <div class="card">
+      <h2>Your account</h2>
+      <dl class="kv">
+        <dt>Email</dt><dd>{{ user.email }}</dd>
+        <dt>Superuser</dt><dd>{{ "Yes" if user.is_superuser else "No" }}</dd>
+        <dt>Roles</dt>
+        <dd>
+          {% for role in user.roles %}<span class="tag">{{ role.name }}</span>{% else %}<span class="muted">none</span>{% endfor %}
+        </dd>
+        <dt>Permissions</dt>
+        <dd>
+          {% if user.is_superuser %}<span class="tag">* (all)</span>
+          {% else %}
+            {% for perm in user.permissions|sort %}<span class="tag">{{ perm }}</span>{% else %}<span class="muted">none</span>{% endfor %}
+          {% endif %}
+        </dd>
+      </dl>
+    </div>
+
+    <div class="card">
+      <h2>Quick links</h2>
+      <ul class="links">
+        <li><a href="/admin/users">Manage users</a></li>
+        <li><a href="/admin/roles">Manage roles &amp; permissions</a></li>
+        <li><a href="/docs" target="_blank">Interactive API docs (Swagger)</a></li>
+        <li><a href="/redoc" target="_blank">API reference (ReDoc)</a></li>
+      </ul>
+    </div>
+  </div>
+</main>
+{% endblock %}

app/templates/login.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+{% block title %}Sign in · {{ app_name }}{% endblock %}
+{% block body %}
+<div class="auth-shell">
+  <form class="card auth-card" method="post" action="/login">
+    <h1>{{ app_name }}</h1>
+    <p class="muted">Sign in to continue</p>
+    {% if error %}<div class="alert">{{ error }}</div>{% endif %}
+    <label>Email
+      <input type="email" name="email" value="{{ email or '' }}" required autofocus>
+    </label>
+    <label>Password
+      <input type="password" name="password" required>
+    </label>
+    <button type="submit" class="btn btn-primary">Sign in</button>
+  </form>
+</div>
+{% endblock %}