AudioBookRequest/templates/settings_page/users.html

{% extends "settings_page/base.html" %} {% block head %}
<title>Settings - Users</title>
{% include 'scripts/toast.html' %}
{% endblock %} {% block content %}
<form
  id="create-user-form"
  class="flex flex-col gap-2"
  hx-post="/settings/user"
  hx-target="#user-list"
  hx-on::after-request="if (event.detail.successful && event.detail.target?.id === 'user-list') this.reset()"
  hx-swap="outerHTML"
  hx-disabled-elt="#submit"
>
  <h2 class="text-lg">Create user</h2>
  <label for="username">Username</label>
  <input
    id="username"
    name="username"
    minlength="1"
    type="text"
    class="input w-full"
    required
  />

  <label for="password">Password</label>
  <input
    id="password"
    name="password"
    type="password"
    class="input w-full"
    required
  />

  <label for="select-group">Group</label>
  <select id="select-group" name="group" class="select w-full" required>
    <option value="untrusted" selected>Untrusted</option>
    <option value="trusted">Trusted</option>
    <option value="admin">Admin</option>
  </select>

  <button id="submit" class="btn btn-primary" type="submit">Create user</button>
</form>

{% block user_block %}
<div id="user-list" class="pt-4 border-t border-base-200">
  <h2 class="text-lg">Users</h2>

  {% block toast_block %}
  <div class="hidden" id="toast-block">
    {% if error %}
    <script>
      toast("{{error|safe}}", "error");
    </script>
    {% endif %}
    {% if success %}
    <script>
      toast("{{success|safe}}", "success");
    </script>
    {% endif %}
  </div>
{% endblock %}

  <div class="max-h-[30rem] overflow-x-auto">
    <table class="table table-pin-rows">
      <thead>
        <tr>
          <th></th>
          <th>Username</th>
          <th>Group</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr>
          <th>{{ loop.index }}</th>
          <td>{{ u.username }}</td>
          <td>
            <!-- prettier-ignore -->
            <select
              id="select-group"
              name="group"
              class="select w-full"
              required {% if u.root %}disabled{% endif %}
              hx-patch="/settings/user/{{ u.username|quote_plus }}"
              hx-trigger="change"
              hx-disabled-elt="this"
              hx-target="#user-list"
              hx-swap="outerHTML"
            >
              <option value="untrusted" {% if u.group.value.__eq__("untrusted") %}selected{% endif %}>Untrusted</option>
              <option value="trusted" {% if u.group.value.__eq__("trusted") %}selected{% endif %}>Trusted</option>
              <option value="admin" {% if u.group.value.__eq__("admin") %}selected{% endif %}>Admin</option>
              {% if u.root %}<option value="admin" selected>Root Admin</option>{% endif %}
            </select>
          </td>
          <td {% if u.root %}title="Root user" {% endif %}>
            <!--prettier-ignore -->
            <button
                class="btn btn-square btn-ghost"
                onclick="delete_modal_{{ loop.index }}.showModal()"
                {% if u.is_self(user.username) or u.root %}disabled{% endif %}
                >
                  {% include 'icons/trash.html' %}
                </button>
            <dialog id="delete_modal_{{ loop.index }}" class="modal">
              <div class="modal-box">
                <h3 class="text-lg font-bold">
                  Are you sure you want to delete a user?
                </h3>
                <div class="grid grid-cols-2 py-4">
                  <span class="font-semibold mr-2">Username</span
                  ><span class="font-mono">{{ u.username }}</span>
                  <span class="font-semibold mr-2">Group</span
                  ><span class="font-mono"
                    >{{ u.group.value.capitalize() }}</span
                  >
                </div>
                <form method="dialog" class="flex justify-between">
                  <button class="btn">Cancel</button>
                  <button
                    class="btn bg-primary"
                    hx-delete="/settings/user/{{ u.username|quote_plus }}"
                    hx-disabled-elt="this"
                    hx-target="#user-list"
                    hx-swap="outerHTML"
                  >
                    Delete
                  </button>
                </form>
              </div>
              <form method="dialog" class="modal-backdrop">
                <button>close</button>
              </form>
            </dialog>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %} {% endblock %}