add clients to resource

This commit is contained in:
miloschwartz
2025-11-07 16:30:24 -08:00
parent c813202f92
commit e51fca1f61
19 changed files with 1212 additions and 189 deletions

View File

@@ -671,7 +671,7 @@
"resourcePincodeSetupTitle": "Set Pincode",
"resourcePincodeSetupTitleDescription": "Set a pincode to protect this resource",
"resourceRoleDescription": "Admins can always access this resource.",
"resourceUsersRoles": "Users & Roles",
"resourceUsersRoles": "Access Controls",
"resourceUsersRolesDescription": "Configure which users and roles can visit this resource",
"resourceUsersRolesSubmit": "Save Users & Roles",
"resourceWhitelistSave": "Saved successfully",
@@ -2153,5 +2153,8 @@
"selectedResources": "Selected Resources",
"enableSelected": "Enable Selected",
"disableSelected": "Disable Selected",
"checkSelectedStatus": "Check Status of Selected"
"checkSelectedStatus": "Check Status of Selected",
"clients": "Clients",
"accessClientSelect": "Select machine clients",
"resourceClientDescription": "Machine clients that can access this resource"
}

View File

@@ -213,6 +213,15 @@ export const siteResources = pgTable("siteResources", {
alias: varchar("alias")
});
export const clientSiteResources = pgTable("clientSiteResources", {
clientId: integer("clientId")
.notNull()
.references(() => clients.clientId, { onDelete: "cascade" }),
siteResourceId: integer("siteResourceId")
.notNull()
.references(() => siteResources.siteResourceId, { onDelete: "cascade" })
});
export const roleSiteResources = pgTable("roleSiteResources", {
roleId: integer("roleId")
.notNull()

View File

@@ -228,12 +228,21 @@ export const siteResources = sqliteTable("siteResources", {
mode: text("mode").notNull(), // "host" | "cidr" | "port"
protocol: text("protocol"), // only for port mode
proxyPort: integer("proxyPort"), // only for port mode
destinationPort: integer("destinationPort"), // only for port mode
destinationPort: integer("destinationPort"), // only for port mode
destination: text("destination").notNull(), // ip, cidr, hostname
enabled: integer("enabled", { mode: "boolean" }).notNull().default(true),
alias: text("alias")
});
export const clientSiteResources = sqliteTable("clientSiteResources", {
clientId: integer("clientId")
.notNull()
.references(() => clients.clientId, { onDelete: "cascade" }),
siteResourceId: integer("siteResourceId")
.notNull()
.references(() => siteResources.siteResourceId, { onDelete: "cascade" })
});
export const roleSiteResources = sqliteTable("roleSiteResources", {
roleId: integer("roleId")
.notNull()
@@ -350,7 +359,7 @@ export const clients = sqliteTable("clients", {
type: text("type").notNull(), // "olm"
online: integer("online", { mode: "boolean" }).notNull().default(false),
// endpoint: text("endpoint"),
lastHolePunch: integer("lastHolePunch")
lastHolePunch: integer("lastHolePunch"),
});
export const clientSites = sqliteTable("clientSites", {

View File

@@ -11,6 +11,7 @@ export * from "./verifyRoleAccess";
export * from "./verifyUserAccess";
export * from "./verifyAdmin";
export * from "./verifySetResourceUsers";
export * from "./verifySetResourceClients";
export * from "./verifyUserInRole";
export * from "./verifyAccessTokenAccess";
export * from "./requestTimeout";

View File

@@ -7,6 +7,7 @@ export * from "./verifyApiKeyTargetAccess";
export * from "./verifyApiKeyRoleAccess";
export * from "./verifyApiKeyUserAccess";
export * from "./verifyApiKeySetResourceUsers";
export * from "./verifyApiKeySetResourceClients";
export * from "./verifyAccessTokenAccess";
export * from "./verifyApiKeyIsRoot";
export * from "./verifyApiKeyApiKeyAccess";

View File

@@ -0,0 +1,73 @@
import { Request, Response, NextFunction } from "express";
import { db } from "@server/db";
import { clients } from "@server/db";
import { and, eq, inArray } from "drizzle-orm";
import createHttpError from "http-errors";
import HttpCode from "@server/types/HttpCode";
export async function verifyApiKeySetResourceClients(
req: Request,
res: Response,
next: NextFunction
) {
const apiKey = req.apiKey;
const singleClientId = req.params.clientId || req.body.clientId || req.query.clientId;
const { clientIds } = req.body;
const allClientIds = clientIds || (singleClientId ? [parseInt(singleClientId as string)] : []);
if (!apiKey) {
return next(
createHttpError(HttpCode.UNAUTHORIZED, "Key not authenticated")
);
}
if (apiKey.isRoot) {
// Root keys can access any client in any org
return next();
}
if (!req.apiKeyOrg) {
return next(
createHttpError(
HttpCode.FORBIDDEN,
"Key does not have access to this organization"
)
);
}
if (allClientIds.length === 0) {
return next();
}
try {
const orgId = req.apiKeyOrg.orgId;
const clientsData = await db
.select()
.from(clients)
.where(
and(
inArray(clients.clientId, allClientIds),
eq(clients.orgId, orgId)
)
);
if (clientsData.length !== allClientIds.length) {
return next(
createHttpError(
HttpCode.FORBIDDEN,
"Key does not have access to one or more specified clients"
)
);
}
return next();
} catch (error) {
return next(
createHttpError(
HttpCode.INTERNAL_SERVER_ERROR,
"Error checking if key has access to the specified clients"
)
);
}
}

View File

@@ -0,0 +1,69 @@
import { Request, Response, NextFunction } from "express";
import { db } from "@server/db";
import { clients } from "@server/db";
import { and, eq, inArray } from "drizzle-orm";
import createHttpError from "http-errors";
import HttpCode from "@server/types/HttpCode";
export async function verifySetResourceClients(
req: Request,
res: Response,
next: NextFunction
) {
const userId = req.user!.userId;
const singleClientId = req.params.clientId || req.body.clientId || req.query.clientId;
const { clientIds } = req.body;
const allClientIds = clientIds || (singleClientId ? [parseInt(singleClientId as string)] : []);
if (!userId) {
return next(
createHttpError(HttpCode.UNAUTHORIZED, "User not authenticated")
);
}
if (!req.userOrg) {
return next(
createHttpError(
HttpCode.FORBIDDEN,
"User does not have access to this organization"
)
);
}
if (allClientIds.length === 0) {
return next();
}
try {
const orgId = req.userOrg.orgId;
// get all clients for the clientIds
const clientsData = await db
.select()
.from(clients)
.where(
and(
inArray(clients.clientId, allClientIds),
eq(clients.orgId, orgId)
)
);
if (clientsData.length !== allClientIds.length) {
return next(
createHttpError(
HttpCode.FORBIDDEN,
"User does not have access to one or more specified clients"
)
);
}
return next();
} catch (error) {
return next(
createHttpError(
HttpCode.INTERNAL_SERVER_ERROR,
"Error checking if user has access to the specified clients"
)
);
}
}

View File

@@ -182,6 +182,15 @@ export async function createUserClient(
);
}
if (existingOlm.userId !== userId) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
`OLM with ID ${olmId} does not belong to user with ID ${userId}`
)
);
}
await db.transaction(async (trx) => {
// TODO: more intelligent way to pick the exit node
const exitNodesList = await listExitNodes(orgId);

View File

@@ -60,6 +60,15 @@ export async function deleteClient(
);
}
if (client.userId) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
`Cannot delete a user client with this endpoint`
)
);
}
await db.transaction(async (trx) => {
// Delete the client-site associations first
await trx

View File

@@ -29,6 +29,7 @@ import {
verifyTargetAccess,
verifyRoleAccess,
verifySetResourceUsers,
verifySetResourceClients,
verifyUserAccess,
getUserOrgs,
verifyUserIsServerAdmin,
@@ -301,6 +302,13 @@ authenticated.get(
siteResource.listSiteResourceUsers
);
authenticated.get(
"/site-resource/:siteResourceId/clients",
verifySiteResourceAccess,
verifyUserHasAction(ActionsEnum.listResourceUsers),
siteResource.listSiteResourceClients
);
authenticated.post(
"/site-resource/:siteResourceId/roles",
verifySiteResourceAccess,
@@ -319,6 +327,33 @@ authenticated.post(
siteResource.setSiteResourceUsers,
);
authenticated.post(
"/site-resource/:siteResourceId/clients",
verifySiteResourceAccess,
verifySetResourceClients,
verifyUserHasAction(ActionsEnum.setResourceUsers),
logActionAudit(ActionsEnum.setResourceUsers),
siteResource.setSiteResourceClients,
);
authenticated.post(
"/site-resource/:siteResourceId/clients/add",
verifySiteResourceAccess,
verifySetResourceClients,
verifyUserHasAction(ActionsEnum.setResourceUsers),
logActionAudit(ActionsEnum.setResourceUsers),
siteResource.addClientToSiteResource,
);
authenticated.post(
"/site-resource/:siteResourceId/clients/remove",
verifySiteResourceAccess,
verifySetResourceClients,
verifyUserHasAction(ActionsEnum.setResourceUsers),
logActionAudit(ActionsEnum.setResourceUsers),
siteResource.removeClientFromSiteResource,
);
authenticated.put(
"/org/:orgId/resource",
verifyOrgAccess,

View File

@@ -25,7 +25,8 @@ import {
verifyApiKeyIsRoot,
verifyApiKeyClientAccess,
verifyClientsEnabled,
verifyApiKeySiteResourceAccess
verifyApiKeySiteResourceAccess,
verifyApiKeySetResourceClients
} from "@server/middlewares";
import HttpCode from "@server/types/HttpCode";
import { Router } from "express";
@@ -211,6 +212,13 @@ authenticated.get(
siteResource.listSiteResourceUsers
);
authenticated.get(
"/site-resource/:siteResourceId/clients",
verifyApiKeySiteResourceAccess,
verifyApiKeyHasAction(ActionsEnum.listResourceUsers),
siteResource.listSiteResourceClients
);
authenticated.post(
"/site-resource/:siteResourceId/roles",
verifyApiKeySiteResourceAccess,
@@ -265,6 +273,33 @@ authenticated.post(
siteResource.removeUserFromSiteResource
);
authenticated.post(
"/site-resource/:siteResourceId/clients",
verifyApiKeySiteResourceAccess,
verifyApiKeySetResourceClients,
verifyApiKeyHasAction(ActionsEnum.setResourceUsers),
logActionAudit(ActionsEnum.setResourceUsers),
siteResource.setSiteResourceClients
);
authenticated.post(
"/site-resource/:siteResourceId/clients/add",
verifyApiKeySiteResourceAccess,
verifyApiKeySetResourceClients,
verifyApiKeyHasAction(ActionsEnum.setResourceUsers),
logActionAudit(ActionsEnum.setResourceUsers),
siteResource.addClientToSiteResource
);
authenticated.post(
"/site-resource/:siteResourceId/clients/remove",
verifyApiKeySiteResourceAccess,
verifyApiKeySetResourceClients,
verifyApiKeyHasAction(ActionsEnum.setResourceUsers),
logActionAudit(ActionsEnum.setResourceUsers),
siteResource.removeClientFromSiteResource
);
authenticated.put(
"/org/:orgId/resource",
verifyApiKeyOrgAccess,

View File

@@ -0,0 +1,156 @@
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import { db, siteResources, clients, clientSiteResources } from "@server/db";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import logger from "@server/logger";
import { fromError } from "zod-validation-error";
import { eq, and } from "drizzle-orm";
import { OpenAPITags, registry } from "@server/openApi";
import { rebuildSiteClientAssociations } from "@server/lib/rebuildSiteClientAssociations";
const addClientToSiteResourceBodySchema = z
.object({
clientId: z.number().int().positive()
})
.strict();
const addClientToSiteResourceParamsSchema = z
.object({
siteResourceId: z
.string()
.transform(Number)
.pipe(z.number().int().positive())
})
.strict();
registry.registerPath({
method: "post",
path: "/site-resource/{siteResourceId}/clients/add",
description: "Add a single client to a site resource. Clients with a userId cannot be added.",
tags: [OpenAPITags.Resource, OpenAPITags.Client],
request: {
params: addClientToSiteResourceParamsSchema,
body: {
content: {
"application/json": {
schema: addClientToSiteResourceBodySchema
}
}
}
},
responses: {}
});
export async function addClientToSiteResource(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedBody = addClientToSiteResourceBodySchema.safeParse(req.body);
if (!parsedBody.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedBody.error).toString()
)
);
}
const { clientId } = parsedBody.data;
const parsedParams = addClientToSiteResourceParamsSchema.safeParse(
req.params
);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedParams.error).toString()
)
);
}
const { siteResourceId } = parsedParams.data;
// get the site resource
const [siteResource] = await db
.select()
.from(siteResources)
.where(eq(siteResources.siteResourceId, siteResourceId))
.limit(1);
if (!siteResource) {
return next(
createHttpError(HttpCode.NOT_FOUND, "Site resource not found")
);
}
// Check if client exists and has a userId
const [client] = await db
.select()
.from(clients)
.where(eq(clients.clientId, clientId))
.limit(1);
if (!client) {
return next(
createHttpError(HttpCode.NOT_FOUND, "Client not found")
);
}
if (client.userId !== null) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"Cannot add clients that are associated with a user"
)
);
}
// Check if client already exists in site resource
const existingEntry = await db
.select()
.from(clientSiteResources)
.where(
and(
eq(clientSiteResources.siteResourceId, siteResourceId),
eq(clientSiteResources.clientId, clientId)
)
);
if (existingEntry.length > 0) {
return next(
createHttpError(
HttpCode.CONFLICT,
"Client already assigned to site resource"
)
);
}
await db.transaction(async (trx) => {
await trx.insert(clientSiteResources).values({
clientId,
siteResourceId
});
await rebuildSiteClientAssociations(siteResource, trx);
});
return response(res, {
data: {},
success: true,
error: false,
message: "Client added to site resource successfully",
status: HttpCode.CREATED
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

View File

@@ -6,9 +6,13 @@ export * from "./listSiteResources";
export * from "./listAllSiteResourcesByOrg";
export * from "./listSiteResourceRoles";
export * from "./listSiteResourceUsers";
export * from "./listSiteResourceClients";
export * from "./setSiteResourceRoles";
export * from "./setSiteResourceUsers";
export * from "./addRoleToSiteResource";
export * from "./removeRoleFromSiteResource";
export * from "./addUserToSiteResource";
export * from "./removeUserFromSiteResource";
export * from "./setSiteResourceClients";
export * from "./addClientToSiteResource";
export * from "./removeClientFromSiteResource";

View File

@@ -0,0 +1,85 @@
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import { db } from "@server/db";
import { clientSiteResources, clients } from "@server/db";
import { eq } from "drizzle-orm";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import logger from "@server/logger";
import { fromError } from "zod-validation-error";
import { OpenAPITags, registry } from "@server/openApi";
const listSiteResourceClientsSchema = z
.object({
siteResourceId: z
.string()
.transform(Number)
.pipe(z.number().int().positive())
})
.strict();
async function queryClients(siteResourceId: number) {
return await db
.select({
clientId: clientSiteResources.clientId,
name: clients.name,
subnet: clients.subnet
})
.from(clientSiteResources)
.innerJoin(clients, eq(clientSiteResources.clientId, clients.clientId))
.where(eq(clientSiteResources.siteResourceId, siteResourceId));
}
export type ListSiteResourceClientsResponse = {
clients: NonNullable<Awaited<ReturnType<typeof queryClients>>>;
};
registry.registerPath({
method: "get",
path: "/site-resource/{siteResourceId}/clients",
description: "List all clients for a site resource.",
tags: [OpenAPITags.Resource, OpenAPITags.Client],
request: {
params: listSiteResourceClientsSchema
},
responses: {}
});
export async function listSiteResourceClients(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedParams = listSiteResourceClientsSchema.safeParse(req.params);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedParams.error).toString()
)
);
}
const { siteResourceId } = parsedParams.data;
const siteResourceClientsList = await queryClients(siteResourceId);
return response<ListSiteResourceClientsResponse>(res, {
data: {
clients: siteResourceClientsList
},
success: true,
error: false,
message: "Site resource clients retrieved successfully",
status: HttpCode.OK
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

View File

@@ -0,0 +1,162 @@
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import { db, siteResources, clients, clientSiteResources } from "@server/db";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import logger from "@server/logger";
import { fromError } from "zod-validation-error";
import { eq, and } from "drizzle-orm";
import { OpenAPITags, registry } from "@server/openApi";
import { rebuildSiteClientAssociations } from "@server/lib/rebuildSiteClientAssociations";
const removeClientFromSiteResourceBodySchema = z
.object({
clientId: z.number().int().positive()
})
.strict();
const removeClientFromSiteResourceParamsSchema = z
.object({
siteResourceId: z
.string()
.transform(Number)
.pipe(z.number().int().positive())
})
.strict();
registry.registerPath({
method: "post",
path: "/site-resource/{siteResourceId}/clients/remove",
description: "Remove a single client from a site resource. Clients with a userId cannot be removed.",
tags: [OpenAPITags.Resource, OpenAPITags.Client],
request: {
params: removeClientFromSiteResourceParamsSchema,
body: {
content: {
"application/json": {
schema: removeClientFromSiteResourceBodySchema
}
}
}
},
responses: {}
});
export async function removeClientFromSiteResource(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedBody = removeClientFromSiteResourceBodySchema.safeParse(
req.body
);
if (!parsedBody.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedBody.error).toString()
)
);
}
const { clientId } = parsedBody.data;
const parsedParams = removeClientFromSiteResourceParamsSchema.safeParse(
req.params
);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedParams.error).toString()
)
);
}
const { siteResourceId } = parsedParams.data;
// get the site resource
const [siteResource] = await db
.select()
.from(siteResources)
.where(eq(siteResources.siteResourceId, siteResourceId))
.limit(1);
if (!siteResource) {
return next(
createHttpError(HttpCode.NOT_FOUND, "Site resource not found")
);
}
// Check if client exists and has a userId
const [client] = await db
.select()
.from(clients)
.where(eq(clients.clientId, clientId))
.limit(1);
if (!client) {
return next(
createHttpError(HttpCode.NOT_FOUND, "Client not found")
);
}
if (client.userId !== null) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"Cannot remove clients that are associated with a user"
)
);
}
// Check if client exists in site resource
const existingEntry = await db
.select()
.from(clientSiteResources)
.where(
and(
eq(clientSiteResources.siteResourceId, siteResourceId),
eq(clientSiteResources.clientId, clientId)
)
);
if (existingEntry.length === 0) {
return next(
createHttpError(
HttpCode.NOT_FOUND,
"Client not found in site resource"
)
);
}
await db.transaction(async (trx) => {
await trx
.delete(clientSiteResources)
.where(
and(
eq(clientSiteResources.siteResourceId, siteResourceId),
eq(clientSiteResources.clientId, clientId)
)
);
await rebuildSiteClientAssociations(siteResource, trx);
});
return response(res, {
data: {},
success: true,
error: false,
message: "Client removed from site resource successfully",
status: HttpCode.OK
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

View File

@@ -0,0 +1,149 @@
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import { db, siteResources, clients, clientSiteResources } from "@server/db";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import logger from "@server/logger";
import { fromError } from "zod-validation-error";
import { eq, inArray } from "drizzle-orm";
import { OpenAPITags, registry } from "@server/openApi";
import { rebuildSiteClientAssociations } from "@server/lib/rebuildSiteClientAssociations";
const setSiteResourceClientsBodySchema = z
.object({
clientIds: z.array(z.number().int().positive())
})
.strict();
const setSiteResourceClientsParamsSchema = z
.object({
siteResourceId: z
.string()
.transform(Number)
.pipe(z.number().int().positive())
})
.strict();
registry.registerPath({
method: "post",
path: "/site-resource/{siteResourceId}/clients",
description:
"Set clients for a site resource. This will replace all existing clients. Clients with a userId cannot be added.",
tags: [OpenAPITags.Resource, OpenAPITags.Client],
request: {
params: setSiteResourceClientsParamsSchema,
body: {
content: {
"application/json": {
schema: setSiteResourceClientsBodySchema
}
}
}
},
responses: {}
});
export async function setSiteResourceClients(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedBody = setSiteResourceClientsBodySchema.safeParse(req.body);
if (!parsedBody.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedBody.error).toString()
)
);
}
const { clientIds } = parsedBody.data;
const parsedParams = setSiteResourceClientsParamsSchema.safeParse(req.params);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedParams.error).toString()
)
);
}
const { siteResourceId } = parsedParams.data;
// get the site resource
const [siteResource] = await db
.select()
.from(siteResources)
.where(eq(siteResources.siteResourceId, siteResourceId))
.limit(1);
if (!siteResource) {
return next(
createHttpError(
HttpCode.INTERNAL_SERVER_ERROR,
"Site resource not found"
)
);
}
// Check if any clients have a userId (associated with a user)
if (clientIds.length > 0) {
const clientsWithUsers = await db
.select()
.from(clients)
.where(
inArray(clients.clientId, clientIds)
);
const clientsWithUserId = clientsWithUsers.filter(
(client) => client.userId !== null
);
if (clientsWithUserId.length > 0) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"Cannot add clients that are associated with a user"
)
);
}
}
await db.transaction(async (trx) => {
await trx
.delete(clientSiteResources)
.where(eq(clientSiteResources.siteResourceId, siteResourceId));
if (clientIds.length > 0) {
await Promise.all(
clientIds.map((clientId) =>
trx
.insert(clientSiteResources)
.values({ clientId, siteResourceId })
.returning()
)
);
}
await rebuildSiteClientAssociations(siteResource, trx);
});
return response(res, {
data: {},
success: true,
error: false,
message: "Clients set for site resource successfully",
status: HttpCode.CREATED
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

View File

@@ -36,7 +36,7 @@ import {
} from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useState, useEffect } from "react";
import { useState, useEffect, useMemo } from "react";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";
@@ -214,12 +214,20 @@ export default function ClientsTable({
userId: false
};
const [userColumnVisibility, setUserColumnVisibility] = useState<VisibilityState>(
() => getStoredColumnVisibility("user-clients", defaultUserColumnVisibility)
);
const [machineColumnVisibility, setMachineColumnVisibility] = useState<VisibilityState>(
() => getStoredColumnVisibility("machine-clients", defaultMachineColumnVisibility)
);
const [userColumnVisibility, setUserColumnVisibility] =
useState<VisibilityState>(() =>
getStoredColumnVisibility(
"user-clients",
defaultUserColumnVisibility
)
);
const [machineColumnVisibility, setMachineColumnVisibility] =
useState<VisibilityState>(() =>
getStoredColumnVisibility(
"machine-clients",
defaultMachineColumnVisibility
)
);
const currentView = searchParams.get("view") || defaultView;
@@ -276,9 +284,7 @@ export default function ClientsTable({
placeholder={t("resourcesSearch")}
value={machineGlobalFilter ?? ""}
onChange={(e) =>
machineTable.setGlobalFilter(
String(e.target.value)
)
machineTable.setGlobalFilter(String(e.target.value))
}
className="w-full pl-8"
/>
@@ -318,8 +324,14 @@ export default function ClientsTable({
return null;
};
// Check if there are any rows without userIds in the current view's data
const hasRowsWithoutUserId = useMemo(() => {
const currentData = currentView === "machine" ? machineClients : userClients;
return currentData?.some((client) => !client.userId) ?? false;
}, [currentView, machineClients, userClients]);
const columns: ColumnDef<ClientRow>[] = [
const columns: ColumnDef<ClientRow>[] = useMemo(() => {
const baseColumns: ColumnDef<ClientRow>[] = [
{
accessorKey: "name",
header: ({ column }) => {
@@ -513,52 +525,59 @@ export default function ClientsTable({
);
}
},
{
id: "actions",
header: () => (<span className="p-3">{t("actions")}</span>),
cell: ({ row }) => {
const clientRow = row.original;
return (
<div className="flex items-center">
<Link
href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
>
<Button variant={"outline"}>
Edit
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
];
// Only include actions column if there are rows without userIds
if (hasRowsWithoutUserId) {
baseColumns.push({
id: "actions",
header: () => <span className="p-3">{t("actions")}</span>,
cell: ({ row }) => {
const clientRow = row.original;
return !clientRow.userId ? (
<div className="flex items-center">
<Link
href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
>
<Button variant={"outline"}>
Edit
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* <Link */}
{/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */}
{/* <DropdownMenuItem> */}
{/* View settings */}
{/* </DropdownMenuItem> */}
{/* </Link> */}
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
setIsDeleteModalOpen(true);
}}
>
<span className="text-red-500">Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* <Link */}
{/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */}
{/* <DropdownMenuItem> */}
{/* View settings */}
{/* </DropdownMenuItem> */}
{/* </Link> */}
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
setIsDeleteModalOpen(true);
}}
>
<span className="text-red-500">Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
) : null;
}
});
}
];
return baseColumns;
}, [hasRowsWithoutUserId, t]);
const userTable = useReactTable({
data: userClients || [],
@@ -674,80 +693,122 @@ export default function ClientsTable({
</TabsList>
</div>
<div className="flex items-center gap-2 sm:justify-end">
{currentView === "user" && userTable.getAllColumns().some((column) => column.getCanHide()) && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Columns className="mr-0 sm:mr-2 h-4 w-4" />
<span className="hidden sm:inline">
{t("columns") || "Columns"}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuLabel>
{t("toggleColumns") || "Toggle columns"}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{userTable
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
>
{typeof column.columnDef.header === "string"
? column.columnDef.header
: column.id}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
)}
{currentView === "machine" && machineTable.getAllColumns().some((column) => column.getCanHide()) && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Columns className="mr-0 sm:mr-2 h-4 w-4" />
<span className="hidden sm:inline">
{t("columns") || "Columns"}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuLabel>
{t("toggleColumns") || "Toggle columns"}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{machineTable
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
>
{typeof column.columnDef.header === "string"
? column.columnDef.header
: column.id}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
)}
{currentView === "user" &&
userTable
.getAllColumns()
.some((column) =>
column.getCanHide()
) && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Columns className="mr-0 sm:mr-2 h-4 w-4" />
<span className="hidden sm:inline">
{t("columns") ||
"Columns"}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-48"
>
<DropdownMenuLabel>
{t("toggleColumns") ||
"Toggle columns"}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{userTable
.getAllColumns()
.filter((column) =>
column.getCanHide()
)
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(
value
) =>
column.toggleVisibility(
!!value
)
}
>
{typeof column
.columnDef
.header ===
"string"
? column
.columnDef
.header
: column.id}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
)}
{currentView === "machine" &&
machineTable
.getAllColumns()
.some((column) =>
column.getCanHide()
) && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Columns className="mr-0 sm:mr-2 h-4 w-4" />
<span className="hidden sm:inline">
{t("columns") ||
"Columns"}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-48"
>
<DropdownMenuLabel>
{t("toggleColumns") ||
"Toggle columns"}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{machineTable
.getAllColumns()
.filter((column) =>
column.getCanHide()
)
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(
value
) =>
column.toggleVisibility(
!!value
)
}
>
{typeof column
.columnDef
.header ===
"string"
? column
.columnDef
.header
: column.id}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
)}
<div>
<Button
variant="outline"
@@ -774,24 +835,24 @@ export default function ClientsTable({
.map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers
.filter((header) => header.column.getIsVisible())
.map(
(header) => (
<TableHead
key={header.id}
>
{header.isPlaceholder
? null
: flexRender(
header
.column
.columnDef
.header,
header.getContext()
)}
</TableHead>
)
)}
.filter((header) =>
header.column.getIsVisible()
)
.map((header) => (
<TableHead
key={header.id}
>
{header.isPlaceholder
? null
: flexRender(
header
.column
.columnDef
.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
@@ -830,9 +891,7 @@ export default function ClientsTable({
) : (
<TableRow>
<TableCell
colSpan={
columns.length
}
colSpan={columns.length}
className="h-24 text-center"
>
{t("noResults")}
@@ -858,24 +917,24 @@ export default function ClientsTable({
.map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers
.filter((header) => header.column.getIsVisible())
.map(
(header) => (
<TableHead
key={header.id}
>
{header.isPlaceholder
? null
: flexRender(
header
.column
.columnDef
.header,
header.getContext()
)}
</TableHead>
)
)}
.filter((header) =>
header.column.getIsVisible()
)
.map((header) => (
<TableHead
key={header.id}
>
{header.isPlaceholder
? null
: flexRender(
header
.column
.columnDef
.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
@@ -914,9 +973,7 @@ export default function ClientsTable({
) : (
<TableRow>
<TableCell
colSpan={
columns.length
}
colSpan={columns.length}
className="h-24 text-center"
>
{t("noResults")}

View File

@@ -53,6 +53,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
import { ListSitesResponse } from "@server/routers/site";
import { ListRolesResponse } from "@server/routers/role";
import { ListUsersResponse } from "@server/routers/user";
import { ListClientsResponse } from "@server/routers/client/listClients";
import { cn } from "@app/lib/cn";
import { Tag, TagInput } from "@app/components/tags/tag-input";
import { Separator } from "@app/components/ui/separator";
@@ -115,6 +116,12 @@ export default function CreateInternalResourceDialog({
id: z.string(),
text: z.string()
})
).optional(),
clients: z.array(
z.object({
id: z.string(),
text: z.string()
})
).optional()
})
.refine(
@@ -158,8 +165,11 @@ export default function CreateInternalResourceDialog({
const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>([]);
const [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>([]);
const [allClients, setAllClients] = useState<{ id: string; text: string }[]>([]);
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<number | null>(null);
const [activeUsersTagIndex, setActiveUsersTagIndex] = useState<number | null>(null);
const [activeClientsTagIndex, setActiveClientsTagIndex] = useState<number | null>(null);
const [hasMachineClients, setHasMachineClients] = useState(false);
const availableSites = sites.filter(
(site) => site.type === "newt" && site.subnet
@@ -177,7 +187,8 @@ export default function CreateInternalResourceDialog({
destinationPort: undefined,
alias: "",
roles: [],
users: []
users: [],
clients: []
}
});
@@ -195,17 +206,19 @@ export default function CreateInternalResourceDialog({
destinationPort: undefined,
alias: "",
roles: [],
users: []
users: [],
clients: []
});
}
}, [open]);
useEffect(() => {
const fetchRolesAndUsers = async () => {
const fetchRolesUsersAndClients = async () => {
try {
const [rolesResponse, usersResponse] = await Promise.all([
const [rolesResponse, usersResponse, clientsResponse] = await Promise.all([
api.get<AxiosResponse<ListRolesResponse>>(`/org/${orgId}/roles`),
api.get<AxiosResponse<ListUsersResponse>>(`/org/${orgId}/users`)
api.get<AxiosResponse<ListUsersResponse>>(`/org/${orgId}/users`),
api.get<AxiosResponse<ListClientsResponse>>(`/org/${orgId}/clients?filter=machine&limit=1000`)
]);
setAllRoles(
@@ -223,13 +236,23 @@ export default function CreateInternalResourceDialog({
text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
}))
);
const machineClients = clientsResponse.data.data.clients
.filter((client) => !client.userId)
.map((client) => ({
id: client.clientId.toString(),
text: client.name
}));
setAllClients(machineClients);
setHasMachineClients(machineClients.length > 0);
} catch (error) {
console.error("Error fetching roles and users:", error);
console.error("Error fetching roles, users, and clients:", error);
}
};
if (open) {
fetchRolesAndUsers();
fetchRolesUsersAndClients();
}
}, [open, orgId]);
@@ -265,6 +288,12 @@ export default function CreateInternalResourceDialog({
});
}
if (data.clients && data.clients.length > 0) {
await api.post(`/site-resource/${siteResourceId}/clients`, {
clientIds: data.clients.map((c) => parseInt(c.id))
});
}
toast({
title: t("createInternalResourceDialogSuccess"),
description: t("createInternalResourceDialogInternalResourceCreatedSuccessfully"),
@@ -641,6 +670,42 @@ export default function CreateInternalResourceDialog({
</FormItem>
)}
/>
{hasMachineClients && (
<FormField
control={form.control}
name="clients"
render={({ field }) => (
<FormItem className="flex flex-col items-start">
<FormLabel>{t("clients")}</FormLabel>
<FormControl>
<TagInput
{...field}
activeTagIndex={activeClientsTagIndex}
setActiveTagIndex={setActiveClientsTagIndex}
placeholder={t("accessClientSelect") || "Select machine clients"}
size="sm"
tags={form.getValues().clients || []}
setTags={(newClients) => {
form.setValue(
"clients",
newClients as [Tag, ...Tag[]]
);
}}
enableAutocomplete={true}
autocompleteOptions={allClients}
allowDuplicates={false}
restrictTagsToAutocompleteOptions={true}
sortTags={true}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t("resourceClientDescription") || "Machine clients that can access this resource"}
</FormDescription>
</FormItem>
)}
/>
)}
</div>
</div>
</form>

View File

@@ -41,6 +41,8 @@ import { ListRolesResponse } from "@server/routers/role";
import { ListUsersResponse } from "@server/routers/user";
import { ListSiteResourceRolesResponse } from "@server/routers/siteResource/listSiteResourceRoles";
import { ListSiteResourceUsersResponse } from "@server/routers/siteResource/listSiteResourceUsers";
import { ListSiteResourceClientsResponse } from "@server/routers/siteResource/listSiteResourceClients";
import { ListClientsResponse } from "@server/routers/client/listClients";
import { Tag, TagInput } from "@app/components/tags/tag-input";
import { AxiosResponse } from "axios";
import { UserType } from "@server/types/UserTypes";
@@ -97,6 +99,12 @@ export default function EditInternalResourceDialog({
id: z.string(),
text: z.string()
})
).optional(),
clients: z.array(
z.object({
id: z.string(),
text: z.string()
})
).optional()
})
.refine(
@@ -140,9 +148,12 @@ export default function EditInternalResourceDialog({
const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>([]);
const [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>([]);
const [allClients, setAllClients] = useState<{ id: string; text: string }[]>([]);
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<number | null>(null);
const [activeUsersTagIndex, setActiveUsersTagIndex] = useState<number | null>(null);
const [activeClientsTagIndex, setActiveClientsTagIndex] = useState<number | null>(null);
const [loadingRolesUsers, setLoadingRolesUsers] = useState(false);
const [hasMachineClients, setHasMachineClients] = useState(false);
const form = useForm<FormData>({
resolver: zodResolver(formSchema),
@@ -155,7 +166,8 @@ export default function EditInternalResourceDialog({
destinationPort: resource.destinationPort ?? undefined,
alias: resource.alias ?? null,
roles: [],
users: []
users: [],
clients: []
}
});
@@ -168,7 +180,8 @@ export default function EditInternalResourceDialog({
rolesResponse,
resourceRolesResponse,
usersResponse,
resourceUsersResponse
resourceUsersResponse,
clientsResponse
] = await Promise.all([
api.get<AxiosResponse<ListRolesResponse>>(`/org/${orgId}/roles`),
api.get<AxiosResponse<ListSiteResourceRolesResponse>>(
@@ -177,9 +190,29 @@ export default function EditInternalResourceDialog({
api.get<AxiosResponse<ListUsersResponse>>(`/org/${orgId}/users`),
api.get<AxiosResponse<ListSiteResourceUsersResponse>>(
`/site-resource/${resource.id}/users`
)
),
api.get<AxiosResponse<ListClientsResponse>>(`/org/${orgId}/clients?filter=machine&limit=1000`)
]);
let resourceClientsResponse: AxiosResponse<AxiosResponse<ListSiteResourceClientsResponse>>;
try {
resourceClientsResponse = await api.get<AxiosResponse<ListSiteResourceClientsResponse>>(
`/site-resource/${resource.id}/clients`
);
} catch {
resourceClientsResponse = {
data: {
data: {
clients: []
}
},
status: 200,
statusText: "OK",
headers: {} as any,
config: {} as any
} as any;
}
setAllRoles(
rolesResponse.data.data.roles
.map((role) => ({
@@ -213,8 +246,27 @@ export default function EditInternalResourceDialog({
text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
}))
);
const machineClients = clientsResponse.data.data.clients
.filter((client) => !client.userId)
.map((client) => ({
id: client.clientId.toString(),
text: client.name
}));
setAllClients(machineClients);
const existingClients = resourceClientsResponse.data.data.clients.map((c: { clientId: number; name: string }) => ({
id: c.clientId.toString(),
text: c.name
}));
form.setValue("clients", existingClients);
// Show clients tag input if there are machine clients OR existing client access
setHasMachineClients(machineClients.length > 0 || existingClients.length > 0);
} catch (error) {
console.error("Error fetching roles and users:", error);
console.error("Error fetching roles, users, and clients:", error);
} finally {
setLoadingRolesUsers(false);
}
@@ -231,7 +283,8 @@ export default function EditInternalResourceDialog({
destinationPort: resource.destinationPort ?? undefined,
alias: resource.alias ?? null,
roles: [],
users: []
users: [],
clients: []
});
fetchRolesAndUsers();
}
@@ -252,13 +305,16 @@ export default function EditInternalResourceDialog({
alias: data.alias && typeof data.alias === "string" && data.alias.trim() ? data.alias : null
});
// Update roles and users
// Update roles, users, and clients
await Promise.all([
api.post(`/site-resource/${resource.id}/roles`, {
roleIds: (data.roles || []).map((r) => parseInt(r.id))
}),
api.post(`/site-resource/${resource.id}/users`, {
userIds: (data.users || []).map((u) => u.id)
}),
api.post(`/site-resource/${resource.id}/clients`, {
clientIds: (data.clients || []).map((c) => parseInt(c.id))
})
]);
@@ -530,6 +586,42 @@ export default function EditInternalResourceDialog({
</FormItem>
)}
/>
{hasMachineClients && (
<FormField
control={form.control}
name="clients"
render={({ field }) => (
<FormItem className="flex flex-col items-start">
<FormLabel>{t("clients")}</FormLabel>
<FormControl>
<TagInput
{...field}
activeTagIndex={activeClientsTagIndex}
setActiveTagIndex={setActiveClientsTagIndex}
placeholder={t("accessClientSelect") || "Select machine clients"}
size="sm"
tags={form.getValues().clients || []}
setTags={(newClients) => {
form.setValue(
"clients",
newClients as [Tag, ...Tag[]]
);
}}
enableAutocomplete={true}
autocompleteOptions={allClients}
allowDuplicates={false}
restrictTagsToAutocompleteOptions={true}
sortTags={true}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t("resourceClientDescription") || "Machine clients that can access this resource"}
</FormDescription>
</FormItem>
)}
/>
)}
</div>
)}
</div>