web permissions2

web/templates/pages/permissions/roles/roles.html

@@ -0,0 +1,84 @@
+{# GET /permissions/roles — crate::pages::permissions::roles::ui::RolesTemplate #}
+{% extends "ui/base.html" %}
+
+{% block title %}Roles{% endblock %}
+
+{% block content %}
+<main>
+  <section class="heading">
+    <div>
+      <p class="eyebrow">Permissions</p>
+      <h1>Roles</h1>
+      <p>A role is a named set of permissions. People are given roles; roles are given access.</p>
+    </div>
+  </section>
+
+  {% include "pages/permissions/tabs.html" %}
+
+  {% if page.updated %}<p class="notice">Roles updated. Signed-in sessions stay valid and pick up the change on their next request.</p>{% endif %}
+
+  <section class="panel">
+    <h2>New role</h2>
+    <p class="hint">
+      Inheriting from another role starts the new one with everything that role has, and keeps it in step
+      as that role changes. Starter access is a shortcut for the two common cases; anything narrower is a
+      few clicks on the Access tab.
+    </p>
+    <form hx-post="/permissions/roles/create" hx-target="#permission-status" class="form-grid">
+      <label>Name<input name="name" required maxlength="50" placeholder="sales"></label>
+      <label>Inherits from
+        <select name="parent">
+          <option value="">Nothing — starts empty</option>
+          {% for parent in page.parents %}<option value="{{ parent }}">{{ parent }}</option>{% endfor %}
+        </select>
+      </label>
+      <label>Starter access
+        <select name="access">
+          <option value="none">None — grant it on the Access tab</option>
+          <option value="read">Read everything</option>
+          <option value="full">Read and write everything</option>
+        </select>
+      </label>
+      <div class="form-actions"><button type="submit">Create role</button></div>
+    </form>
+  </section>
+
+  <section class="panel">
+    <h2>Existing roles<span class="count">{{ page.roles.len() }}</span></h2>
+    <div class="table-scroll">
+      <table class="builder-table">
+        <thead><tr><th>Role</th><th>Kind</th><th>Inherits from</th><th>People</th><th>Access</th><th>Remove</th></tr></thead>
+        <tbody>
+          {% for role in page.roles %}
+          <tr>
+            <td>{{ role.name }}{% if role.built_in %} <span class="tag">built in</span>{% endif %}</td>
+            <td>{{ role.kind }}</td>
+            <td>{% if role.parent.is_empty() %}<span class="hint">—</span>{% else %}{{ role.parent }}{% endif %}</td>
+            <td>{% match role.users %}{% when Some with (count) %}{{ count }}{% when None %}<span class="hint">—</span>{% endmatch %}</td>
+            <td>
+              {% if role.editable %}
+                <a class="link-action" href="/permissions/grants?role={{ role.name }}">Edit access</a>
+              {% else %}
+                <span class="hint">outranks you</span>
+              {% endif %}
+            </td>
+            <td>
+              {% if role.removable() %}
+              <form hx-post="/permissions/roles/remove" hx-target="#permission-status">
+                <input type="hidden" name="role" value="{{ role.name }}">
+                <button type="submit" class="danger">Remove</button>
+              </form>
+              {% else %}
+                <span class="hint">{{ role.keeps_reason() }}</span>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <div id="permission-status" aria-live="polite"></div>
+</main>
+{% endblock %}