admindb 2.1.1 → 2.3.0

package/dist/views/pages/login.hbs

@@ -1,98 +1 @@
-<div class="flex min-h-[75vh] items-center justify-center py-6 px-4">
-  <div class="w-full max-w-md">
-    <div class="mb-8 text-center">
-      <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-soft">
-        {{{icon "database" class="h-8 w-8"}}}
-      </div>
-      <h1 class="text-2xl font-extrabold tracking-tight text-base-content sm:text-3xl">
-        Admin<span class="text-primary">DB</span>
-      </h1>
-      <p class="mt-1 text-sm text-base-content/60">
-        Sign in to access your database administration console
-      </p>
-    </div>
-    <div class="app-card border border-base-300/80 bg-base-100 p-6 sm:p-8 shadow-soft">
-      {{#if error}}
-        <div class="mb-6 flex items-start gap-3 rounded-xl bg-error/10 p-4 text-sm text-error border border-error/20" role="alert">
-          <span class="shrink-0 mt-0.5">
-            {{{icon "warning" class="h-5 w-5"}}}
-          </span>
-          <div class="font-medium">{{error}}</div>
-        </div>
-      {{/if}}
-      {{#if isDefaultPassword}}
-        <div class="mb-6 rounded-xl bg-info/10 p-3.5 text-xs text-info border border-info/20">
-          <div class="font-semibold flex items-center gap-1.5 mb-1">
-            {{{icon "warning" class="h-4 w-4 shrink-0"}}}
-            Default Credentials Active
-          </div>
-          <p class="text-base-content/70">
-            Username: <code class="font-mono font-semibold text-primary">admin</code> · Password: <code class="font-mono font-semibold text-primary">admin</code>
-          </p>
-          <p class="mt-1 text-[11px] text-base-content/50">
-            Set <code class="font-mono">ADMINDB_PASSWORD</code> in production to secure your console.
-          </p>
-        </div>
-      {{/if}}
-      <form method="POST" action="{{basePath}}/login" class="space-y-4">
-        {{#if next}}
-          <input type="hidden" name="next" value="{{next}}" />
-        {{/if}}
-        <div>
-          <label class="field-label" for="login-username">
-            <span>Username</span>
-          </label>
-          <div class="relative">
-            <input
-              id="login-username"
-              type="text"
-              name="username"
-              value="{{#if username}}{{username}}{{else}}admin{{/if}}"
-              required
-              autofocus
-              placeholder="Username"
-              class="field-input pl-10"
-              autocomplete="username"
-            />
-            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40">
-              {{{icon "user" class="h-5 w-5"}}}
-            </div>
-          </div>
-        </div>
-        <div>
-          <label class="field-label" for="login-password">
-            <span>Password</span>
-          </label>
-          <div class="relative">
-            <input
-              id="login-password"
-              type="password"
-              name="password"
-              required
-              placeholder="••••••••"
-              class="field-input pl-10"
-              autocomplete="current-password"
-            />
-            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40">
-              {{{icon "lock" class="h-5 w-5"}}}
-            </div>
-          </div>
-        </div>
-        <div class="pt-2">
-          <button type="submit" class="btn btn-primary w-full gap-2 font-semibold shadow-soft">
-            {{{icon "logout" class="h-4 w-4 rotate-180"}}}
-            Sign In
-          </button>
-        </div>
-      </form>
-    </div>
-    <div class="mt-6 space-y-2 text-center text-xs text-base-content/55">
-      <p class="leading-relaxed">
-        <span class="font-semibold text-base-content/80">Security Notice:</span> Built-in auth provides basic access control. For production, protect your admin routes using your own application authentication, VPN, or reverse proxy.
-      </p>
-      <p class="text-base-content/40">
-        Native authentication can be disabled via <code class="font-mono">--no-auth</code> or <code class="font-mono">auth: false</code>.
-      </p>
-    </div>
-  </div>
-</div>
+<div class="flex min-h-[75vh] items-center justify-center py-6 px-4">
  <div class="w-full max-w-md">
    <div class="mb-8 text-center">
      <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-soft">
        {{{icon "database" class="h-8 w-8"}}}
      </div>
      <h1 class="font-headings text-2xl font-extrabold tracking-tight text-base-content sm:text-3xl">
        Admin<span class="text-primary">DB</span>
      </h1>
      <p class="mt-1 text-sm text-base-content/60">
        Sign in to access your database administration console
      </p>
    </div>
    <div class="app-card border bg-base-100/90 p-6 sm:p-8 shadow-card backdrop-blur-md">
      {{#if error}}
        <div class="mb-6 flex items-start gap-3 rounded-xl bg-error/10 p-4 text-sm text-error border border-error/20" role="alert">
          <span class="shrink-0 mt-0.5">
            {{{icon "warning" class="h-5 w-5"}}}
          </span>
          <div class="font-medium">{{error}}</div>
        </div>
      {{/if}}
      {{#if isDefaultPassword}}
        <div class="mb-6 rounded-xl bg-info/10 p-3.5 text-xs text-info border border-info/20">
          <div class="font-semibold flex items-center gap-1.5 mb-1">
            {{{icon "warning" class="h-4 w-4 shrink-0"}}}
            Default Credentials Active
          </div>
          <p class="text-base-content/70">
            Username: <code class="font-mono font-semibold text-primary">admin</code> · Password: <code class="font-mono font-semibold text-primary">admin</code>
          </p>
          <p class="mt-1 text-[11px] text-base-content/50">
            Set <code class="font-mono">ADMINDB_PASSWORD</code> in production to secure your console.
          </p>
        </div>
      {{/if}}
      <form method="POST" action="{{basePath}}/login" class="space-y-4">
        {{#if next}}
          <input type="hidden" name="next" value="{{next}}" />
        {{/if}}
        <div>
          <label class="field-label" for="login-username">
            <span>Username</span>
          </label>
          <div class="relative">
            <input
              id="login-username"
              type="text"
              name="username"
              value="{{#if username}}{{username}}{{else}}admin{{/if}}"
              required
              autofocus
              placeholder="Username"
              class="field-input pl-10"
              autocomplete="username"
            />
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40">
              {{{icon "user" class="h-5 w-5"}}}
            </div>
          </div>
        </div>
        <div>
          <label class="field-label" for="login-password">
            <span>Password</span>
          </label>
          <div class="relative">
            <input
              id="login-password"
              type="password"
              name="password"
              required
              placeholder="••••••••"
              class="field-input pl-10"
              autocomplete="current-password"
            />
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40">
              {{{icon "lock" class="h-5 w-5"}}}
            </div>
          </div>
        </div>
        <div class="pt-2">
          <button type="submit" class="btn btn-primary w-full gap-2 font-semibold shadow-soft">
            {{{icon "logout" class="h-4 w-4 rotate-180"}}}
            Sign In
          </button>
        </div>
      </form>
    </div>
    <div class="mt-6 space-y-2 text-center text-xs text-base-content/55">
      <p class="leading-relaxed">
        <span class="font-semibold text-base-content/80">Security Notice:</span> Built-in auth provides basic access control. For production, protect your admin routes using your own application authentication, VPN, or reverse proxy.
      </p>
      <p class="text-base-content/40">
        Native authentication can be disabled via <code class="font-mono">--no-auth</code> or <code class="font-mono">auth: false</code>.
      </p>
    </div>
  </div>

package/dist/views/pages/query.hbs

@@ -1,87 +1 @@
-<div class="space-y-6">
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div>
-      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Workspace</p>
-      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Query editor</h1>
-      <p class="mt-1.5 text-sm text-base-content/55">Run arbitrary SQL — SELECT results render as a table, COUNT gives a summary, and write statements execute.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      {{#unless readonly}}
-        <button id="save-query" type="button" class="btn btn-outline btn-sm gap-1.5">
-          {{{icon "save" class="h-4 w-4"}}}
-          Save query
-        </button>
-      {{/unless}}
-      <button id="run-query" type="button" class="btn btn-primary btn-sm gap-1.5">
-        {{{icon "run" class="h-4 w-4"}}}
-        Run
-      </button>
-    </div>
-  </div>
-  <div class="flex flex-wrap items-end gap-3">
-    <div class="form-control w-full max-w-xs">
-      <label class="field-label" for="saved-query-select">Saved queries</label>
-      <select id="saved-query-select" class="field-select">
-        <option value="">— select a saved query —</option>
-        {{#each savedQueries}}
-          <option value="{{this.id}}">{{this.name}}</option>
-        {{/each}}
-      </select>
-    </div>
-    {{#unless readonly}}
-      <button id="delete-query" type="button" class="btn btn-ghost btn-sm mb-0.5 text-error" disabled>Delete saved</button>
-      <div class="form-control w-full max-w-xs">
-        <label class="field-label" for="save-query-name">Save current SQL as</label>
-        <div class="join w-full">
-          <input id="save-query-name" type="text" class="field-input join-item !rounded-r-none" placeholder="query name" autocomplete="off" />
-          <button id="save-query-inline" type="button" class="btn btn-outline join-item">Save</button>
-        </div>
-      </div>
-    {{/unless}}
-  </div>
-  <div class="app-card overflow-hidden">
-    <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-2.5">
-      <span class="flex items-center gap-2 text-sm font-semibold text-base-content/60">
-        <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/10 text-primary">
-          {{{icon "query" class="h-3.5 w-3.5"}}}
-        </span>
-        query.sql
-      </span>
-      <span class="text-[11px] text-base-content/40">Ctrl/⌘ + Enter to run</span>
-    </div>
-    <div>
-      <div class="sql-editor-wrap">
-        <pre id="query-gutter" class="sql-gutter" aria-hidden="true">1</pre>
-        <textarea id="query-sql" class="sql-input" rows="10" placeholder="SELECT * FROM users WHERE …" spellcheck="false"></textarea>
-      </div>
-      <div id="query-message"></div>
-    </div>
-  </div>
-  <div id="query-result" class="hidden">
-    <div class="app-card overflow-hidden">
-      <div class="flex items-center gap-2 border-b border-base-200 px-4 py-3">
-        <span id="result-kind" class="grid h-6 w-6 place-items-center rounded-md bg-success/10 text-success">
-          {{{icon "check" class="h-4 w-4"}}}
-        </span>
-        <span id="result-summary" class="text-sm font-medium text-base-content/60"></span>
-        <div class="ml-auto flex items-center gap-1.5">
-          <button id="export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
-            {{{icon "export" class="h-3.5 w-3.5"}}}
-            CSV
-          </button>
-          <button id="export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
-            {{{icon "export" class="h-3.5 w-3.5"}}}
-            JSON
-          </button>
-        </div>
-      </div>
-      <div class="overflow-x-auto">
-        <table class="table table-sm table-pin-rows">
-          <thead id="query-result-head" class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50"></thead>
-          <tbody id="query-result-body"></tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-<script src="{{basePath}}/js/query.js" defer></script>
+<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-row">
      <div>
        <div class="page-pretitle">Workspace</div>
        <h1 class="page-title">Query editor</h1>
        <p class="mt-0.5 text-xs text-base-content/60">Run arbitrary SQL — SELECT results render as a table, COUNT gives a summary, and write statements execute.</p>
      </div>
      <div class="page-actions">
        {{#unless readonly}}
          <button id="save-query" type="button" class="btn btn-outline btn-sm gap-1.5">
            {{{icon "save" class="h-4 w-4"}}}
            Save query
          </button>
        {{/unless}}
        <button id="run-query" type="button" class="btn btn-primary btn-sm gap-1.5">
          {{{icon "run" class="h-4 w-4"}}}
          Run query
        </button>
      </div>
    </div>
  </div>
  <div class="flex flex-wrap items-end gap-3">
    <div class="form-control w-full max-w-xs">
      <label class="field-label" for="saved-query-select">Saved queries</label>
      <select id="saved-query-select" class="field-select">
        <option value="">— select a saved query —</option>
        {{#each savedQueries}}
          <option value="{{this.id}}">{{this.name}}</option>
        {{/each}}
      </select>
    </div>
    {{#unless readonly}}
      <button id="delete-query" type="button" class="btn btn-ghost btn-sm mb-0.5 text-error" disabled>Delete saved</button>
      <div class="form-control w-full max-w-xs">
        <label class="field-label" for="save-query-name">Save current SQL as</label>
        <div class="join w-full">
          <input id="save-query-name" type="text" class="field-input join-item !rounded-r-none" placeholder="query name" autocomplete="off" />
          <button id="save-query-inline" type="button" class="btn btn-outline join-item">Save</button>
        </div>
      </div>
    {{/unless}}
  </div>
  <div class="app-card overflow-hidden">
    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 bg-base-200/40 px-4 py-2">
      <div class="flex items-center gap-2">
        <span class="flex items-center gap-1.5 text-xs font-semibold text-base-content/70">
          <span class="grid h-5 w-5 place-items-center rounded bg-primary/10 text-primary">
            {{{icon "query" class="h-3.5 w-3.5"}}}
          </span>
          query.sql
        </span>
        <span class="badge badge-sm badge-ghost font-mono text-[10px] uppercase font-bold">{{#if isPostgres}}Postgres{{else}}SQLite{{/if}}</span>
      </div>
      <div class="flex flex-wrap items-center gap-1.5">
        <div class="dropdown dropdown-end">
          <label tabindex="0" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
            {{{icon "terminal" class="h-3.5 w-3.5"}}}
            Snippets
          </label>
          <ul tabindex="0" class="dropdown-content z-30 menu p-1.5 shadow-2xl bg-base-100 rounded-xl w-56 border border-base-300 text-xs">
            <li class="menu-title text-[10px] uppercase tracking-wider text-base-content/40">Query Templates</li>
            <li><a class="js-snippet" data-snippet="SELECT * FROM table_name\nWHERE condition\nORDER BY id DESC\nLIMIT 50;">SELECT rows</a></li>
            <li><a class="js-snippet" data-snippet="SELECT COUNT(*) AS total\nFROM table_name;">COUNT summary</a></li>
            <li><a class="js-snippet" data-snippet="SELECT a.*, b.*\nFROM table_a a\nJOIN table_b b ON b.a_id = a.id\nLIMIT 50;">JOIN tables</a></li>
            <li><a class="js-snippet" data-snippet="INSERT INTO table_name (col1, col2)\nVALUES ('value1', 'value2');">INSERT row</a></li>
            <li><a class="js-snippet" data-snippet="UPDATE table_name\nSET col1 = 'value1'\nWHERE id = 1;">UPDATE row</a></li>
            <li><a class="js-snippet" data-snippet="DELETE FROM table_name\nWHERE id = 1;">DELETE row</a></li>
            <li><a class="js-snippet" data-snippet="CREATE TABLE new_table (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  name TEXT NOT NULL,\n  created_at TEXT DEFAULT (datetime('now'))\n);">CREATE TABLE</a></li>
          </ul>
        </div>
        <button id="format-query" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" title="Format SQL (Beautify)">
          {{{icon "format" class="h-3.5 w-3.5"}}}
          Format
        </button>
        <button id="copy-query" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" title="Copy SQL to clipboard">
          {{{icon "copy" class="h-3.5 w-3.5"}}}
          Copy
        </button>
        <button id="clear-query" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-error" title="Clear editor">
          {{{icon "trash" class="h-3.5 w-3.5"}}}
          Clear
        </button>
        <span class="hidden sm:inline-block text-[11px] text-base-content/35 border-l border-base-300 pl-2">Ctrl/⌘ + Enter to run</span>
      </div>
    </div>
    <div class="sql-editor-wrap">
      <div id="query-gutter" class="sql-gutter" aria-hidden="true">
        <div class="sql-gutter-line">1</div>
      </div>
      <div class="sql-editor-stage">
        <pre id="query-highlight" class="sql-code-highlight" aria-hidden="true"><code id="query-code"></code></pre>
        <textarea id="query-sql" class="sql-code-input" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="-- Write SQL here or choose a snippet/saved query&#10;SELECT * FROM table_name WHERE …"></textarea>
      </div>
    </div>
    <div class="flex items-center justify-between border-t border-base-200 bg-base-200/30 px-3.5 py-1.5 text-[11px] font-mono text-base-content/50">
      <div class="flex items-center gap-3">
        <span id="editor-cursor-pos">Ln 1, Col 1</span>
        <span id="editor-stats">0 chars</span>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-[10px] text-base-content/40">Tab to indent · Ctrl+Z / Ctrl+Y to undo/redo · Ctrl+/ to comment</span>
      </div>
    </div>
    <div id="query-message" class="p-3"></div>
  </div>
  <div id="query-result" class="hidden">
    <div class="app-card overflow-hidden">
      <div class="flex items-center gap-2 border-b border-base-200 px-4 py-3">
        <span id="result-kind" class="grid h-6 w-6 place-items-center rounded-md bg-success/10 text-success">
          {{{icon "check" class="h-4 w-4"}}}
        </span>
        <span id="result-summary" class="text-sm font-medium text-base-content/60"></span>
        <div class="ml-auto flex items-center gap-1.5">
          <button id="export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
            {{{icon "export" class="h-3.5 w-3.5"}}}
            CSV
          </button>
          <button id="export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
            {{{icon "export" class="h-3.5 w-3.5"}}}
            JSON
          </button>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table class="table table-sm table-pin-rows">
          <thead id="query-result-head" class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50"></thead>
          <tbody id="query-result-body"></tbody>
        </table>
      </div>
    </div>
  </div>