@rblez/authly 0.4.1 → 0.5.0

package/src/dashboard/sections/roles.js

@@ -0,0 +1,61 @@
+/**
+ * Roles section — list roles and role assignments.
+ */
+
+import { api } from "../api.js";
+import { renderLoading, renderError, renderSuccess } from "../components/states.js";
+import { showToast } from "../components/toast.js";
+
+export async function loadRoles(sectionContainer) {
+  renderLoading(sectionContainer, "Loading roles…");
+
+  try {
+    const data = await api("/api/roles");
+    const roles = data.roles || [];
+
+    if (!roles.length) {
+      renderSuccess(sectionContainer, `
+        <div style="display:flex;justify-content:space-between;align-items:center">
+          <div class="text-muted">No roles defined.</div>
+          <button id="addRoleBtn" class="btn btn--primary btn--sm"><i class="ri-add-line"></i> Add role</button>
+        </div>
+      `);
+      document.getElementById("addRoleBtn")?.addEventListener("click", createRoleInline);
+      return;
+    }
+
+    const html = `
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+        <div style="display:flex;gap:6px;flex-wrap:wrap">
+          ${roles.map((r) => `<span class="role-chip">${r.name}</span>`).join("")}
+        </div>
+        <button id="addRoleBtn" class="btn btn--primary btn--sm"><i class="ri-add-line"></i> Add role</button>
+      </div>
+    `;
+
+    renderSuccess(sectionContainer, html);
+    document.getElementById("addRoleBtn")?.addEventListener("click", createRoleInline);
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load roles: ${e.message}`);
+  }
+}
+
+async function createRoleInline() {
+  const name = prompt("Role name (e.g. editor):");
+  if (!name) return;
+
+  try {
+    const data = await api("/api/roles", {
+      method: "POST",
+      body: JSON.stringify({ name, description: "Custom role" }),
+    });
+    if (data.success) {
+      showToast(`Role '${name}' created`, "ok");
+      loadRoles(document.querySelector('[data-section="roles"]') || document.getElementById("roles"));
+    } else {
+      showToast(data.error || "Failed", "error");
+    }
+  } catch (e) {
+    showToast(e.message, "error");
+  }
+}

package/src/dashboard/sections/supabase.js

@@ -0,0 +1,151 @@
+/**
+ * Supabase integration section.
+ * Handles auto-config via scan or OAuth flow.
+ */
+
+import { api } from "../api.js";
+import { state, setState } from "../state.js";
+import { renderLoading, renderError, renderSuccess } from "../components/states.js";
+import { showToast } from "../components/toast.js";
+
+export async function loadSupabase(sectionContainer) {
+  renderLoading(sectionContainer, "Checking Supabase connection…");
+
+  try {
+    const status = await api("/api/supabase/status");
+
+    if (status.connected) {
+      setState("supabase.connected", true);
+      setState("supabase.project", status.project);
+      setState("supabase.scannedFrom", status.scannedFrom);
+
+      const content = `
+        <div class="supabase-connected">
+          <i class="ri-check-line" style="color:#22c55e;font-size:1.2rem"></i>
+          <h4>Connected to Supabase</h4>
+          <p class="text-muted">Project: <strong>${status.project || "—"}</strong></p>
+          <p class="text-muted">Source: ${status.scannedFrom || "environment"}</p>
+          <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
+            <button id="disconnectBtn" class="btn btn--sm" style="background:#444;color:#fff">
+              <i class="ri-plug-line"></i> Disconnect
+            </button>
+          </div>
+        </div>
+      `;
+      renderSuccess(sectionContainer, content);
+
+      document.getElementById("disconnectBtn")?.addEventListener("click", () => {
+        showToast("Disconnect not yet implemented", "info");
+      });
+    } else {
+      setState("supabase.connected", false);
+      showConnectFlow(sectionContainer);
+    }
+  } catch (e) {
+    renderError(sectionContainer, `Failed to check connection: ${e.message}`);
+  }
+}
+
+async function showConnectFlow(container) {
+  container.innerHTML = `
+    <div class="supabase-connect">
+      <h4>Connect to Supabase</h4>
+      <p class="text-muted">Authly can find your credentials automatically, or you can connect via OAuth.</p>
+      <div id="supabaseFlowAction" style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
+        <button id="startScanBtn" class="btn btn--primary btn--sm">
+          <i class="ri-search-eye-line"></i> Scan project files
+        </button>
+      </div>
+      <div id="supabaseFlowResult"></div>
+    </div>
+  `;
+
+  const scanBtn = document.getElementById("startScanBtn");
+  scanBtn?.addEventListener("click", startScan);
+}
+
+async function startScan() {
+  const actionDiv = document.getElementById("supabaseFlowAction");
+  const resultDiv = document.getElementById("supabaseFlowResult");
+
+  actionDiv.innerHTML = '<span class="text-muted"><i class="ri-loader-4-line spinner"></i> Scanning project files…</span>';
+  resultDiv.innerHTML = "";
+
+  try {
+    const scan = await api("/api/supabase/scan");
+
+    if (scan.found) {
+      // Found all credentials
+      const fields = scan.fields || [];
+      actionDiv.innerHTML = "";
+      resultDiv.innerHTML = `
+        <div class="state state--success">
+          <p>Found ${fields.length} credentials in your project files.</p>
+          <button id="useCredsBtn" class="btn btn--sm btn--primary" style="margin-top:8px">
+            <i class="ri-check-line"></i> Use these credentials
+          </button>
+        </div>
+      `;
+      document.getElementById("useCredsBtn")?.addEventListener("click", () => {
+        applyScanResult(scan);
+      });
+    } else {
+      // Nothing found → offer OAuth
+      const fields = scan.fields || [];
+      actionDiv.innerHTML = `
+        <button id="oauthBtn" class="btn btn--sm" style="background:#0d1b3e;border:1px solid #1d355e;color:#58a6ff">
+          <i class="ri-plug-line"></i> Connect with Supabase OAuth
+        </button>
+      `;
+      resultDiv.innerHTML = `
+        <div class="state state--error">
+          <p>Missing: <code>${fields.join(", ")}</code></p>
+          <p class="text-muted">Connect via Supabase Platform OAuth instead.</p>
+        </div>
+      `;
+      document.getElementById("oauthBtn")?.addEventListener("click", redirectToOAuth);
+    }
+  } catch (e) {
+    actionDiv.innerHTML = "";
+    resultDiv.innerHTML = `<div class="state state--error"><p>Scan failed: ${e.message}</p></div>`;
+  }
+}
+
+async function applyScanResult(scan) {
+  const actionDiv = document.getElementById("supabaseFlowAction");
+  const resultDiv = document.getElementById("supabaseFlowResult");
+  actionDiv.innerHTML = '<span class="text-muted">Saving credentials…</span>';
+
+  try {
+    await api("/api/config", {
+      method: "POST",
+      body: JSON.stringify({
+        type: "supabase",
+        fields: scan.fields,
+      }),
+    });
+    resultDiv.innerHTML = `<div class="state state--success"><p><i class="ri-check-line"></i> Credentials applied. Reload section to verify.</p></div>`;
+    showToast("Supabase credentials saved", "ok");
+    setState("supabase.connected", true);
+  } catch (e) {
+    resultDiv.innerHTML = `<div class="state state--error"><p>Failed to save: ${e.message}</p></div>`;
+  }
+}
+
+function redirectToOAuth() {
+  const actionDiv = document.getElementById("supabaseFlowAction");
+  actionDiv.innerHTML = '<span class="text-muted"><i class="ri-external-link-line"></i> Redirecting to Supabase…</span>';
+  // Redirect the entire browser to Supabase OAuth
+  window.location.href = `${window.location.origin}/api/auth/supabase/authorize`;
+}
+
+export async function checkSupabaseStatus() {
+  try {
+    const status = await api("/api/supabase/status");
+    setState("supabase.connected", !!status.connected);
+    setState("supabase.project", status.project || null);
+    setState("supabase.scannedFrom", status.scannedFrom || null);
+  } catch {
+    setState("supabase.connected", false);
+  }
+}

package/src/dashboard/sections/users.js

@@ -0,0 +1,96 @@
+/**
+ * Users section — list users and manage roles.
+ */
+
+import { api } from "../api.js";
+import { renderLoading, renderError, renderSuccess } from "../components/states.js";
+import { showToast } from "../components/toast.js";
+
+export async function loadUsers(sectionContainer) {
+  renderLoading(sectionContainer, "Loading users…");
+
+  try {
+    const data = await api("/api/users");
+    const users = data.users || [];
+
+    if (!users.length) {
+      renderSuccess(sectionContainer, '<div class="text-muted">No users found.</div>');
+      return;
+    }
+
+    const html = `
+      <div class="table-wrapper">
+        <table class="data-table">
+          <thead><tr><th>ID</th><th>Email</th><th>Role</th><th>Created</th><th>Roles</th></tr></thead>
+          <tbody>
+            ${users.map((u) => `
+              <tr>
+                <td style="font-family:var(--mono);font-size:.8rem">${u.id?.slice?.(0, 8) || "—" }…</td>
+                <td>${u.email || "—"}</td>
+                <td>${u.role || "user"}</td>
+                <td class="text-muted">${u.created_at ? new Date(u.created_at).toLocaleDateString() : "—"}</td>
+                <td><button class="btn btn--sm manage-roles-btn" data-user-id="${u.id}" style="font-size:.7rem">Manage roles</button></td>
+              </tr>
+            `).join("")}
+          </tbody>
+        </table>
+      </div>
+      <div id="userRolePanel" class="hidden" style="margin-top:12px"></div>
+    `;
+
+    renderSuccess(sectionContainer, html);
+
+    sectionContainer.querySelectorAll(".manage-roles-btn").forEach((btn) => {
+      btn.addEventListener("click", () => showRolePanel(btn.dataset.userId));
+    });
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load users: ${e.message}`);
+  }
+}
+
+async function showRolePanel(userId) {
+  const panel = document.getElementById("userRolePanel");
+  panel.classList.remove("hidden");
+  panel.innerHTML = 'Loading…';
+
+  try {
+    const data = await api(`/api/users/${userId}/roles`);
+    const roles = data.roles || [];
+    const availableRoles = ["admin", "user", "guest"];
+
+    panel.innerHTML = `
+      <div style="padding:8px 12px;background:#111;border-radius:6px">
+        <div style="font-size:.8rem;color:#888;margin-bottom:8px">User: ${userId.slice(0, 8)}…</div>
+        <div style="display:flex;gap:6px;flex-wrap:wrap">
+          ${availableRoles.map((r) => `
+            <button class="btn btn--sm ${roles.includes(r) ? "" : "btn--primary"} role-toggle-btn" data-role="${r}" data-user-id="${userId}" data-active="${roles.includes(r)}">
+              ${r} ${roles.includes(r) ? "✓" : ""}
+            </button>
+          `).join("")}
+        </div>
+      </div>
+    `;
+
+    panel.querySelectorAll(".role-toggle-btn").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const role = btn.dataset.role;
+        const uid = btn.dataset.userId;
+        const isActive = btn.dataset.active === "true";
+
+        try {
+          if (isActive) {
+            await api(`/api/users/${uid}/roles/${role}`, { method: "DELETE" });
+          } else {
+            await api(`/api/users/${uid}/roles`, { method: "POST", body: JSON.stringify({ role }) });
+          }
+          showToast(`Role '${role}' ${isActive ? "removed" : "assigned"}`, "ok");
+          showRolePanel(uid);
+        } catch (e) {
+          showToast(e.message, "error");
+        }
+      });
+    });
+  } catch (e) {
+    panel.innerHTML = `<div class="text-muted">Failed to load roles: ${e.message}</div>`;
+  }
+}

package/src/dashboard/state.js

@@ -0,0 +1,30 @@
+/**
+ * Global state for the dashboard.
+ * Shared across sections so they don't re-fetch unnecessarily.
+ */
+
+export const state = {
+  supabase: {
+    connected: false,
+    project: null,
+    scannedFrom: null, // "env" | "oauth" | null
+  },
+  providers: [],
+  users: [],
+  roles: [],
+  migrations: [],
+  keys: [],
+  config: {},
+};
+
+/**
+ * Update a slice of state and optionally re-render.
+ */
+export function setState(path, value) {
+  const parts = path.split(".");
+  let obj = state;
+  for (let i = 0; i < parts.length - 1; i++) {
+    obj = obj[parts[i]];
+  }
+  obj[parts[parts.length - 1]] = value;
+}