Rebuild API Server on the PilotVault structure
Mirror PilotVault's API Server layout and add the superadmin console,
plugin system, runtime PocketBase settings, and user/organization
management. The car domain (cars, service records, parts, sharing) is
carried over unchanged apart from the auth switch.
Layout: main.go -> cmd/server/main.go; module carcontrol/api ->
drivervault/apiserver. internal/api is split by concern (auth, users,
orgs, settings, plugins, status, health, respond).
Auth: replace the server-minted HS256 JWT and the sessions collection
with a PocketBase token proxy. /api/auth/login relays PocketBase's
{token, record}, and every protected request re-resolves that token
against PocketBase, so a role change or deletion takes effect at once
instead of waiting out a token. AUTH_SECRET is obsolete and internal/auth
is gone. Per-device session listing/revocation goes with it: PocketBase
tokens are stateless. Changing a password rotates the user's token key,
which invalidates every token already issued.
Roles: add superadmin alongside user/admin, plus an organizations
collection and users.organization. Admins are scoped to their own
organization; superadmins span all of them. Guards prevent changing your
own role, deleting your own account, an admin touching a superadmin, and
deleting an organization that still has members.
Plugins: new internal/plugins package with one contract over two kinds --
builtin (compiled in) and external (any HTTP service, registered at
runtime with no rebuild). State persists to plugins.json; secrets are
masked on read and preserved when saved back at the mask.
PocketBase settings: /api/admin/pb-config applies a new connection at
runtime and persists it to .env. It deliberately does not require a
working service account, so a wrong or unreachable connection can still
be fixed from the panel.
Panel: rebuilt as the superadmin console -- login gate, status, users,
organizations, PocketBase, plugins, and the endpoint reference.
Clients: update the Web App and Phone App for the PocketBase token shape,
the move of user management to /api/users ({users}/{user} envelopes, with
password resets folded into PATCH), and the removal of sessions. Both now
mirror the server's real guards rather than the old last-admin rule, and
parse PocketBase's field-level error shape.
Config: modern POCKETBASE_*/API_ADDR names with legacy PB_*/PORT
fallbacks, so existing .env files keep working. Also fixes /api/status
probing the Web App on 8090 instead of DriverVault's 5173.
Run scripts/setup-pocketbase.mjs to add the organizations collection and
grow users.role; every client must log in once more.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
tajniak81
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
7d55f0a4cd
commit
ae6ed4ac1e
+107
-73
@@ -1,42 +1,42 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { theme, toggleTheme } from "./theme";
|
||||
import { me, token, restore, logout, isManager, isSuperadmin } from "./api";
|
||||
import LoginView from "./components/LoginView.vue";
|
||||
import StatusCard from "./components/StatusCard.vue";
|
||||
import PocketBaseCard from "./components/PocketBaseCard.vue";
|
||||
import PluginsCard from "./components/PluginsCard.vue";
|
||||
import UsersCard from "./components/UsersCard.vue";
|
||||
import OrgsCard from "./components/OrgsCard.vue";
|
||||
import EndpointTable from "./components/EndpointTable.vue";
|
||||
|
||||
// Live health poll against this server.
|
||||
const status = ref("checking"); // checking | ok | error | unreachable
|
||||
const httpStatus = ref(null);
|
||||
const latency = ref(null);
|
||||
const checkedAt = ref(null);
|
||||
let timer = null;
|
||||
const booting = ref(true);
|
||||
const section = ref("overview");
|
||||
|
||||
async function check() {
|
||||
const started = performance.now();
|
||||
try {
|
||||
const r = await fetch("/api/health");
|
||||
latency.value = Math.round(performance.now() - started);
|
||||
httpStatus.value = r.status;
|
||||
status.value = r.ok ? "ok" : "error";
|
||||
} catch {
|
||||
latency.value = null;
|
||||
httpStatus.value = null;
|
||||
status.value = "unreachable";
|
||||
}
|
||||
checkedAt.value = new Date();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
check();
|
||||
timer = setInterval(check, 10000);
|
||||
onMounted(async () => {
|
||||
await restore(); // re-validate a token kept from a previous visit
|
||||
booting.value = false;
|
||||
});
|
||||
onUnmounted(() => clearInterval(timer));
|
||||
|
||||
const badge = {
|
||||
checking: { label: "checking", cls: "bg-sunken text-muted" },
|
||||
ok: { label: "operational", cls: "bg-success-soft text-success" },
|
||||
error: { label: "error", cls: "bg-danger-soft text-danger" },
|
||||
unreachable: { label: "unreachable", cls: "bg-danger-soft text-danger" },
|
||||
};
|
||||
// Cards are gated by role: management needs a manager, PocketBase + plugins need
|
||||
// a superadmin. The server enforces the same rules — this only hides what the
|
||||
// caller could not use anyway.
|
||||
const sections = computed(() => {
|
||||
const out = [{ id: "overview", label: "Overview" }];
|
||||
if (isManager.value) {
|
||||
out.push({ id: "users", label: "Users" }, { id: "orgs", label: "Organizations" });
|
||||
}
|
||||
if (isSuperadmin.value) {
|
||||
out.push({ id: "pocketbase", label: "PocketBase" }, { id: "plugins", label: "Plugins" });
|
||||
}
|
||||
out.push({ id: "api", label: "API" });
|
||||
return out;
|
||||
});
|
||||
|
||||
function signOut() {
|
||||
logout();
|
||||
section.value = "overview";
|
||||
}
|
||||
|
||||
// Logo bar fills — flip for legibility on the dark shell.
|
||||
const barFills = computed(() =>
|
||||
@@ -45,12 +45,18 @@ const barFills = computed(() =>
|
||||
: ["var(--brand-700)", "var(--brand-500)", "var(--brand-400)"],
|
||||
);
|
||||
|
||||
// The DriverVault REST surface, grouped by resource. Mirrors the routes registered
|
||||
// in internal/api/server.go.
|
||||
// The DriverVault REST surface, grouped by resource. Mirrors the routes
|
||||
// registered in internal/api/server.go.
|
||||
const publicApi = [
|
||||
{ method: "GET", path: "/api/health", desc: "Liveness probe (no auth)" },
|
||||
{ method: "POST", path: "/api/auth/login", desc: "Exchange email + password for a JWT" },
|
||||
{ method: "GET", path: "/api/status", desc: "Health of PocketBase + Web App" },
|
||||
{ method: "POST", path: "/api/auth/login", desc: "Exchange email + password for a PocketBase token" },
|
||||
{ method: "GET", path: "/api/auth/validate", desc: "Check whether a token is still valid" },
|
||||
];
|
||||
|
||||
const identityApi = [
|
||||
{ method: "GET", path: "/api/auth/me", desc: "Identity of the bearer token" },
|
||||
{ method: "GET", path: "/api/identity", desc: "Identity incl. role + organization" },
|
||||
];
|
||||
|
||||
const carsApi = [
|
||||
@@ -97,23 +103,32 @@ const accountApi = [
|
||||
{ method: "DELETE", path: "/api/me", desc: "Finalize account deletion" },
|
||||
];
|
||||
|
||||
const sessionsApi = [
|
||||
{ method: "GET", path: "/api/sessions", desc: "List active sessions (devices)" },
|
||||
{ method: "DELETE", path: "/api/sessions/{id}", desc: "Revoke one session" },
|
||||
{ method: "DELETE", path: "/api/sessions", desc: "Revoke all other sessions" },
|
||||
const managementApi = [
|
||||
{ method: "GET", path: "/api/users", desc: "List users (scoped by role)" },
|
||||
{ method: "POST", path: "/api/users", desc: "Create a user" },
|
||||
{ method: "PATCH", path: "/api/users/{id}", desc: "Update email / name / role / org / password" },
|
||||
{ method: "DELETE", path: "/api/users/{id}", desc: "Delete a user" },
|
||||
{ method: "GET", path: "/api/orgs", desc: "List organizations" },
|
||||
{ method: "POST", path: "/api/orgs", desc: "Create an organization (superadmin)" },
|
||||
{ method: "PATCH", path: "/api/orgs/{id}", desc: "Rename an organization (superadmin)" },
|
||||
{ method: "DELETE", path: "/api/orgs/{id}", desc: "Delete an organization (superadmin)" },
|
||||
];
|
||||
|
||||
const adminApi = [
|
||||
{ method: "GET", path: "/api/admin/users", desc: "List users" },
|
||||
{ method: "POST", path: "/api/admin/users", desc: "Create a user" },
|
||||
{ method: "PATCH", path: "/api/admin/users/{id}", desc: "Update name / role" },
|
||||
{ method: "POST", path: "/api/admin/users/{id}/password", desc: "Reset a user's password" },
|
||||
{ method: "DELETE", path: "/api/admin/users/{id}", desc: "Delete a user" },
|
||||
const superadminApi = [
|
||||
{ method: "GET", path: "/api/admin/pb-config", desc: "PocketBase connection + live probe" },
|
||||
{ method: "POST", path: "/api/admin/pb-config/test", desc: "Probe a candidate connection" },
|
||||
{ method: "PUT", path: "/api/admin/pb-config", desc: "Apply + persist a connection" },
|
||||
{ method: "GET", path: "/api/admin/plugins", desc: "List plugins (secrets masked)" },
|
||||
{ method: "POST", path: "/api/admin/plugins", desc: "Register an external plugin" },
|
||||
{ method: "GET", path: "/api/admin/plugins/{name}", desc: "Fetch one plugin" },
|
||||
{ method: "PUT", path: "/api/admin/plugins/{name}", desc: "Enable/disable + configure" },
|
||||
{ method: "DELETE", path: "/api/admin/plugins/{name}", desc: "Remove an external plugin" },
|
||||
{ method: "POST", path: "/api/admin/plugins/{name}/health", desc: "Run a health check now" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto flex max-w-3xl flex-col gap-6 px-6 pt-12 pb-16">
|
||||
<div class="mx-auto flex max-w-4xl flex-col gap-6 px-6 pt-12 pb-16">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-flex items-center gap-2.5 select-none">
|
||||
@@ -130,6 +145,12 @@ const adminApi = [
|
||||
</span>
|
||||
<span class="eyebrow mt-1.5">API server</span>
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<span v-if="me" class="data hidden text-xs text-muted sm:inline">
|
||||
{{ me.email }}<span v-if="me.organizationName"> · {{ me.organizationName }}</span>
|
||||
</span>
|
||||
<span v-if="me" class="dh-pill bg-info-soft text-info">{{ me.role }}</span>
|
||||
|
||||
<button
|
||||
class="dh-btn-ghost"
|
||||
:title="theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'"
|
||||
@@ -160,37 +181,50 @@ const adminApi = [
|
||||
</svg>
|
||||
Theme
|
||||
</button>
|
||||
<button v-if="token" class="dh-btn-ghost" @click="signOut">Sign out</button>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="dh-card">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div class="text-base font-bold tracking-[-0.02em] text-strong">Status</div>
|
||||
<span
|
||||
class="data inline-flex items-center gap-1.5 rounded-pill px-2.5 py-1 text-xs font-medium"
|
||||
:class="badge[status].cls"
|
||||
<p v-if="booting" class="eyebrow py-16 text-center">Loading…</p>
|
||||
|
||||
<!-- Unauthenticated: the login gate is the whole console. -->
|
||||
<LoginView v-else-if="!token" />
|
||||
|
||||
<template v-else>
|
||||
<!-- Section nav -->
|
||||
<nav class="flex flex-wrap gap-1.5">
|
||||
<button
|
||||
v-for="s in sections"
|
||||
:key="s.id"
|
||||
class="dh-btn-ghost"
|
||||
:class="section === s.id ? 'border-accent text-brandtext' : ''"
|
||||
@click="section = s.id"
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-current"></span>
|
||||
{{ badge[status].label }}<template v-if="status === 'error'"> {{ httpStatus }}</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="data flex flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 text-xs text-muted">
|
||||
<span>GET /api/health</span>
|
||||
<span>{{ latency !== null ? latency + "ms" : "—" }}</span>
|
||||
<span>{{ checkedAt ? "checked " + checkedAt.toLocaleTimeString() : "—" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{ s.label }}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<EndpointTable title="Public" auth="No auth" :endpoints="publicApi" />
|
||||
<EndpointTable title="Cars" auth="Bearer JWT" :endpoints="carsApi" />
|
||||
<EndpointTable title="Service records" auth="Bearer JWT" :endpoints="serviceApi" />
|
||||
<EndpointTable title="Parts" auth="Bearer JWT" :endpoints="partsApi" />
|
||||
<EndpointTable title="Account" auth="Bearer JWT" :endpoints="accountApi" />
|
||||
<EndpointTable title="Sessions" auth="Bearer JWT" :endpoints="sessionsApi" />
|
||||
<EndpointTable title="Admin" auth="Admin JWT" :endpoints="adminApi" />
|
||||
<StatusCard v-if="section === 'overview'" />
|
||||
<UsersCard v-else-if="section === 'users'" />
|
||||
<OrgsCard v-else-if="section === 'orgs'" />
|
||||
<PocketBaseCard v-else-if="section === 'pocketbase'" />
|
||||
<PluginsCard v-else-if="section === 'plugins'" />
|
||||
|
||||
<p class="eyebrow text-center">
|
||||
DriverVault — car maintenance & service tracker.
|
||||
</p>
|
||||
<template v-else-if="section === 'api'">
|
||||
<EndpointTable title="Public" auth="No auth" :endpoints="publicApi" />
|
||||
<EndpointTable title="Identity" auth="Bearer token" :endpoints="identityApi" />
|
||||
<EndpointTable title="Cars" auth="Bearer token" :endpoints="carsApi" />
|
||||
<EndpointTable title="Service records" auth="Bearer token" :endpoints="serviceApi" />
|
||||
<EndpointTable title="Parts" auth="Bearer token" :endpoints="partsApi" />
|
||||
<EndpointTable title="Account" auth="Bearer token" :endpoints="accountApi" />
|
||||
<EndpointTable title="Management" auth="Admin / superadmin" :endpoints="managementApi" />
|
||||
<EndpointTable title="Superadmin" auth="Superadmin" :endpoints="superadminApi" />
|
||||
</template>
|
||||
|
||||
<p v-if="!isManager && section === 'overview'" class="eyebrow text-center">
|
||||
Signed in as a standard user — management sections need an admin role
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<p class="eyebrow text-center">DriverVault — car maintenance & service tracker.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
// The panel authenticates exactly like any other DriverVault client: it posts to
|
||||
// /api/auth/login and keeps the PocketBase token the API Server relays back. The
|
||||
// panel never talks to PocketBase directly — it doesn't even know its address.
|
||||
const TOKEN_KEY = "dh-panel-token";
|
||||
|
||||
function storedToken() {
|
||||
try {
|
||||
return localStorage.getItem(TOKEN_KEY) || "";
|
||||
} catch {
|
||||
return ""; // private mode
|
||||
}
|
||||
}
|
||||
|
||||
export const token = ref(storedToken());
|
||||
export const me = ref(null);
|
||||
|
||||
export const isSuperadmin = computed(() => me.value?.role === "superadmin");
|
||||
export const isManager = computed(
|
||||
() => me.value?.role === "admin" || me.value?.role === "superadmin",
|
||||
);
|
||||
|
||||
function setToken(value) {
|
||||
token.value = value;
|
||||
try {
|
||||
if (value) localStorage.setItem(TOKEN_KEY, value);
|
||||
else localStorage.removeItem(TOKEN_KEY);
|
||||
} catch {
|
||||
/* private mode — the session just won't survive a reload */
|
||||
}
|
||||
}
|
||||
|
||||
/** ApiError carries the HTTP status so callers can branch on 401/403/503. */
|
||||
export class ApiError extends Error {
|
||||
constructor(message, status, body) {
|
||||
super(message);
|
||||
this.status = status;
|
||||
this.body = body;
|
||||
}
|
||||
}
|
||||
|
||||
// messageFrom digs a human-readable message out of the several error shapes in
|
||||
// play: this server's {error}, and PocketBase's {message, data:{field:{message}}}
|
||||
// which the user/org endpoints relay verbatim.
|
||||
function messageFrom(body, status) {
|
||||
if (!body || typeof body !== "object") return `HTTP ${status}`;
|
||||
if (body.error) return body.error;
|
||||
const fieldErrors = Object.entries(body.data || {})
|
||||
.map(([field, e]) => `${field}: ${e?.message || e}`)
|
||||
.filter(Boolean);
|
||||
if (fieldErrors.length) return fieldErrors.join("; ");
|
||||
return body.message || `HTTP ${status}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* request calls the API Server, attaching the panel's token. A 401 clears the
|
||||
* session so the shell falls back to the login screen.
|
||||
*/
|
||||
export async function request(path, { method = "GET", body, auth = true } = {}) {
|
||||
const headers = {};
|
||||
if (body !== undefined) headers["Content-Type"] = "application/json";
|
||||
if (auth && token.value) headers.Authorization = token.value;
|
||||
|
||||
const resp = await fetch(path, {
|
||||
method,
|
||||
headers,
|
||||
body: body === undefined ? undefined : JSON.stringify(body),
|
||||
});
|
||||
|
||||
const text = await resp.text();
|
||||
let parsed = null;
|
||||
try {
|
||||
parsed = text ? JSON.parse(text) : null;
|
||||
} catch {
|
||||
parsed = null; // non-JSON body (shouldn't happen, but don't explode on it)
|
||||
}
|
||||
|
||||
if (!resp.ok) {
|
||||
if (resp.status === 401 && auth) logout();
|
||||
throw new ApiError(messageFrom(parsed, resp.status), resp.status, parsed);
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
|
||||
/** login exchanges credentials for a PocketBase token via the API Server. */
|
||||
export async function login(email, password) {
|
||||
const out = await request("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: { email, password },
|
||||
auth: false,
|
||||
});
|
||||
setToken(out.token);
|
||||
await loadMe();
|
||||
return me.value;
|
||||
}
|
||||
|
||||
/** loadMe resolves the current identity, including role + organization. */
|
||||
export async function loadMe() {
|
||||
me.value = await request("/api/identity");
|
||||
return me.value;
|
||||
}
|
||||
|
||||
/** logout drops the local session. PocketBase tokens are stateless, so there is
|
||||
* nothing to revoke server-side. */
|
||||
export function logout() {
|
||||
setToken("");
|
||||
me.value = null;
|
||||
}
|
||||
|
||||
/** restore re-validates a token kept from a previous visit. */
|
||||
export async function restore() {
|
||||
if (!token.value) return null;
|
||||
try {
|
||||
return await loadMe();
|
||||
} catch {
|
||||
logout(); // expired, revoked, or the server now points at another PocketBase
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { login } from "../api";
|
||||
|
||||
const emit = defineEmits(["authenticated"]);
|
||||
|
||||
const email = ref("");
|
||||
const password = ref("");
|
||||
const error = ref("");
|
||||
const busy = ref(false);
|
||||
|
||||
const canSubmit = computed(() => email.value.trim() !== "" && password.value !== "" && !busy.value);
|
||||
|
||||
async function submit() {
|
||||
if (!canSubmit.value) return;
|
||||
error.value = "";
|
||||
busy.value = true;
|
||||
try {
|
||||
const who = await login(email.value.trim(), password.value);
|
||||
// Any DriverVault account can authenticate; the console itself is only
|
||||
// useful to a manager, and the server enforces that on every call anyway.
|
||||
emit("authenticated", who);
|
||||
} catch (e) {
|
||||
// 400/404 from PocketBase both mean "bad credentials" — don't leak which.
|
||||
error.value =
|
||||
e.status === 400 || e.status === 404
|
||||
? "Invalid email or password."
|
||||
: e.message || "Could not sign in.";
|
||||
password.value = "";
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto flex w-full max-w-sm flex-col gap-5 pt-24">
|
||||
<div class="dh-card p-6">
|
||||
<h1 class="text-lg font-bold tracking-[-0.02em] text-strong">Sign in</h1>
|
||||
<p class="mt-1 mb-5 text-sm text-body">
|
||||
Superadmin console for the DriverVault API Server.
|
||||
</p>
|
||||
|
||||
<form class="flex flex-col gap-4" @submit.prevent="submit">
|
||||
<div>
|
||||
<label class="dh-label" for="login-email">Email</label>
|
||||
<input
|
||||
id="login-email"
|
||||
v-model="email"
|
||||
class="dh-input"
|
||||
type="email"
|
||||
autocomplete="username"
|
||||
autofocus
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label" for="login-password">Password</label>
|
||||
<input
|
||||
id="login-password"
|
||||
v-model="password"
|
||||
class="dh-input"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="rounded-control bg-danger-soft px-3 py-2 text-xs text-danger">
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<button class="dh-btn w-full" type="submit" :disabled="!canSubmit">
|
||||
{{ busy ? "Signing in…" : "Sign in" }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p class="eyebrow text-center">
|
||||
Authenticates against PocketBase through this server
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,127 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { isSuperadmin, request } from "../api";
|
||||
|
||||
// Listing is manager-scoped (an admin sees only their own org); creating,
|
||||
// renaming and deleting are superadmin-only, matching the server's gates.
|
||||
const orgs = ref([]);
|
||||
const error = ref("");
|
||||
const busy = ref(false);
|
||||
const editing = ref(null); // org id, or "new"
|
||||
const draftName = ref("");
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const out = await request("/api/orgs");
|
||||
orgs.value = out.organizations || [];
|
||||
error.value = "";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
}
|
||||
}
|
||||
onMounted(load);
|
||||
|
||||
function startNew() {
|
||||
editing.value = "new";
|
||||
draftName.value = "";
|
||||
}
|
||||
|
||||
function startEdit(o) {
|
||||
editing.value = o.id;
|
||||
draftName.value = o.name;
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
editing.value = null;
|
||||
error.value = "";
|
||||
}
|
||||
|
||||
async function save() {
|
||||
busy.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
if (editing.value === "new") {
|
||||
await request("/api/orgs", { method: "POST", body: { name: draftName.value } });
|
||||
} else {
|
||||
await request(`/api/orgs/${editing.value}`, {
|
||||
method: "PATCH",
|
||||
body: { name: draftName.value },
|
||||
});
|
||||
}
|
||||
editing.value = null;
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(o) {
|
||||
if (!confirm(`Delete the organization "${o.name}"?`)) return;
|
||||
busy.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await request(`/api/orgs/${o.id}`, { method: "DELETE" });
|
||||
await load();
|
||||
} catch (e) {
|
||||
// The server refuses (409) while the org still has members.
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dh-card overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div>
|
||||
<div class="text-base font-bold tracking-[-0.02em] text-strong">Organizations</div>
|
||||
<p class="mt-0.5 text-xs text-muted">Tenants users belong to</p>
|
||||
</div>
|
||||
<button v-if="isSuperadmin" class="dh-btn" @click="startNew">New organization</button>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="border-b border-subtle px-5 py-3 text-xs text-danger">{{ error }}</p>
|
||||
|
||||
<div v-if="editing" class="border-b border-subtle bg-sunken px-5 py-4">
|
||||
<label class="dh-label">Name</label>
|
||||
<input v-model="draftName" class="dh-input" placeholder="Acme Fleet" @keyup.enter="save" />
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<button class="dh-btn" :disabled="busy || !draftName.trim()" @click="save">
|
||||
{{ editing === "new" ? "Create" : "Save" }}
|
||||
</button>
|
||||
<button class="dh-btn-ghost" :disabled="busy" @click="cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="!orgs.length" class="px-5 py-6 text-center text-sm text-muted">
|
||||
No organizations yet.
|
||||
</p>
|
||||
|
||||
<table v-else class="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="[&>th]:eyebrow [&>th]:px-5 [&>th]:py-2.5 [&>th]:font-medium">
|
||||
<th>Name</th>
|
||||
<th>ID</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="o in orgs" :key="o.id" class="border-t border-subtle transition-colors hover:bg-sunken">
|
||||
<td class="px-5 py-2.5 font-medium text-strong">{{ o.name }}</td>
|
||||
<td class="data px-5 py-2.5 text-xs text-muted">{{ o.id }}</td>
|
||||
<td class="px-5 py-2.5 text-right whitespace-nowrap">
|
||||
<template v-if="isSuperadmin">
|
||||
<button class="dh-btn-ghost" @click="startEdit(o)">Rename</button>
|
||||
<button class="dh-btn-danger ml-1.5" :disabled="busy" @click="remove(o)">
|
||||
Delete
|
||||
</button>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,242 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { request } from "../api";
|
||||
|
||||
// Superadmin-only. Each plugin advertises its own config fields (Descriptor.
|
||||
// ConfigFields), so the form below is generated rather than hard-coded — that's
|
||||
// what lets an external plugin be added without touching this panel.
|
||||
const plugins = ref([]);
|
||||
const error = ref("");
|
||||
const busy = ref(false);
|
||||
const open = ref(null); // name of the expanded plugin
|
||||
const drafts = reactive({}); // name -> { key: value }
|
||||
const rowNotice = reactive({}); // name -> string
|
||||
const showRegister = ref(false);
|
||||
const reg = ref({ name: "", baseURL: "", provider: "" });
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const out = await request("/api/admin/plugins");
|
||||
plugins.value = out.plugins || [];
|
||||
error.value = "";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
}
|
||||
}
|
||||
onMounted(load);
|
||||
|
||||
function expand(p) {
|
||||
if (open.value === p.name) {
|
||||
open.value = null;
|
||||
return;
|
||||
}
|
||||
// Seed the draft from the (secret-masked) stored config plus field defaults.
|
||||
const d = {};
|
||||
for (const f of p.configFields || []) d[f.key] = p.config?.[f.key] ?? "";
|
||||
drafts[p.name] = d;
|
||||
open.value = p.name;
|
||||
}
|
||||
|
||||
async function save(p, enabled) {
|
||||
busy.value = true;
|
||||
rowNotice[p.name] = "";
|
||||
try {
|
||||
const out = await request(`/api/admin/plugins/${encodeURIComponent(p.name)}`, {
|
||||
method: "PUT",
|
||||
body: { enabled, config: drafts[p.name] ?? {} },
|
||||
});
|
||||
// A save can succeed while Init fails (e.g. bad credentials) — the server
|
||||
// returns the saved plugin plus a warning.
|
||||
rowNotice[p.name] = out.warning || "Saved.";
|
||||
await load();
|
||||
} catch (e) {
|
||||
rowNotice[p.name] = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function health(p) {
|
||||
busy.value = true;
|
||||
rowNotice[p.name] = "Checking…";
|
||||
try {
|
||||
const out = await request(`/api/admin/plugins/${encodeURIComponent(p.name)}/health`, {
|
||||
method: "POST",
|
||||
});
|
||||
rowNotice[p.name] = `${out.health.status}${out.health.detail ? " — " + out.health.detail : ""}`;
|
||||
await load();
|
||||
} catch (e) {
|
||||
rowNotice[p.name] = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(p) {
|
||||
if (!confirm(`Remove the external plugin "${p.name}"? Its saved config is deleted.`)) return;
|
||||
busy.value = true;
|
||||
try {
|
||||
await request(`/api/admin/plugins/${encodeURIComponent(p.name)}`, { method: "DELETE" });
|
||||
if (open.value === p.name) open.value = null;
|
||||
await load();
|
||||
} catch (e) {
|
||||
rowNotice[p.name] = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function registerExternal() {
|
||||
busy.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await request("/api/admin/plugins", { method: "POST", body: reg.value });
|
||||
reg.value = { name: "", baseURL: "", provider: "" };
|
||||
showRegister.value = false;
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const healthClass = (s) =>
|
||||
s === "ok"
|
||||
? "bg-success-soft text-success"
|
||||
: s === "degraded"
|
||||
? "bg-warning-soft text-warning"
|
||||
: "bg-danger-soft text-danger";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dh-card overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div>
|
||||
<div class="text-base font-bold tracking-[-0.02em] text-strong">Plugins</div>
|
||||
<p class="mt-0.5 text-xs text-muted">Third-party service integrations</p>
|
||||
</div>
|
||||
<button class="dh-btn-ghost" @click="showRegister = !showRegister">
|
||||
{{ showRegister ? "Cancel" : "Register external" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Register an external (remote HTTP) plugin — the no-rebuild path. -->
|
||||
<div v-if="showRegister" class="border-b border-subtle bg-sunken px-5 py-4">
|
||||
<div class="grid gap-3 sm:grid-cols-3">
|
||||
<div>
|
||||
<label class="dh-label">Name</label>
|
||||
<input v-model="reg.name" class="dh-input" placeholder="acme-parts" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Base URL</label>
|
||||
<input v-model="reg.baseURL" class="dh-input" placeholder="http://127.0.0.1:9100" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Provider</label>
|
||||
<input v-model="reg.provider" class="dh-input" placeholder="ACME Corp" />
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="dh-btn mt-3"
|
||||
:disabled="busy || !reg.name || !reg.baseURL"
|
||||
@click="registerExternal"
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="border-b border-subtle px-5 py-3 text-xs text-danger">{{ error }}</p>
|
||||
|
||||
<p v-if="!plugins.length" class="px-5 py-6 text-center text-sm text-muted">
|
||||
No plugins yet. Register an external one above, or compile a built-in connector.
|
||||
</p>
|
||||
|
||||
<div v-for="p in plugins" :key="p.name" class="border-t border-subtle first:border-t-0">
|
||||
<!-- Summary row -->
|
||||
<div class="flex items-center gap-3 px-5 py-3">
|
||||
<button class="flex flex-1 items-center gap-3 text-left" @click="expand(p)">
|
||||
<span class="font-semibold text-strong">{{ p.name }}</span>
|
||||
<span class="dh-pill bg-sunken text-muted">{{ p.kind || "builtin" }}</span>
|
||||
<span v-if="p.provider" class="text-xs text-muted">{{ p.provider }}</span>
|
||||
<span v-if="p.health" class="dh-pill" :class="healthClass(p.health.status)">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-current"></span>{{ p.health.status }}
|
||||
</span>
|
||||
</button>
|
||||
<span class="dh-pill" :class="p.enabled ? 'bg-success-soft text-success' : 'bg-sunken text-muted'">
|
||||
{{ p.enabled ? "enabled" : "disabled" }}
|
||||
</span>
|
||||
<button class="dh-btn-ghost" :disabled="busy" @click="health(p)">Health</button>
|
||||
<button
|
||||
class="dh-btn-ghost"
|
||||
:disabled="busy"
|
||||
@click="expand(p)"
|
||||
>
|
||||
{{ open === p.name ? "Close" : "Configure" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Expanded config: generated from the plugin's declared fields. -->
|
||||
<div v-if="open === p.name" class="bg-sunken px-5 py-4">
|
||||
<div v-if="p.baseURL" class="data mb-3 text-xs text-muted">{{ p.baseURL }}</div>
|
||||
|
||||
<div v-if="(p.configFields || []).length" class="grid gap-3 sm:grid-cols-2">
|
||||
<div v-for="f in p.configFields" :key="f.key">
|
||||
<label class="dh-label">
|
||||
{{ f.label || f.key }}<span v-if="f.required" class="text-danger"> *</span>
|
||||
</label>
|
||||
<select v-if="f.type === 'select'" v-model="drafts[p.name][f.key]" class="dh-select">
|
||||
<option v-for="o in f.options || []" :key="o.value" :value="o.value">
|
||||
{{ o.label || o.value }}
|
||||
</option>
|
||||
</select>
|
||||
<input
|
||||
v-else
|
||||
v-model="drafts[p.name][f.key]"
|
||||
class="dh-input"
|
||||
:type="f.type === 'password' ? 'password' : f.type === 'number' ? 'number' : 'text'"
|
||||
:placeholder="f.default || ''"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<p v-if="f.help" class="mt-1 text-xs text-muted">{{ f.help }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="text-xs text-muted">This plugin takes no configuration.</p>
|
||||
|
||||
<div v-if="(p.capabilities || []).length" class="mt-4">
|
||||
<div class="eyebrow mb-1.5">Capabilities</div>
|
||||
<ul class="data flex flex-col gap-1 text-xs text-muted">
|
||||
<li v-for="c in p.capabilities" :key="c.id">
|
||||
<span class="text-strong">{{ c.id }}</span>
|
||||
<span v-if="c.method || c.endpoint"> — {{ c.method }} {{ c.endpoint }}</span>
|
||||
<span v-if="c.description"> · {{ c.description }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p v-if="rowNotice[p.name]" class="data mt-3 text-xs text-body">{{ rowNotice[p.name] }}</p>
|
||||
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<button class="dh-btn" :disabled="busy" @click="save(p, true)">
|
||||
{{ p.enabled ? "Save" : "Save & enable" }}
|
||||
</button>
|
||||
<button v-if="p.enabled" class="dh-btn-ghost" :disabled="busy" @click="save(p, false)">
|
||||
Disable
|
||||
</button>
|
||||
<span class="flex-1"></span>
|
||||
<button
|
||||
v-if="p.kind === 'external'"
|
||||
class="dh-btn-danger"
|
||||
:disabled="busy"
|
||||
@click="remove(p)"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="p.kind !== 'external'" class="eyebrow mt-2">
|
||||
Built-in plugins can be disabled but not removed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { request } from "../api";
|
||||
|
||||
// Superadmin-only: retarget the PocketBase this server talks to. The change is
|
||||
// applied at runtime AND persisted to the server's .env, so it survives a
|
||||
// restart. A blank password means "keep the stored one".
|
||||
const cfg = ref(null);
|
||||
const form = ref({ url: "", adminEmail: "", adminPassword: "" });
|
||||
const probe = ref(null);
|
||||
const error = ref("");
|
||||
const notice = ref("");
|
||||
const busy = ref(false);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
cfg.value = await request("/api/admin/pb-config");
|
||||
form.value = {
|
||||
url: cfg.value.url,
|
||||
adminEmail: cfg.value.adminEmail,
|
||||
adminPassword: "",
|
||||
};
|
||||
probe.value = cfg.value.probe;
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
}
|
||||
}
|
||||
onMounted(load);
|
||||
|
||||
async function test() {
|
||||
error.value = "";
|
||||
notice.value = "";
|
||||
busy.value = true;
|
||||
try {
|
||||
probe.value = await request("/api/admin/pb-config/test", {
|
||||
method: "POST",
|
||||
body: form.value,
|
||||
});
|
||||
notice.value = probe.value.superuser
|
||||
? "Connection OK — superuser authenticated."
|
||||
: probe.value.reachable
|
||||
? "PocketBase is reachable, but the service account did not authenticate."
|
||||
: "PocketBase is not reachable at that address.";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
error.value = "";
|
||||
notice.value = "";
|
||||
busy.value = true;
|
||||
try {
|
||||
const out = await request("/api/admin/pb-config", { method: "PUT", body: form.value });
|
||||
cfg.value = out.config;
|
||||
probe.value = out.config.probe;
|
||||
form.value.adminPassword = "";
|
||||
notice.value = out.warning || "Saved. The server is now using this PocketBase.";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dh-card overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div>
|
||||
<div class="text-base font-bold tracking-[-0.02em] text-strong">PocketBase</div>
|
||||
<p class="mt-0.5 text-xs text-muted">Database connection used by every endpoint</p>
|
||||
</div>
|
||||
<span
|
||||
v-if="probe"
|
||||
class="dh-pill"
|
||||
:class="probe.superuser
|
||||
? 'bg-success-soft text-success'
|
||||
: probe.reachable
|
||||
? 'bg-warning-soft text-warning'
|
||||
: 'bg-danger-soft text-danger'"
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-current"></span>
|
||||
{{ probe.superuser ? "connected" : probe.reachable ? "no superuser" : "unreachable" }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 px-5 py-4">
|
||||
<div>
|
||||
<label class="dh-label" for="pb-url">Base URL</label>
|
||||
<input id="pb-url" v-model="form.url" class="dh-input" placeholder="http://10.2.1.10:8027" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="dh-label" for="pb-email">Superuser email</label>
|
||||
<input id="pb-email" v-model="form.adminEmail" class="dh-input" autocomplete="off" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label" for="pb-password">Superuser password</label>
|
||||
<input
|
||||
id="pb-password"
|
||||
v-model="form.adminPassword"
|
||||
class="dh-input"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
:placeholder="cfg?.adminConfigured ? 'unchanged' : 'not set'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="probe?.detail" class="data text-xs text-muted">{{ probe.detail }}</p>
|
||||
<p v-if="notice" class="rounded-control bg-info-soft px-3 py-2 text-xs text-info">{{ notice }}</p>
|
||||
<p v-if="error" class="rounded-control bg-danger-soft px-3 py-2 text-xs text-danger">{{ error }}</p>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="dh-btn" :disabled="busy" @click="save">Save & apply</button>
|
||||
<button class="dh-btn-ghost" :disabled="busy" @click="test">Test connection</button>
|
||||
<span class="flex-1"></span>
|
||||
<span class="eyebrow">persisted to .env</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { request } from "../api";
|
||||
|
||||
// /api/status probes PocketBase and the Web App server-side, so the browser
|
||||
// never has to reach either directly.
|
||||
const status = ref(null);
|
||||
const error = ref("");
|
||||
let timer = null;
|
||||
|
||||
async function check() {
|
||||
try {
|
||||
status.value = await request("/api/status", { auth: false });
|
||||
error.value = "";
|
||||
} catch (e) {
|
||||
status.value = null;
|
||||
error.value = e.message || "unreachable";
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
check();
|
||||
timer = setInterval(check, 10000);
|
||||
});
|
||||
onUnmounted(() => clearInterval(timer));
|
||||
|
||||
const pillFor = (s) =>
|
||||
s === "ok" ? "bg-success-soft text-success" : "bg-danger-soft text-danger";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dh-card overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div class="text-base font-bold tracking-[-0.02em] text-strong">Status</div>
|
||||
<span v-if="error" class="dh-pill bg-danger-soft text-danger">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-current"></span>unreachable
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="px-5 py-4 text-sm text-danger">{{ error }}</div>
|
||||
|
||||
<table v-else-if="status" class="w-full text-left text-sm">
|
||||
<tbody>
|
||||
<tr v-for="row in [
|
||||
{ key: 'apiServer', label: 'API Server', h: status.apiServer },
|
||||
{ key: 'pocketBase', label: 'PocketBase', h: status.pocketBase },
|
||||
{ key: 'webApp', label: 'Web App', h: status.webApp },
|
||||
]" :key="row.key" class="border-t border-subtle first:border-t-0">
|
||||
<td class="px-5 py-3 font-medium text-strong">{{ row.label }}</td>
|
||||
<td class="data px-5 py-3 text-xs text-muted">{{ row.h.url || "this process" }}</td>
|
||||
<td class="data px-5 py-3 text-right text-xs text-muted">
|
||||
{{ row.h.latencyMs != null ? row.h.latencyMs + "ms" : "—" }}
|
||||
</td>
|
||||
<td class="px-5 py-3 text-right">
|
||||
<span class="dh-pill" :class="pillFor(row.h.status)">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-current"></span>{{ row.h.status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-else class="px-5 py-4 text-sm text-muted">Checking…</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,198 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { request, me, isSuperadmin } from "../api";
|
||||
|
||||
// Manager-only. A superadmin sees and edits everyone; an admin is scoped by the
|
||||
// server to their own organization. The UI mirrors those limits, but the server
|
||||
// is what enforces them.
|
||||
const users = ref([]);
|
||||
const orgs = ref([]);
|
||||
const error = ref("");
|
||||
const busy = ref(false);
|
||||
const editing = ref(null); // user id being edited, or "new"
|
||||
const draft = ref({});
|
||||
|
||||
const roles = computed(() =>
|
||||
isSuperadmin.value ? ["user", "admin", "superadmin"] : ["user", "admin"],
|
||||
);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const [u, o] = await Promise.all([request("/api/users"), request("/api/orgs")]);
|
||||
users.value = u.users || [];
|
||||
orgs.value = o.organizations || [];
|
||||
error.value = "";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
}
|
||||
}
|
||||
onMounted(load);
|
||||
|
||||
function startNew() {
|
||||
editing.value = "new";
|
||||
draft.value = {
|
||||
email: "",
|
||||
name: "",
|
||||
password: "",
|
||||
role: "user",
|
||||
organization: isSuperadmin.value ? "" : me.value?.organization || "",
|
||||
};
|
||||
}
|
||||
|
||||
function startEdit(u) {
|
||||
editing.value = u.id;
|
||||
draft.value = {
|
||||
email: u.email,
|
||||
name: u.name || "",
|
||||
password: "",
|
||||
role: u.role,
|
||||
organization: u.organization || "",
|
||||
};
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
editing.value = null;
|
||||
error.value = "";
|
||||
}
|
||||
|
||||
async function save() {
|
||||
busy.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
if (editing.value === "new") {
|
||||
await request("/api/users", { method: "POST", body: draft.value });
|
||||
} else {
|
||||
// Only send a password when one was typed — blank means "leave it".
|
||||
const body = { ...draft.value };
|
||||
if (!body.password) delete body.password;
|
||||
await request(`/api/users/${editing.value}`, { method: "PATCH", body });
|
||||
}
|
||||
editing.value = null;
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(u) {
|
||||
if (!confirm(`Delete ${u.email}? This cannot be undone.`)) return;
|
||||
busy.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await request(`/api/users/${u.id}`, { method: "DELETE" });
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const roleClass = (r) =>
|
||||
r === "superadmin"
|
||||
? "bg-info-soft text-info"
|
||||
: r === "admin"
|
||||
? "bg-warning-soft text-warning"
|
||||
: "bg-sunken text-muted";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dh-card overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div>
|
||||
<div class="text-base font-bold tracking-[-0.02em] text-strong">Users</div>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ isSuperadmin ? "All organizations" : "Your organization" }}
|
||||
</p>
|
||||
</div>
|
||||
<button class="dh-btn" @click="startNew">New user</button>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="border-b border-subtle px-5 py-3 text-xs text-danger">{{ error }}</p>
|
||||
|
||||
<!-- Create / edit form -->
|
||||
<div v-if="editing" class="border-b border-subtle bg-sunken px-5 py-4">
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="dh-label">Email</label>
|
||||
<input v-model="draft.email" class="dh-input" type="email" autocomplete="off" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Name</label>
|
||||
<input v-model="draft.name" class="dh-input" autocomplete="off" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">
|
||||
Password{{ editing === "new" ? "" : " (blank = unchanged)" }}
|
||||
</label>
|
||||
<input
|
||||
v-model="draft.password"
|
||||
class="dh-input"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
placeholder="min 8 characters"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Role</label>
|
||||
<select v-model="draft.role" class="dh-select">
|
||||
<option v-for="r in roles" :key="r" :value="r">{{ r }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="isSuperadmin">
|
||||
<label class="dh-label">Organization</label>
|
||||
<select v-model="draft.organization" class="dh-select">
|
||||
<option value="">— none —</option>
|
||||
<option v-for="o in orgs" :key="o.id" :value="o.id">{{ o.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<button class="dh-btn" :disabled="busy" @click="save">
|
||||
{{ editing === "new" ? "Create" : "Save" }}
|
||||
</button>
|
||||
<button class="dh-btn-ghost" :disabled="busy" @click="cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="!users.length" class="px-5 py-6 text-center text-sm text-muted">No users.</p>
|
||||
|
||||
<table v-else class="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="[&>th]:eyebrow [&>th]:px-5 [&>th]:py-2.5 [&>th]:font-medium">
|
||||
<th>Email</th>
|
||||
<th>Name</th>
|
||||
<th>Organization</th>
|
||||
<th>Role</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="u in users" :key="u.id" class="border-t border-subtle transition-colors hover:bg-sunken">
|
||||
<td class="data px-5 py-2.5 text-xs text-strong">
|
||||
{{ u.email }}
|
||||
<span v-if="u.id === me?.id" class="eyebrow ml-1">you</span>
|
||||
</td>
|
||||
<td class="px-5 py-2.5 text-body">{{ u.name || "—" }}</td>
|
||||
<td class="px-5 py-2.5 text-body">{{ u.organizationName || "—" }}</td>
|
||||
<td class="px-5 py-2.5">
|
||||
<span class="dh-pill" :class="roleClass(u.role)">{{ u.role }}</span>
|
||||
</td>
|
||||
<td class="px-5 py-2.5 text-right whitespace-nowrap">
|
||||
<button class="dh-btn-ghost" @click="startEdit(u)">Edit</button>
|
||||
<button
|
||||
v-if="u.id !== me?.id"
|
||||
class="dh-btn-danger ml-1.5"
|
||||
:disabled="busy"
|
||||
@click="remove(u)"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -211,6 +211,107 @@ body {
|
||||
box-shadow: 0 0 0 3px var(--focus-ring);
|
||||
}
|
||||
|
||||
/* Primary button (save, sign in, create). */
|
||||
.dh-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-control);
|
||||
border: 1px solid transparent;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.dh-btn:hover:not(:disabled) {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
.dh-btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--focus-ring);
|
||||
}
|
||||
.dh-btn:disabled,
|
||||
.dh-btn-ghost:disabled,
|
||||
.dh-btn-danger:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Destructive button (delete a user, an org, an external plugin). */
|
||||
.dh-btn-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-control);
|
||||
border: 1px solid var(--border-default);
|
||||
background: transparent;
|
||||
color: var(--danger-600);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
.dh-btn-danger:hover:not(:disabled) {
|
||||
background: var(--danger-100);
|
||||
border-color: var(--danger-600);
|
||||
}
|
||||
|
||||
/* Form controls. */
|
||||
.dh-input,
|
||||
.dh-select {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-control);
|
||||
border: 1px solid var(--border-default);
|
||||
background: var(--surface-card);
|
||||
color: var(--text-strong);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.8125rem;
|
||||
transition: border-color 140ms ease;
|
||||
}
|
||||
.dh-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.dh-input:focus,
|
||||
.dh-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring);
|
||||
}
|
||||
.dh-label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Status pill (health badges, roles, plugin kinds). */
|
||||
.dh-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 9px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dh-card {
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--surface-card);
|
||||
|
||||
Reference in New Issue
Block a user