diff --git a/src/components/PermissionPicker.test.ts b/src/components/PermissionPicker.test.ts new file mode 100644 index 0000000..3b56086 --- /dev/null +++ b/src/components/PermissionPicker.test.ts @@ -0,0 +1,169 @@ +import { describe, it, expect } from "vitest"; +import { mount } from "@vue/test-utils"; +import PermissionPicker from "./PermissionPicker.vue"; + +describe("PermissionPicker", () => { + const mountPicker = (props: { modelValue: string[]; readonly?: boolean }) => { + return mount(PermissionPicker, { props }); + }; + + describe("Rendering", () => { + it("renders all permission groups", () => { + const wrapper = mountPicker({ modelValue: [] }); + const groups = wrapper.findAll(".permission-group"); + expect(groups.length).toBe(20); + }); + + it("displays group labels", () => { + const wrapper = mountPicker({ modelValue: [] }); + const text = wrapper.text(); + expect(text).toContain("Deployments"); + expect(text).toContain("Containers"); + expect(text).toContain("Databases"); + expect(text).toContain("Infrastructure"); + expect(text).toContain("DNS"); + expect(text).toContain("Audit"); + }); + + it("displays read/write/delete labels within groups", () => { + const wrapper = mountPicker({ modelValue: [] }); + const text = wrapper.text(); + expect(text).toContain("Read"); + expect(text).toContain("Write"); + expect(text).toContain("Delete"); + }); + }); + + describe("Selection state", () => { + it("checks selected permissions", () => { + const wrapper = mountPicker({ + modelValue: ["deployments:read", "containers:write"], + }); + const checkboxes = wrapper.findAll("input[type='checkbox']"); + const checked = checkboxes.filter((cb) => (cb.element as HTMLInputElement).checked); + // 2 individual + their group toggles may or may not be checked + expect(checked.length).toBeGreaterThanOrEqual(2); + }); + + it("shows group as fully selected when all permissions are selected", () => { + const wrapper = mountPicker({ + modelValue: ["deployments:read", "deployments:write", "deployments:delete"], + }); + // First group toggle checkbox should be checked + const groupToggle = wrapper.find(".group-toggle input[type='checkbox']"); + expect((groupToggle.element as HTMLInputElement).checked).toBe(true); + }); + + it("shows group as indeterminate when partially selected", () => { + const wrapper = mountPicker({ + modelValue: ["deployments:read"], + }); + const groupToggle = wrapper.find(".group-toggle input[type='checkbox']"); + expect((groupToggle.element as HTMLInputElement).indeterminate).toBe(true); + }); + + it("shows group toggle unchecked when no permissions selected", () => { + const wrapper = mountPicker({ modelValue: [] }); + const groupToggle = wrapper.find(".group-toggle input[type='checkbox']"); + expect((groupToggle.element as HTMLInputElement).checked).toBe(false); + expect((groupToggle.element as HTMLInputElement).indeterminate).toBe(false); + }); + }); + + describe("Toggling permissions", () => { + it("emits update when toggling a permission on", async () => { + const wrapper = mountPicker({ modelValue: [] }); + const permCheckboxes = wrapper.findAll(".permission-item input[type='checkbox']"); + await permCheckboxes[0].trigger("change"); + const emitted = wrapper.emitted("update:modelValue"); + expect(emitted).toBeTruthy(); + expect(emitted![0][0]).toContain("deployments:read"); + }); + + it("emits update when toggling a permission off", async () => { + const wrapper = mountPicker({ + modelValue: ["deployments:read", "deployments:write"], + }); + const permCheckboxes = wrapper.findAll(".permission-item input[type='checkbox']"); + await permCheckboxes[0].trigger("change"); + const emitted = wrapper.emitted("update:modelValue"); + expect(emitted).toBeTruthy(); + expect(emitted![0][0]).not.toContain("deployments:read"); + expect(emitted![0][0]).toContain("deployments:write"); + }); + + it("selects all group permissions when toggling group on", async () => { + const wrapper = mountPicker({ modelValue: [] }); + const groupToggle = wrapper.find(".group-toggle input[type='checkbox']"); + await groupToggle.trigger("change"); + const emitted = wrapper.emitted("update:modelValue"); + expect(emitted).toBeTruthy(); + const value = emitted![0][0] as string[]; + expect(value).toContain("deployments:read"); + expect(value).toContain("deployments:write"); + expect(value).toContain("deployments:delete"); + }); + + it("deselects all group permissions when toggling fully selected group off", async () => { + const wrapper = mountPicker({ + modelValue: ["deployments:read", "deployments:write", "deployments:delete"], + }); + const groupToggle = wrapper.find(".group-toggle input[type='checkbox']"); + await groupToggle.trigger("change"); + const emitted = wrapper.emitted("update:modelValue"); + expect(emitted).toBeTruthy(); + const value = emitted![0][0] as string[]; + expect(value).not.toContain("deployments:read"); + expect(value).not.toContain("deployments:write"); + expect(value).not.toContain("deployments:delete"); + }); + + it("preserves other groups when toggling one group", async () => { + const wrapper = mountPicker({ + modelValue: ["containers:read"], + }); + const groupToggle = wrapper.find(".group-toggle input[type='checkbox']"); + await groupToggle.trigger("change"); + const emitted = wrapper.emitted("update:modelValue"); + const value = emitted![0][0] as string[]; + expect(value).toContain("containers:read"); + expect(value).toContain("deployments:read"); + }); + }); + + describe("Readonly mode", () => { + it("hides checkboxes in readonly mode", () => { + const wrapper = mountPicker({ + modelValue: ["deployments:read"], + readonly: true, + }); + expect(wrapper.findAll("input[type='checkbox']").length).toBe(0); + }); + + it("shows granted/denied indicators in readonly mode", () => { + const wrapper = mountPicker({ + modelValue: ["deployments:read"], + readonly: true, + }); + expect(wrapper.findAll(".readonly-indicator.granted").length).toBeGreaterThan(0); + expect(wrapper.findAll(".readonly-indicator.denied").length).toBeGreaterThan(0); + }); + + it("hides group toggle checkboxes in readonly mode", () => { + const wrapper = mountPicker({ + modelValue: [], + readonly: true, + }); + expect(wrapper.findAll(".group-toggle").length).toBe(0); + }); + + it("still renders group labels in readonly mode", () => { + const wrapper = mountPicker({ + modelValue: [], + readonly: true, + }); + expect(wrapper.text()).toContain("Deployments"); + expect(wrapper.text()).toContain("Containers"); + }); + }); +}); diff --git a/src/components/PermissionPicker.vue b/src/components/PermissionPicker.vue new file mode 100644 index 0000000..b210319 --- /dev/null +++ b/src/components/PermissionPicker.vue @@ -0,0 +1,366 @@ + + + + + diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue index 4edb1eb..d441bd4 100644 --- a/src/layouts/DashboardLayout.vue +++ b/src/layouts/DashboardLayout.vue @@ -19,7 +19,7 @@ Dashboard -
+
Stacks @@ -37,7 +37,15 @@
-
+
Docker @@ -48,30 +56,62 @@ />
- + {{ stats.containers }} Containers - + {{ stats.images }} Images - + {{ stats.volumes }} Volumes - + {{ stats.networks }} Networks - + {{ stats.dockerPorts }} Port Mappings
-
+
System @@ -82,23 +122,45 @@ />
- + {{ stats.infrastructure }} Infrastructure - + {{ stats.ports }} Ports - + {{ stats.services }} Services - Cron Jobs + + Cron Jobs +
-
+
Databases @@ -116,7 +178,7 @@
-
+
DNS @@ -132,7 +194,10 @@
-
+
Security @@ -143,15 +208,27 @@ />
- Security & Monitoring - + + Security & Monitoring + + {{ stats.certificates }} Certificates
-
+
Apps @@ -170,7 +247,14 @@
-
+
Administration @@ -181,7 +265,30 @@ />
- Settings + + Settings + + + Users + + + API Keys +
@@ -215,6 +322,15 @@
+
{{ agentOnline ? "Connected" : "Disconnected" }} @@ -271,11 +387,13 @@ import { ref, reactive, computed, onMounted } from "vue"; import { useRoute, useRouter } from "vue-router"; import { useStatsStore } from "@/stores/stats"; +import { useAuthStore } from "@/stores/auth"; import Logo from "@/components/base/Logo.vue"; const route = useRoute(); const router = useRouter(); const statsStore = useStatsStore(); +const authStore = useAuthStore(); const sidebarCollapsed = ref(false); const isRefreshing = ref(false); @@ -344,6 +462,8 @@ const currentPageTitle = computed(() => { templates: "Templates", marketplace: "App Marketplace", settings: "Settings", + users: "Users", + "api-keys": "API Keys", }; return titles[route.name as string] || "Dashboard"; }); @@ -379,7 +499,7 @@ const breadcrumbs = computed(() => { } else if (["apps", "marketplace"].includes(routeName)) { crumbs.push({ label: "Apps", path: "" }); crumbs.push({ label: currentPageTitle.value, path: "" }); - } else if (routeName === "settings") { + } else if (["settings", "users", "api-keys"].includes(routeName)) { crumbs.push({ label: "Administration", path: "" }); crumbs.push({ label: currentPageTitle.value, path: "" }); } else if (routeName !== "home") { @@ -402,12 +522,13 @@ const refreshAll = async () => { }; const handleLogout = () => { - localStorage.removeItem("auth_token"); + authStore.logout(); router.push("/login"); }; onMounted(() => { statsStore.fetchAll(); + authStore.fetchCurrentUser(); setInterval(() => statsStore.fetchAll(), 15000); }); @@ -628,6 +749,48 @@ onMounted(() => { background: #ef4444; } +.user-info { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 6px; + margin-bottom: 0.75rem; +} + +.user-avatar { + width: 32px; + height: 32px; + background: #3b82f6; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.user-avatar i { + font-size: 0.875rem; + color: white; +} + +.user-details { + display: flex; + flex-direction: column; +} + +.user-name { + font-size: 0.875rem; + font-weight: 500; + color: white; +} + +.user-role { + font-size: 0.75rem; + color: #94a3b8; + text-transform: capitalize; +} + .agent-status { display: flex; align-items: center; diff --git a/src/router/index.ts b/src/router/index.ts index 9b8188c..110ee9f 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,5 +1,7 @@ import { createRouter, createWebHistory } from "vue-router"; import type { RouteRecordRaw } from "vue-router"; +import type { Permission } from "@/types"; +import { useAuthStore } from "@/stores/auth"; import DashboardLayout from "@/layouts/DashboardLayout.vue"; const routes: RouteRecordRaw[] = [ @@ -23,106 +25,139 @@ const routes: RouteRecordRaw[] = [ path: "deployments", name: "deployments", component: () => import("@/views/DeploymentsView.vue"), + meta: { permission: "deployments:read" }, }, { path: "deployments/:name", name: "deployment-detail", component: () => import("@/views/DeploymentDetailView.vue"), + meta: { permission: "deployments:read" }, }, { path: "containers", name: "containers", component: () => import("@/views/ContainersView.vue"), + meta: { permission: "containers:read" }, }, { path: "images", name: "images", component: () => import("@/views/ImagesView.vue"), + meta: { permission: "images:read" }, }, { path: "volumes", name: "volumes", component: () => import("@/views/VolumesView.vue"), + meta: { permission: "volumes:read" }, }, { path: "networks", name: "networks", component: () => import("@/views/NetworksView.vue"), + meta: { permission: "networks:read" }, }, { path: "docker-ports", name: "docker-ports", component: () => import("@/views/DockerPortsView.vue"), + meta: { permission: "containers:read" }, }, { path: "system-ports", name: "system-ports", component: () => import("@/views/SystemPortsView.vue"), + meta: { permission: "system:read" }, }, { path: "services", name: "services", component: () => import("@/views/ServicesView.vue"), + meta: { permission: "system:read" }, }, { path: "databases", name: "databases", component: () => import("@/views/DatabasesView.vue"), + meta: { permission: "databases:read" }, }, { path: "databases/:id", name: "database-manager", component: () => import("@/views/DatabaseManagerView.vue"), + meta: { permission: "databases:read" }, }, { path: "certificates", name: "certificates", component: () => import("@/views/CertificatesView.vue"), + meta: { permission: "certificates:read" }, }, { path: "apps", name: "apps", component: () => import("@/views/PluginsView.vue"), + meta: { permission: "templates:read" }, }, { path: "templates", name: "templates", component: () => import("@/views/TemplatesView.vue"), + meta: { permission: "templates:read" }, }, { path: "marketplace", name: "marketplace", component: () => import("@/views/MarketplaceView.vue"), + meta: { permission: "templates:read" }, }, { path: "settings", name: "settings", component: () => import("@/views/SettingsView.vue"), + meta: { permission: "settings:read" }, }, { path: "infrastructure", name: "infrastructure", component: () => import("@/views/InfrastructureView.vue"), + meta: { permission: "infrastructure:read" }, }, { path: "security", name: "security", component: () => import("@/views/SecurityView.vue"), + meta: { permission: "security:read" }, }, { path: "cron-jobs", name: "cron-jobs", component: () => import("@/views/CronJobsView.vue"), + meta: { permission: "scheduler:read" }, }, { path: "dns/zones", name: "dns-zones", component: () => import("@/views/DnsZonesView.vue"), + meta: { permission: "dns:read" }, }, { path: "dns/external", name: "dns-external", component: () => import("@/views/DnsExternalView.vue"), + meta: { permission: "dns:read" }, + }, + { + path: "users", + name: "users", + component: () => import("@/views/UsersView.vue"), + meta: { permission: "users:read" }, + }, + { + path: "api-keys", + name: "api-keys", + component: () => import("@/views/APIKeysView.vue"), + meta: { permission: "apikeys:read" }, }, ], }, @@ -139,11 +174,24 @@ router.beforeEach((to, _from, next) => { if (requiresAuth && !token) { next("/login"); - } else if (to.path === "/login" && token) { + return; + } + + if (to.path === "/login" && token) { next("/"); - } else { - next(); + return; + } + + const permission = to.meta.permission as Permission | undefined; + if (permission && token) { + const auth = useAuthStore(); + if (!auth.hasPermission(permission)) { + next("/"); + return; + } } + + next(); }); export default router; diff --git a/src/services/api.ts b/src/services/api.ts index 5f6b6ff..3792fb4 100644 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -1100,3 +1100,76 @@ export const powerDnsApi = { updateRecords: (zoneId: string, rrsets: PowerDNSRRSet[]) => apiClient.patch(`/dns/powerdns/zones/${zoneId}`, { rrsets }), }; + +import type { User, APIKey, UserRole, UserDeploymentAccess } from "@/types"; + +export const usersApi = { + list: () => apiClient.get<{ users: User[] }>("/users"), + + get: (id: number) => apiClient.get<{ user: User; deployments: UserDeploymentAccess[] }>(`/users/${id}`), + + create: (data: { username: string; email?: string; password: string; role: UserRole; permissions?: string[] }) => + apiClient.post<{ user: User }>("/users", data), + + update: ( + id: number, + data: { username?: string; email?: string; role?: UserRole; is_active?: boolean; permissions?: string[] }, + ) => apiClient.put<{ user: User }>(`/users/${id}`, data), + + delete: (id: number) => apiClient.delete(`/users/${id}`), + + me: () => apiClient.get<{ user: User; permissions: string[]; deployments: UserDeploymentAccess[] }>("/users/me"), + + updateMe: (data: { email?: string }) => apiClient.put<{ user: User }>("/users/me", data), + + updatePassword: (data: { current_password: string; new_password: string }) => + apiClient.put("/users/me/password", data), + + getDeployments: (userId: number) => + apiClient.get<{ deployments: UserDeploymentAccess[] }>(`/users/${userId}/deployments`), + + assignDeployment: (userId: number, data: { deployment_name: string; access_level: string }) => + apiClient.post(`/users/${userId}/deployments`, data), + + updateDeployment: (userId: number, deploymentName: string, data: { access_level: string }) => + apiClient.put(`/users/${userId}/deployments/${deploymentName}`, data), + + removeDeployment: (userId: number, deploymentName: string) => + apiClient.delete(`/users/${userId}/deployments/${deploymentName}`), +}; + +export const apiKeysApi = { + list: () => apiClient.get<{ api_keys: APIKey[] }>("/apikeys"), + + get: (id: number) => apiClient.get<{ api_key: APIKey }>(`/apikeys/${id}`), + + create: (data: { + name: string; + description?: string; + role?: UserRole; + permissions?: string[]; + deployments?: string[]; + expires_in?: number; + user_id?: number; + }) => apiClient.post<{ api_key: APIKey; message: string }>("/apikeys", data), + + delete: (id: number) => apiClient.delete(`/apikeys/${id}`), + + revoke: (id: number) => apiClient.post(`/apikeys/${id}/revoke`), +}; + +export const deploymentUsersApi = { + getUsers: (deploymentName: string) => + apiClient.get<{ + deployment_name: string; + users: Array<{ + user_id: number; + username: string; + email?: string; + role: UserRole; + access_level: string; + granted_by?: number; + created_at: string; + }>; + }>(`/deployments/${deploymentName}/users`), +}; diff --git a/src/stores/auth.ts b/src/stores/auth.ts index c0cf704..0903156 100644 --- a/src/stores/auth.ts +++ b/src/stores/auth.ts @@ -1,6 +1,7 @@ import { defineStore } from "pinia"; import { ref, computed } from "vue"; import axios from "axios"; +import type { User, Permission, UserDeploymentAccess } from "@/types"; const apiClient = axios.create({ baseURL: import.meta.env.VITE_API_URL || "/api", @@ -14,8 +15,39 @@ export const useAuthStore = defineStore("auth", () => { const authEnabled = ref(null); const loading = ref(false); const error = ref(""); + const currentUser = ref(null); + const permissions = ref([]); + const deploymentAccess = ref([]); + const userLoaded = ref(false); const isAuthenticated = computed(() => !!token.value); + const isAdmin = computed(() => currentUser.value?.role === "admin"); + const isOperator = computed(() => currentUser.value?.role === "operator"); + const isViewer = computed(() => currentUser.value?.role === "viewer"); + + const hasPermission = (permission: Permission): boolean => { + if (currentUser.value?.role === "admin") { + return true; + } + if (token.value && !currentUser.value) { + return true; + } + return permissions.value.includes(permission); + }; + + const canAccessDeployment = (deploymentName: string, level: "read" | "write" | "admin"): boolean => { + if (currentUser.value?.role === "admin") { + return true; + } + + const access = deploymentAccess.value.find((d) => d.deployment_name === deploymentName); + if (!access) { + return false; + } + + const levels = { read: 1, write: 2, admin: 3 }; + return levels[access.access_level] >= levels[level]; + }; const checkAuthStatus = async () => { try { @@ -36,6 +68,18 @@ export const useAuthStore = defineStore("auth", () => { const response = await apiClient.post("/auth/login", { api_key: apiKey }); token.value = response.data.token; localStorage.setItem("auth_token", response.data.token); + + if (response.data.user) { + currentUser.value = response.data.user; + } + if (response.data.permissions) { + permissions.value = response.data.permissions; + } + if (response.data.deployments) { + deploymentAccess.value = response.data.deployments; + } + userLoaded.value = true; + return true; } catch (e: any) { error.value = e.response?.data?.error || "Invalid API key"; @@ -45,8 +89,64 @@ export const useAuthStore = defineStore("auth", () => { } }; + const loginWithCredentials = async (username: string, password: string) => { + loading.value = true; + error.value = ""; + + try { + const response = await apiClient.post("/auth/login", { username, password }); + token.value = response.data.token; + localStorage.setItem("auth_token", response.data.token); + + if (response.data.user) { + currentUser.value = response.data.user; + } + if (response.data.permissions) { + permissions.value = response.data.permissions; + } + if (response.data.deployments) { + deploymentAccess.value = response.data.deployments; + } + userLoaded.value = true; + + return true; + } catch (e: any) { + error.value = e.response?.data?.error || "Invalid username or password"; + return false; + } finally { + loading.value = false; + } + }; + + const fetchCurrentUser = async () => { + if (!token.value) return; + + try { + const authClient = axios.create({ + baseURL: import.meta.env.VITE_API_URL || "/api", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token.value}`, + }, + }); + + const response = await authClient.get("/users/me"); + currentUser.value = response.data.user; + permissions.value = response.data.permissions || []; + deploymentAccess.value = response.data.deployments || []; + } catch { + // User endpoint may not exist if using legacy auth + } finally { + userLoaded.value = true; + } + }; + const logout = () => { token.value = null; + currentUser.value = null; + permissions.value = []; + deploymentAccess.value = []; + userLoaded.value = false; localStorage.removeItem("auth_token"); }; @@ -62,9 +162,20 @@ export const useAuthStore = defineStore("auth", () => { authEnabled, loading, error, + currentUser, + permissions, + deploymentAccess, + userLoaded, isAuthenticated, + isAdmin, + isOperator, + isViewer, + hasPermission, + canAccessDeployment, checkAuthStatus, login, + loginWithCredentials, + fetchCurrentUser, logout, getAuthHeader, }; diff --git a/src/stores/stats.ts b/src/stores/stats.ts index 84e96ab..7685680 100644 --- a/src/stores/stats.ts +++ b/src/stores/stats.ts @@ -53,16 +53,16 @@ export const useStatsStore = defineStore("stats", () => { if (healthRes.data.version?.version) { agentVersion.value = healthRes.data.version.version; } - if (healthRes.data.stats) { - deployments.total = healthRes.data.stats.total_deployments || 0; - deployments.running = healthRes.data.stats.running || 0; - deployments.stopped = healthRes.data.stats.stopped || 0; - deployments.error = healthRes.data.stats.error || 0; - } const statsRes = await healthApi.stats(); if (statsRes.data) { const data = statsRes.data; + if (data.deployments) { + deployments.total = data.deployments.total_deployments || 0; + deployments.running = data.deployments.running || 0; + deployments.stopped = data.deployments.stopped || 0; + deployments.error = data.deployments.error || 0; + } containers.total = data.containers?.total || 0; containers.running = data.containers?.running || 0; containers.stopped = data.containers?.stopped || 0; diff --git a/src/stores/users.ts b/src/stores/users.ts new file mode 100644 index 0000000..aa355c6 --- /dev/null +++ b/src/stores/users.ts @@ -0,0 +1,179 @@ +import { defineStore } from "pinia"; +import { ref } from "vue"; +import type { User, APIKey, UserRole, UserDeploymentAccess } from "@/types"; +import { usersApi, apiKeysApi } from "@/services/api"; + +export const useUsersStore = defineStore("users", () => { + const users = ref([]); + const apiKeys = ref([]); + const loading = ref(false); + const error = ref(""); + + const fetchUsers = async () => { + loading.value = true; + error.value = ""; + try { + const response = await usersApi.list(); + users.value = response.data.users; + } catch (e: any) { + error.value = e.response?.data?.error || "Failed to fetch users"; + } finally { + loading.value = false; + } + }; + + const getUser = async (id: number) => { + try { + const response = await usersApi.get(id); + return response.data; + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to get user"); + } + }; + + const createUser = async (data: { + username: string; + email?: string; + password: string; + role: UserRole; + permissions?: string[]; + }) => { + try { + const response = await usersApi.create(data); + users.value.push(response.data.user); + return response.data.user; + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to create user"); + } + }; + + const updateUser = async ( + id: number, + data: { username?: string; email?: string; role?: UserRole; is_active?: boolean; permissions?: string[] }, + ) => { + try { + const response = await usersApi.update(id, data); + const index = users.value.findIndex((u) => u.id === id); + if (index !== -1) { + users.value[index] = response.data.user; + } + return response.data.user; + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to update user"); + } + }; + + const deleteUser = async (id: number) => { + try { + await usersApi.delete(id); + users.value = users.value.filter((u) => u.id !== id); + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to delete user"); + } + }; + + const getUserDeployments = async (userId: number) => { + try { + const response = await usersApi.getDeployments(userId); + return response.data.deployments as UserDeploymentAccess[]; + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to get user deployments"); + } + }; + + const assignDeployment = async (userId: number, deploymentName: string, accessLevel: string) => { + try { + await usersApi.assignDeployment(userId, { deployment_name: deploymentName, access_level: accessLevel }); + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to assign deployment"); + } + }; + + const updateDeploymentAccess = async (userId: number, deploymentName: string, accessLevel: string) => { + try { + await usersApi.updateDeployment(userId, deploymentName, { access_level: accessLevel }); + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to update deployment access"); + } + }; + + const removeDeploymentAccess = async (userId: number, deploymentName: string) => { + try { + await usersApi.removeDeployment(userId, deploymentName); + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to remove deployment access"); + } + }; + + const fetchAPIKeys = async () => { + loading.value = true; + error.value = ""; + try { + const response = await apiKeysApi.list(); + apiKeys.value = response.data.api_keys; + } catch (e: any) { + error.value = e.response?.data?.error || "Failed to fetch API keys"; + } finally { + loading.value = false; + } + }; + + const createAPIKey = async (data: { + name: string; + description?: string; + role?: UserRole; + permissions?: string[]; + deployments?: string[]; + expires_in?: number; + user_id?: number; + }) => { + try { + const response = await apiKeysApi.create(data); + apiKeys.value.push(response.data.api_key); + return response.data; + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to create API key"); + } + }; + + const deleteAPIKey = async (id: number) => { + try { + await apiKeysApi.delete(id); + apiKeys.value = apiKeys.value.filter((k) => k.id !== id); + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to delete API key"); + } + }; + + const revokeAPIKey = async (id: number) => { + try { + await apiKeysApi.revoke(id); + const index = apiKeys.value.findIndex((k) => k.id === id); + if (index !== -1) { + apiKeys.value[index].is_active = false; + } + } catch (e: any) { + throw new Error(e.response?.data?.error || "Failed to revoke API key"); + } + }; + + return { + users, + apiKeys, + loading, + error, + fetchUsers, + getUser, + createUser, + updateUser, + deleteUser, + getUserDeployments, + assignDeployment, + updateDeploymentAccess, + removeDeploymentAccess, + fetchAPIKeys, + createAPIKey, + deleteAPIKey, + revokeAPIKey, + }; +}); diff --git a/src/types/index.ts b/src/types/index.ts index 57c0bde..5a25415 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -206,3 +206,98 @@ export interface DeploymentRateLimit { burst: number; enabled: boolean; } + +export type UserRole = "admin" | "operator" | "viewer"; + +export interface User { + id: number; + uid: string; + username: string; + email?: string; + role: UserRole; + permissions?: string[]; + is_active: boolean; + created_at: string; + updated_at: string; + last_login_at?: string; + deployment_count?: number; + deployments?: UserDeploymentAccess[]; +} + +export interface UserDeploymentAccess { + deployment_name: string; + access_level: "read" | "write" | "admin"; + granted_by?: number; + created_at: string; +} + +export interface APIKey { + id: number; + key_id: string; + user_id: number; + name: string; + description?: string; + key_prefix: string; + role?: UserRole; + permissions?: string[]; + deployments?: string[]; + expires_at?: string; + last_used_at?: string; + last_used_ip?: string; + is_active: boolean; + created_at: string; + key?: string; +} + +export type Permission = + | "deployments:read" + | "deployments:write" + | "deployments:delete" + | "certificates:read" + | "certificates:write" + | "certificates:delete" + | "networks:read" + | "networks:write" + | "networks:delete" + | "security:read" + | "security:write" + | "backups:read" + | "backups:write" + | "backups:delete" + | "users:read" + | "users:write" + | "users:delete" + | "apikeys:read" + | "apikeys:write" + | "apikeys:delete" + | "settings:read" + | "settings:write" + | "audit:read" + | "containers:read" + | "containers:write" + | "containers:delete" + | "images:read" + | "images:write" + | "images:delete" + | "volumes:read" + | "volumes:write" + | "volumes:delete" + | "databases:read" + | "databases:write" + | "databases:delete" + | "infrastructure:read" + | "infrastructure:write" + | "scheduler:read" + | "scheduler:write" + | "scheduler:delete" + | "system:read" + | "system:write" + | "dns:read" + | "dns:write" + | "registries:read" + | "registries:write" + | "registries:delete" + | "templates:read" + | "templates:write" + | "traffic:read" + | "traffic:write"; diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts new file mode 100644 index 0000000..9d521fb --- /dev/null +++ b/src/utils/permissions.ts @@ -0,0 +1,124 @@ +import type { UserRole } from "@/types"; + +const adminPermissions: string[] = [ + "deployments:read", + "deployments:write", + "deployments:delete", + "certificates:read", + "certificates:write", + "certificates:delete", + "networks:read", + "networks:write", + "networks:delete", + "security:read", + "security:write", + "backups:read", + "backups:write", + "backups:delete", + "users:read", + "users:write", + "users:delete", + "apikeys:read", + "apikeys:write", + "apikeys:delete", + "settings:read", + "settings:write", + "audit:read", + "containers:read", + "containers:write", + "containers:delete", + "images:read", + "images:write", + "images:delete", + "volumes:read", + "volumes:write", + "volumes:delete", + "databases:read", + "databases:write", + "databases:delete", + "infrastructure:read", + "infrastructure:write", + "scheduler:read", + "scheduler:write", + "scheduler:delete", + "system:read", + "system:write", + "dns:read", + "dns:write", + "registries:read", + "registries:write", + "registries:delete", + "templates:read", + "templates:write", + "traffic:read", + "traffic:write", +]; + +const operatorPermissions: string[] = [ + "deployments:read", + "deployments:write", + "certificates:read", + "certificates:write", + "networks:read", + "security:read", + "backups:read", + "backups:write", + "apikeys:read", + "apikeys:write", + "apikeys:delete", + "settings:read", + "containers:read", + "containers:write", + "images:read", + "images:write", + "volumes:read", + "volumes:write", + "databases:read", + "databases:write", + "infrastructure:read", + "infrastructure:write", + "scheduler:read", + "scheduler:write", + "system:read", + "system:write", + "dns:read", + "dns:write", + "registries:read", + "registries:write", + "templates:read", + "traffic:read", +]; + +const viewerPermissions: string[] = [ + "deployments:read", + "certificates:read", + "networks:read", + "security:read", + "backups:read", + "apikeys:read", + "settings:read", + "containers:read", + "images:read", + "volumes:read", + "databases:read", + "infrastructure:read", + "scheduler:read", + "system:read", + "dns:read", + "registries:read", + "templates:read", + "traffic:read", +]; + +export function getRolePermissions(role: UserRole): string[] { + switch (role) { + case "admin": + return [...adminPermissions]; + case "operator": + return [...operatorPermissions]; + case "viewer": + return [...viewerPermissions]; + default: + return []; + } +} diff --git a/src/views/APIKeysView.vue b/src/views/APIKeysView.vue new file mode 100644 index 0000000..ea125f5 --- /dev/null +++ b/src/views/APIKeysView.vue @@ -0,0 +1,709 @@ + + + + + diff --git a/src/views/CertificatesView.vue b/src/views/CertificatesView.vue index 5810a62..f519888 100644 --- a/src/views/CertificatesView.vue +++ b/src/views/CertificatesView.vue @@ -16,11 +16,11 @@ loading-text="Loading certificates..." >