overlord/Overlord-Server/public/user-client-access.html

<!doctype html>
<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>User Client Access - Overlord</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
    <link rel="stylesheet" href="/assets/tailwind.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="/assets/main.css" />
  </head>
  <body class="min-h-screen bg-slate-950 text-slate-100">
    <header id="top-nav"></header>

    <main class="w-full px-4 py-7 space-y-5 min-h-[calc(100vh-72px)]">
      <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h1 class="text-2xl font-bold">Client Visibility Access</h1>
          <p class="text-slate-400 text-sm" id="target-user-subtitle">Loading user...</p>
        </div>
        <a
          href="/users"
          class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 hover:bg-slate-700"
        >
          <i class="fa-solid fa-arrow-left"></i>
          <span>Back to Users</span>
        </a>
      </div>

      <section class="grid grid-cols-1 xl:grid-cols-3 gap-4 min-h-[calc(100vh-170px)]">
        <div class="xl:col-span-2 bg-slate-900/60 border border-slate-800 rounded-xl p-4 space-y-4 flex flex-col min-h-[420px]">
          <div class="flex flex-wrap items-end gap-3">
            <label class="flex-1 min-w-[240px]">
              <span class="text-sm text-slate-300">Search clients</span>
              <div class="mt-1 flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900 border border-slate-700">
                <i class="fa-solid fa-magnifying-glass text-slate-500"></i>
                <input
                  id="clients-search"
                  type="search"
                  class="w-full bg-transparent outline-none placeholder:text-slate-500"
                  placeholder="Search by host, user, id"
                />
              </div>
            </label>
            <button
              id="clients-refresh-btn"
              type="button"
              class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700"
            >
              <i class="fa-solid fa-rotate mr-1"></i>Refresh
            </button>
          </div>

          <div class="overflow-x-auto overflow-y-auto border border-slate-800 rounded-xl flex-1 min-h-0">
            <table class="w-full text-sm">
              <thead class="bg-slate-800/70 text-slate-300">
                <tr>
                  <th class="text-left px-3 py-2">Client</th>
                  <th class="text-left px-3 py-2">Host/User</th>
                  <th class="text-left px-3 py-2">Status</th>
                  <th class="text-left px-3 py-2">Rule</th>
                  <th class="text-left px-3 py-2">Effective</th>
                  <th class="text-right px-3 py-2">Actions</th>
                </tr>
              </thead>
              <tbody id="clients-table-body" class="divide-y divide-slate-800">
                <tr>
                  <td colspan="6" class="px-3 py-6 text-center text-slate-400">Loading clients...</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="flex items-center justify-between gap-3">
            <button
              id="clients-prev-btn"
              type="button"
              class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 hover:bg-slate-700 disabled:opacity-50"
            >
              Prev
            </button>
            <div id="clients-page-label" class="text-sm text-slate-400"></div>
            <button
              id="clients-next-btn"
              type="button"
              class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 hover:bg-slate-700 disabled:opacity-50"
            >
              Next
            </button>
          </div>
        </div>

        <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 space-y-4 min-h-[420px]">
          <div>
            <h2 class="text-lg font-semibold">Visibility Policy</h2>
            <p class="text-sm text-slate-400">Control what this user is allowed to see.</p>
          </div>

          <form id="scope-form" class="space-y-3">
            <label class="block">
              <span class="text-sm text-slate-300">Access Scope</span>
              <select
                id="scope-select"
                class="mt-1 w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value="none">none - No clients</option>
                <option value="allowlist">allowlist - Approved only</option>
                <option value="denylist">denylist - All except denied</option>
                <option value="all">all - All clients</option>
              </select>
            </label>
            <button
              type="submit"
              class="px-3 py-2 rounded-lg bg-indigo-700 hover:bg-indigo-600 text-white"
            >
              <i class="fa-solid fa-floppy-disk mr-1"></i>Save Scope
            </button>
          </form>

          <div class="border-t border-slate-800 pt-3">
            <h3 class="font-medium text-slate-200">Current Rules</h3>
            <p class="text-xs text-slate-400 mb-2">Explicit per-client allow/deny overrides.</p>
            <div id="rules-list" class="space-y-1 max-h-[320px] overflow-auto pr-1"></div>
          </div>

          <p id="access-message" class="hidden text-sm rounded-lg px-3 py-2"></p>
        </div>
      </section>
    </main>

    <script type="module" src="/assets/nav.js"></script>
    <script type="module" src="/assets/user-client-access.js"></script>
  </body>
</html>