@geekity/cms 0.3.0

package/admin/layouts/settings.njk

@@ -0,0 +1,116 @@
+{# /admin/settings: the values doc-5 lists, stored in SQLite and mirrored to
+   content/_data/site.json on every save. #}
+{% extends "layouts/shell.njk" %}
+
+{% block title %}Settings{% endblock %}
+
+{% block content %}
+  <h1>Settings</h1>
+
+  {% if problems.title or problems.tagline or problems.baseUrl or problems.timezone or problems.postsPerPage or problems.author or problems.actorHandle or problems.actorType %}
+    <p class="admin-error">Nothing was saved. Fix the fields marked below and try again.</p>
+  {% endif %}
+
+  <form class="admin-settings" method="post" action="{{ settingsUrl }}">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+
+    <h2>Site</h2>
+
+    <label for="settings-title">Title</label>
+    <input id="settings-title" name="{{ fields.title }}" type="text" value="{{ form.title }}" required autofocus />
+    {% if problems.title %}<p class="admin-field-error">{{ problems.title }}</p>{% endif %}
+
+    <label for="settings-tagline">Tagline</label>
+    <input id="settings-tagline" name="{{ fields.tagline }}" type="text" value="{{ form.tagline }}" />
+    <p class="admin-hint">One line, shown under the title and used as the feed subtitle.</p>
+
+    <label for="settings-author">Author</label>
+    <input id="settings-author" name="{{ fields.author }}" type="text" value="{{ form.author }}" />
+    <p class="admin-hint">The name on the feeds.</p>
+
+    <label for="settings-base-url">Base URL</label>
+    <input
+      id="settings-base-url"
+      name="{{ fields.baseUrl }}"
+      type="text"
+      value="{{ form.baseUrl }}"
+      inputmode="url"
+      {% if baseUrlOverridden %}readonly disabled{% endif %}
+    />
+    {% if problems.baseUrl %}<p class="admin-field-error">{{ problems.baseUrl }}</p>{% endif %}
+    <p class="admin-hint">
+      In effect: <code>{{ baseUrlInEffect }}</code>. {{ baseUrlNote }}
+    </p>
+
+    <label for="settings-timezone">Time zone</label>
+    <input id="settings-timezone" name="{{ fields.timezone }}" type="text" value="{{ form.timezone }}" required />
+    {% if problems.timezone %}<p class="admin-field-error">{{ problems.timezone }}</p>{% endif %}
+    <p class="admin-hint">An IANA name, such as <code>Europe/London</code> or <code>UTC</code>.</p>
+
+    <label for="settings-posts-per-page">Posts per page</label>
+    <input id="settings-posts-per-page" name="{{ fields.postsPerPage }}" type="text" inputmode="numeric" value="{{ form.postsPerPage }}" required />
+    {% if problems.postsPerPage %}<p class="admin-field-error">{{ problems.postsPerPage }}</p>{% endif %}
+
+    <h2>Federation</h2>
+
+    <label for="settings-actor-handle">Actor handle</label>
+    <input id="settings-actor-handle" name="{{ fields.actorHandle }}" type="text" value="{{ form.actorHandle }}" required />
+    {% if problems.actorHandle %}<p class="admin-field-error">{{ problems.actorHandle }}</p>{% endif %}
+    <p class="admin-hint">The local part of the site's handle: <code>@{{ form.actorHandle }}@…</code>.</p>
+
+    <label for="settings-actor-type">Actor type</label>
+    <select id="settings-actor-type" name="{{ fields.actorType }}">
+      {% for type in actorTypes %}
+        <option value="{{ type }}"{% if type == form.actorType %} selected{% endif %}>{{ type }}</option>
+      {% endfor %}
+    </select>
+    {% if problems.actorType %}<p class="admin-field-error">{{ problems.actorType }}</p>{% endif %}
+    <p class="admin-hint">Some clients hide <code>Service</code> actors from timelines; <code>Person</code> is the safer default.</p>
+
+    <p class="admin-settings-buttons">
+      <button type="submit">Save settings</button>
+    </p>
+  </form>
+
+  {# The avatar is its own pair of forms: a file cannot travel in the
+     urlencoded body the settings form posts, and a rejected image must not
+     take an edit to the title down with it. #}
+  <section class="admin-settings admin-avatar-panel">
+    <h2>Avatar</h2>
+
+    <div class="admin-avatar-current">
+      {% if avatar %}
+        <img class="admin-avatar admin-avatar-large" src="{{ avatar }}" alt="The site's avatar" width="96" height="96" />
+      {% else %}
+        <span class="admin-avatar admin-avatar-large admin-avatar-blank" aria-hidden="true"></span>
+      {% endif %}
+
+      <div class="admin-avatar-forms">
+        <form method="post" action="{{ avatarUrl }}" enctype="multipart/form-data">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          <label for="settings-avatar">Image</label>
+          <input id="settings-avatar" name="{{ avatarFields.file }}" type="file" accept="image/png,image/jpeg,image/webp,image/gif" required />
+          <p class="admin-settings-buttons">
+            <button type="submit">Upload avatar</button>
+          </p>
+        </form>
+
+        {% if avatar %}
+          <form method="post" action="{{ avatarUrl }}">
+            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+            <input type="hidden" name="{{ avatarFields.action }}" value="{{ avatarRemove }}" />
+            <p class="admin-settings-buttons">
+              <button type="submit">Remove avatar</button>
+            </p>
+          </form>
+        {% endif %}
+      </div>
+    </div>
+
+    <p class="admin-hint">
+      A PNG, JPEG, WebP or GIF, stored with the site's other uploads. It is the
+      picture on the site's fediverse profile, and saving or removing it tells
+      the followers.
+    </p>
+  </section>
+{% endblock %}

package/admin/layouts/setup.njk

@@ -0,0 +1,27 @@
+{% extends "layouts/base.njk" %}
+
+{% block title %}Set up{% endblock %}
+
+{% block content %}
+  <h1>Create the first admin</h1>
+  <p>Nobody can sign in to this site yet. Pick a username and a password.</p>
+
+  {% if error %}
+    <p class="error">{{ error }}</p>
+  {% endif %}
+
+  <form method="post" action="{{ setupUrl }}">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+
+    <label for="username">Username</label>
+    <input id="username" name="username" type="text" autocomplete="username" value="{{ username }}" required autofocus />
+
+    <label for="password">Password</label>
+    <input id="password" name="password" type="password" autocomplete="new-password" required />
+
+    <label for="password_confirmation">Repeat the password</label>
+    <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required />
+
+    <button type="submit">Create admin</button>
+  </form>
+{% endblock %}

package/admin/layouts/shell.njk

@@ -0,0 +1,37 @@
+{# The signed-in admin: a bar across the top, the sections down the left, the
+   screen itself in the middle. Every screen behind the login extends this. #}
+{% extends "layouts/base.njk" %}
+
+{% block chrome %}
+  <header class="admin-bar">
+    <a class="admin-bar-site" href="{{ adminUrl }}">{{ site.title }}</a>
+    <a href="{{ siteUrl }}">View site</a>
+    <span class="admin-bar-spacer"></span>
+    {% if user %}
+      <span class="admin-bar-user">Signed in as {{ user.username }}</span>
+      <form method="post" action="{{ logoutUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <button type="submit">Log out</button>
+      </form>
+    {% endif %}
+  </header>
+{% endblock %}
+
+{% block main %}
+  <div class="admin-shell">
+    <nav class="admin-nav" aria-label="Sections">
+      <ul>
+        {% for item in navigation %}
+          <li>
+            <a href="{{ item.url }}"{% if item.section == section %} aria-current="page"{% endif %}>{{ item.label }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
+
+    <main class="admin-main">
+      {% include "layouts/_flash.njk" %}
+      {% block content %}{% endblock %}
+    </main>
+  </div>
+{% endblock %}

package/admin/layouts/users.njk

@@ -0,0 +1,91 @@
+{# /admin/users: who can sign in, how to add one, and how to change your own
+   password. One role, so a row has no fields to edit. #}
+{% extends "layouts/shell.njk" %}
+
+{% block title %}Users{% endblock %}
+
+{% block content %}
+  <h1>Users</h1>
+
+  <table class="admin-list">
+    <thead>
+      <tr>
+        <th scope="col">Username</th>
+        <th scope="col">Created</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for entry in users %}
+        <tr>
+          <td>{{ entry.username }}{% if entry.you %} <span class="admin-status">(you)</span>{% endif %}</td>
+          <td>{{ entry.createdAt | date('html') }}</td>
+          <td class="admin-actions">
+            {% if entry.deletable %}
+              <form method="post" action="{{ deleteUserUrl }}">
+                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                <input type="hidden" name="{{ fields.userId }}" value="{{ entry.id }}" />
+                <button type="submit">Delete</button>
+              </form>
+            {% endif %}
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+
+  <form class="admin-settings" method="post" action="{{ usersUrl }}">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+
+    <h2>Add a user</h2>
+
+    {% if addProblems.username or addProblems.password %}
+      <p class="admin-error">Nobody was added. Fix the fields marked below and try again.</p>
+    {% endif %}
+
+    <label for="add-username">Username</label>
+    <input id="add-username" name="{{ fields.username }}" type="text" value="{{ addForm.username }}" required />
+    {% if addProblems.username %}<p class="admin-field-error">{{ addProblems.username }}</p>{% endif %}
+
+    <label for="add-password">Password</label>
+    <input id="add-password" name="{{ fields.password }}" type="password" autocomplete="new-password" />
+    {% if addProblems.password %}<p class="admin-field-error">{{ addProblems.password }}</p>{% endif %}
+
+    <p class="admin-check">
+      <input id="add-generate" name="{{ fields.generate }}" type="checkbox" value="1"{% if addForm.generate %} checked{% endif %} />
+      <label for="add-generate">Generate one instead, and show it to me once</label>
+    </p>
+    <p class="admin-hint">A generated password is shown on the next page and nowhere else. Copy it before you leave.</p>
+
+    <p class="admin-settings-buttons">
+      <button type="submit">Add user</button>
+    </p>
+  </form>
+
+  <form class="admin-settings" method="post" action="{{ changePasswordUrl }}">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+
+    <h2>Change your password</h2>
+
+    {% if passwordProblems.currentPassword or passwordProblems.newPassword %}
+      <p class="admin-error">Your password was not changed. Fix the fields marked below and try again.</p>
+    {% endif %}
+
+    <label for="current-password">Current password</label>
+    <input id="current-password" name="{{ fields.currentPassword }}" type="password" autocomplete="current-password" required />
+    {% if passwordProblems.currentPassword %}<p class="admin-field-error">{{ passwordProblems.currentPassword }}</p>{% endif %}
+
+    <label for="new-password">New password</label>
+    <input id="new-password" name="{{ fields.newPassword }}" type="password" autocomplete="new-password" required />
+    {% if passwordProblems.newPassword %}<p class="admin-field-error">{{ passwordProblems.newPassword }}</p>{% endif %}
+
+    <label for="new-password-confirmation">New password again</label>
+    <input id="new-password-confirmation" name="{{ fields.newPasswordConfirmation }}" type="password" autocomplete="new-password" required />
+
+    <p class="admin-hint">Every other browser signed in as you is signed out. This one stays.</p>
+
+    <p class="admin-settings-buttons">
+      <button type="submit">Change password</button>
+    </p>
+  </form>
+{% endblock %}