pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-13 00:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into refactor/domain-picker-default-value

Browse Source
This commit is contained in:
Fred KISSIE
2025-12-17 00:52:32 +01:00
parent e02fa7c148 a21029582e
commit fccff9c23a
92 changed files with 1714 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AdminIdpTable.tsx
View File

@@ -196,7 +196,7 @@ export default function IdpTable({ idps }: Props) {
setSelectedIdp(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>
{t("idpQuestionRemove", {
name: selectedIdp.name

4
src/components/AdminUsersTable.tsx
View File

@@ -269,7 +269,7 @@ export default function UsersTable({ users }: Props) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{r.type !== "internal" && (
{r.type === "internal" && (
<DropdownMenuItem
onClick={() => {
generatePasswordResetCode(r.id);
@@ -313,7 +313,7 @@ export default function UsersTable({ users }: Props) {
setSelected(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>
{t("userQuestionRemove", {
selectedUser:

2
src/components/ApiKeysTable.tsx
View File

@@ -182,7 +182,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
setSelected(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("apiKeysQuestionRemove")}</p>
<p>{t("apiKeysMessageRemove")}</p>

5
src/components/ClientResourcesTable.tsx
View File

@@ -41,6 +41,9 @@ export type InternalResourceRow = {
// destinationPort: number | null;
alias: string | null;
niceId: string;
tcpPortRangeString: string | null;
udpPortRangeString: string | null;
disableIcmp: boolean;
};
type ClientResourcesTableProps = {
@@ -284,7 +287,7 @@ export default function ClientResourcesTable({
setSelectedInternalResource(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("resourceQuestionRemove")}</p>
<p>{t("resourceMessageRemove")}</p>
</div>

270
src/components/CreateInternalResourceDialog.tsx
View File

@@ -42,15 +42,14 @@ import {
SelectTrigger,
SelectValue
} from "@app/components/ui/select";
import { Switch } from "@app/components/ui/switch";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { cn } from "@app/lib/cn";
import { orgQueries } from "@app/lib/queries";
import { zodResolver } from "@hookform/resolvers/zod";
import { ListClientsResponse } from "@server/routers/client/listClients";
import { ListSitesResponse } from "@server/routers/site";
import { ListUsersResponse } from "@server/routers/user";
import { UserType } from "@server/types/UserTypes";
import { useQuery } from "@tanstack/react-query";
import { AxiosResponse } from "axios";
@@ -59,6 +58,82 @@ import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
// import { InfoPopup } from "@app/components/ui/info-popup";
// Helper to validate port range string format
const isValidPortRangeString = (val: string | undefined | null): boolean => {
if (!val || val.trim() === "" || val.trim() === "*") {
return true;
}
const parts = val.split(",").map((p) => p.trim());
for (const part of parts) {
if (part === "") {
return false;
}
if (part.includes("-")) {
const [start, end] = part.split("-").map((p) => p.trim());
if (!start || !end) {
return false;
}
const startPort = parseInt(start, 10);
const endPort = parseInt(end, 10);
if (isNaN(startPort) || isNaN(endPort)) {
return false;
}
if (startPort < 1 || startPort > 65535 || endPort < 1 || endPort > 65535) {
return false;
}
if (startPort > endPort) {
return false;
}
} else {
const port = parseInt(part, 10);
if (isNaN(port)) {
return false;
}
if (port < 1 || port > 65535) {
return false;
}
}
}
return true;
};
// Port range string schema for client-side validation
const portRangeStringSchema = z
.string()
.optional()
.nullable()
.refine(
(val) => isValidPortRangeString(val),
{
message:
'Port range must be "*" for all ports, or a comma-separated list of ports and ranges (e.g., "80,443,8000-9000"). Ports must be between 1 and 65535.'
}
);
// Helper to determine the port mode from a port range string
type PortMode = "all" | "blocked" | "custom";
const getPortModeFromString = (val: string | undefined | null): PortMode => {
if (val === "*") return "all";
if (!val || val.trim() === "") return "blocked";
return "custom";
};
// Helper to get the port string for API from mode and custom value
const getPortStringFromMode = (mode: PortMode, customValue: string): string | undefined => {
if (mode === "all") return "*";
if (mode === "blocked") return "";
return customValue;
};
type Site = ListSitesResponse["sites"][0];
@@ -103,6 +178,9 @@ export default function CreateInternalResourceDialog({
// .max(65535, t("createInternalResourceDialogDestinationPortMax"))
// .nullish(),
alias: z.string().nullish(),
tcpPortRangeString: portRangeStringSchema,
udpPortRangeString: portRangeStringSchema,
disableIcmp: z.boolean().optional(),
roles: z
.array(
z.object({
@@ -209,6 +287,12 @@ export default function CreateInternalResourceDialog({
number | null
>(null);
// Port restriction UI state - default to "all" (*) for new resources
const [tcpPortMode, setTcpPortMode] = useState<PortMode>("all");
const [udpPortMode, setUdpPortMode] = useState<PortMode>("all");
const [tcpCustomPorts, setTcpCustomPorts] = useState<string>("");
const [udpCustomPorts, setUdpCustomPorts] = useState<string>("");
const availableSites = sites.filter(
(site) => site.type === "newt" && site.subnet
);
@@ -224,6 +308,9 @@ export default function CreateInternalResourceDialog({
destination: "",
// destinationPort: undefined,
alias: "",
tcpPortRangeString: "*",
udpPortRangeString: "*",
disableIcmp: false,
roles: [],
users: [],
clients: []
@@ -232,6 +319,17 @@ export default function CreateInternalResourceDialog({
const mode = form.watch("mode");
// Update form values when port mode or custom ports change
useEffect(() => {
const tcpValue = getPortStringFromMode(tcpPortMode, tcpCustomPorts);
form.setValue("tcpPortRangeString", tcpValue);
}, [tcpPortMode, tcpCustomPorts, form]);
useEffect(() => {
const udpValue = getPortStringFromMode(udpPortMode, udpCustomPorts);
form.setValue("udpPortRangeString", udpValue);
}, [udpPortMode, udpCustomPorts, form]);
// Helper function to check if destination contains letters (hostname vs IP)
const isHostname = (destination: string): boolean => {
return /[a-zA-Z]/.test(destination);
@@ -258,10 +356,18 @@ export default function CreateInternalResourceDialog({
destination: "",
// destinationPort: undefined,
alias: "",
tcpPortRangeString: "*",
udpPortRangeString: "*",
disableIcmp: false,
roles: [],
users: [],
clients: []
});
// Reset port mode state
setTcpPortMode("all");
setUdpPortMode("all");
setTcpCustomPorts("");
setUdpCustomPorts("");
}
}, [open]);
@@ -304,6 +410,9 @@ export default function CreateInternalResourceDialog({
data.alias.trim()
? data.alias
: undefined,
tcpPortRangeString: data.tcpPortRangeString,
udpPortRangeString: data.udpPortRangeString,
disableIcmp: data.disableIcmp ?? false,
roleIds: data.roles
? data.roles.map((r) => parseInt(r.id))
: [],
@@ -727,6 +836,163 @@ export default function CreateInternalResourceDialog({
</div>
)}
{/* Port Restrictions Section */}
<div>
<h3 className="text-lg font-semibold mb-4">
{t("portRestrictions")}
</h3>
<div className="space-y-4">
{/* TCP Ports */}
<FormField
control={form.control}
name="tcpPortRangeString"
render={({ field }) => (
<FormItem>
<div className="flex items-center gap-2">
<FormLabel className="min-w-10">
TCP
</FormLabel>
{/*<InfoPopup
info={t("tcpPortsDescription")}
/>*/}
<Select
value={tcpPortMode}
onValueChange={(value: PortMode) => {
setTcpPortMode(value);
}}
>
<SelectTrigger className="w-[110px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">
{t("allPorts")}
</SelectItem>
<SelectItem value="blocked">
{t("blocked")}
</SelectItem>
<SelectItem value="custom">
{t("custom")}
</SelectItem>
</SelectContent>
</Select>
{tcpPortMode === "custom" ? (
<FormControl>
<Input
placeholder="80,443,8000-9000"
value={tcpCustomPorts}
onChange={(e) =>
setTcpCustomPorts(e.target.value)
}
className="flex-1"
/>
</FormControl>
) : (
<Input
disabled
placeholder={
tcpPortMode === "all"
? t("allPortsAllowed")
: t("allPortsBlocked")
}
className="flex-1"
/>
)}
</div>
<FormMessage />
</FormItem>
)}
/>
{/* UDP Ports */}
<FormField
control={form.control}
name="udpPortRangeString"
render={({ field }) => (
<FormItem>
<div className="flex items-center gap-2">
<FormLabel className="min-w-10">
UDP
</FormLabel>
{/*<InfoPopup
info={t("udpPortsDescription")}
/>*/}
<Select
value={udpPortMode}
onValueChange={(value: PortMode) => {
setUdpPortMode(value);
}}
>
<SelectTrigger className="w-[110px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">
{t("allPorts")}
</SelectItem>
<SelectItem value="blocked">
{t("blocked")}
</SelectItem>
<SelectItem value="custom">
{t("custom")}
</SelectItem>
</SelectContent>
</Select>
{udpPortMode === "custom" ? (
<FormControl>
<Input
placeholder="53,123,500-600"
value={udpCustomPorts}
onChange={(e) =>
setUdpCustomPorts(e.target.value)
}
className="flex-1"
/>
</FormControl>
) : (
<Input
disabled
placeholder={
udpPortMode === "all"
? t("allPortsAllowed")
: t("allPortsBlocked")
}
className="flex-1"
/>
)}
</div>
<FormMessage />
</FormItem>
)}
/>
{/* ICMP Toggle */}
<FormField
control={form.control}
name="disableIcmp"
render={({ field }) => (
<FormItem>
<div className="flex items-center gap-2">
<FormLabel className="min-w-10">
ICMP
</FormLabel>
<FormControl>
<Switch
checked={!field.value}
onCheckedChange={(checked) => field.onChange(!checked)}
/>
</FormControl>
<span className="text-sm text-muted-foreground">
{field.value ? t("blocked") : t("allowed")}
</span>
</div>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>
{/* Access Control Section */}
<div>
<h3 className="text-lg font-semibold mb-4">

10
src/components/Credenza.tsx
View File

@@ -131,7 +131,7 @@ const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
const CredenzaHeader = isDesktop ? DialogHeader : SheetHeader;
return (
<CredenzaHeader className={cn("-mx-6 px-6 pb-6 border-b border-border", className)} {...props}>
<CredenzaHeader className={cn("-mx-6 px-6", className)} {...props}>
{children}
</CredenzaHeader>
);
@@ -177,7 +177,13 @@ const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
const CredenzaFooter = isDesktop ? DialogFooter : SheetFooter;
return (
<CredenzaFooter className={cn("mt-8 md:mt-0 -mx-6 px-6 pt-6 border-t border-border", className)} {...props}>
<CredenzaFooter
className={cn(
"mt-8 md:mt-0 -mx-6 px-6 pt-6 border-t border-border",
className
)}
{...props}
>
{children}
</CredenzaFooter>
);

67
src/components/DataTablePagination.tsx
View File

@@ -24,6 +24,8 @@ interface DataTablePaginationProps<TData> {
isServerPagination?: boolean;
isLoading?: boolean;
disabled?: boolean;
pageSize?: number;
pageIndex?: number;
}
export function DataTablePagination<TData>({
@@ -33,10 +35,26 @@ export function DataTablePagination<TData>({
totalCount,
isServerPagination = false,
isLoading = false,
disabled = false
disabled = false,
pageSize: controlledPageSize,
pageIndex: controlledPageIndex
}: DataTablePaginationProps<TData>) {
const t = useTranslations();
// Use controlled values if provided, otherwise fall back to table state
const pageSize = controlledPageSize ?? table.getState().pagination.pageSize;
const pageIndex =
controlledPageIndex ?? table.getState().pagination.pageIndex;
// Calculate page boundaries based on controlled state
// For server-side pagination, use totalCount if available for accurate page count
const pageCount =
isServerPagination && totalCount !== undefined
? Math.ceil(totalCount / pageSize)
: table.getPageCount();
const canNextPage = pageIndex < pageCount - 1;
const canPreviousPage = pageIndex > 0;
const handlePageSizeChange = (value: string) => {
const newPageSize = Number(value);
table.setPageSize(newPageSize);
@@ -51,7 +69,7 @@ export function DataTablePagination<TData>({
action: "first" | "previous" | "next" | "last"
) => {
if (isServerPagination && onPageChange) {
const currentPage = table.getState().pagination.pageIndex;
const currentPage = pageIndex;
const pageCount = table.getPageCount();
let newPage: number;
@@ -77,18 +95,24 @@ export function DataTablePagination<TData>({
}
} else {
// Use table's built-in navigation for client-side pagination
// But add bounds checking to prevent going beyond page boundaries
const pageCount = table.getPageCount();
switch (action) {
case "first":
table.setPageIndex(0);
break;
case "previous":
table.previousPage();
if (pageIndex > 0) {
table.previousPage();
}
break;
case "next":
table.nextPage();
if (pageIndex < pageCount - 1) {
table.nextPage();
}
break;
case "last":
table.setPageIndex(table.getPageCount() - 1);
table.setPageIndex(Math.max(0, pageCount - 1));
break;
}
}
@@ -98,14 +122,12 @@ export function DataTablePagination<TData>({
<div className="flex items-center justify-between text-muted-foreground">
<div className="flex items-center space-x-2">
<Select
value={`${table.getState().pagination.pageSize}`}
value={`${pageSize}`}
onValueChange={handlePageSizeChange}
disabled={disabled}
>
<SelectTrigger className="h-8 w-[73px]" disabled={disabled}>
<SelectValue
placeholder={table.getState().pagination.pageSize}
/>
<SelectValue placeholder={pageSize} />
</SelectTrigger>
<SelectContent side="bottom">
{[10, 20, 30, 40, 50, 100].map((pageSize) => (
@@ -121,16 +143,11 @@ export function DataTablePagination<TData>({
<div className="flex items-center justify-center text-sm font-medium">
{isServerPagination && totalCount !== undefined
? t("paginator", {
current:
table.getState().pagination.pageIndex + 1,
last: Math.ceil(
totalCount /
table.getState().pagination.pageSize
)
current: pageIndex + 1,
last: Math.ceil(totalCount / pageSize)
})
: t("paginator", {
current:
table.getState().pagination.pageIndex + 1,
current: pageIndex + 1,
last: table.getPageCount()
})}
</div>
@@ -139,9 +156,7 @@ export function DataTablePagination<TData>({
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => handlePageNavigation("first")}
disabled={
!table.getCanPreviousPage() || isLoading || disabled
}
disabled={!canPreviousPage || isLoading || disabled}
>
<span className="sr-only">{t("paginatorToFirst")}</span>
<DoubleArrowLeftIcon className="h-4 w-4" />
@@ -150,9 +165,7 @@ export function DataTablePagination<TData>({
variant="outline"
className="h-8 w-8 p-0"
onClick={() => handlePageNavigation("previous")}
disabled={
!table.getCanPreviousPage() || isLoading || disabled
}
disabled={!canPreviousPage || isLoading || disabled}
>
<span className="sr-only">
{t("paginatorToPrevious")}
@@ -163,9 +176,7 @@ export function DataTablePagination<TData>({
variant="outline"
className="h-8 w-8 p-0"
onClick={() => handlePageNavigation("next")}
disabled={
!table.getCanNextPage() || isLoading || disabled
}
disabled={!canNextPage || isLoading || disabled}
>
<span className="sr-only">{t("paginatorToNext")}</span>
<ChevronRightIcon className="h-4 w-4" />
@@ -174,9 +185,7 @@ export function DataTablePagination<TData>({
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => handlePageNavigation("last")}
disabled={
!table.getCanNextPage() || isLoading || disabled
}
disabled={!canNextPage || isLoading || disabled}
>
<span className="sr-only">{t("paginatorToLast")}</span>
<DoubleArrowRightIcon className="h-4 w-4" />

2
src/components/DomainsTable.tsx
View File

@@ -304,7 +304,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
setSelectedDomain(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("domainQuestionRemove")}</p>
<p>{t("domainMessageRemove")}</p>
</div>

316
src/components/EditInternalResourceDialog.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { Button } from "@app/components/ui/button";
import { Input } from "@app/components/ui/input";
import {
@@ -10,6 +10,7 @@ import {
SelectTrigger,
SelectValue
} from "@app/components/ui/select";
import { Switch } from "@app/components/ui/switch";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -36,17 +37,86 @@ import { toast } from "@app/hooks/useToast";
import { useTranslations } from "next-intl";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
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";
import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
import { orgQueries, resourceQueries } from "@app/lib/queries";
// import { InfoPopup } from "@app/components/ui/info-popup";
// Helper to validate port range string format
const isValidPortRangeString = (val: string | undefined | null): boolean => {
if (!val || val.trim() === "" || val.trim() === "*") {
return true;
}
const parts = val.split(",").map((p) => p.trim());
for (const part of parts) {
if (part === "") {
return false;
}
if (part.includes("-")) {
const [start, end] = part.split("-").map((p) => p.trim());
if (!start || !end) {
return false;
}
const startPort = parseInt(start, 10);
const endPort = parseInt(end, 10);
if (isNaN(startPort) || isNaN(endPort)) {
return false;
}
if (startPort < 1 || startPort > 65535 || endPort < 1 || endPort > 65535) {
return false;
}
if (startPort > endPort) {
return false;
}
} else {
const port = parseInt(part, 10);
if (isNaN(port)) {
return false;
}
if (port < 1 || port > 65535) {
return false;
}
}
}
return true;
};
// Port range string schema for client-side validation
const portRangeStringSchema = z
.string()
.optional()
.nullable()
.refine(
(val) => isValidPortRangeString(val),
{
message:
'Port range must be "*" for all ports, or a comma-separated list of ports and ranges (e.g., "80,443,8000-9000"). Ports must be between 1 and 65535.'
}
);
// Helper to determine the port mode from a port range string
type PortMode = "all" | "blocked" | "custom";
const getPortModeFromString = (val: string | undefined | null): PortMode => {
if (val === "*") return "all";
if (!val || val.trim() === "") return "blocked";
return "custom";
};
// Helper to get the port string for API from mode and custom value
const getPortStringFromMode = (mode: PortMode, customValue: string): string | undefined => {
if (mode === "all") return "*";
if (mode === "blocked") return "";
return customValue;
};
type InternalResourceData = {
id: number;
@@ -61,6 +131,9 @@ type InternalResourceData = {
destination: string;
// destinationPort?: number | null;
alias?: string | null;
tcpPortRangeString?: string | null;
udpPortRangeString?: string | null;
disableIcmp?: boolean;
};
type EditInternalResourceDialogProps = {
@@ -94,6 +167,9 @@ export default function EditInternalResourceDialog({
destination: z.string().min(1),
// destinationPort: z.int().positive().min(1, t("editInternalResourceDialogDestinationPortMin")).max(65535, t("editInternalResourceDialogDestinationPortMax")).nullish(),
alias: z.string().nullish(),
tcpPortRangeString: portRangeStringSchema,
udpPortRangeString: portRangeStringSchema,
disableIcmp: z.boolean().optional(),
roles: z
.array(
z.object({
@@ -255,6 +331,24 @@ export default function EditInternalResourceDialog({
number | null
>(null);
// Port restriction UI state
const [tcpPortMode, setTcpPortMode] = useState<PortMode>(
getPortModeFromString(resource.tcpPortRangeString)
);
const [udpPortMode, setUdpPortMode] = useState<PortMode>(
getPortModeFromString(resource.udpPortRangeString)
);
const [tcpCustomPorts, setTcpCustomPorts] = useState<string>(
resource.tcpPortRangeString && resource.tcpPortRangeString !== "*"
? resource.tcpPortRangeString
: ""
);
const [udpCustomPorts, setUdpCustomPorts] = useState<string>(
resource.udpPortRangeString && resource.udpPortRangeString !== "*"
? resource.udpPortRangeString
: ""
);
const form = useForm<FormData>({
resolver: zodResolver(formSchema),
defaultValues: {
@@ -265,6 +359,9 @@ export default function EditInternalResourceDialog({
destination: resource.destination || "",
// destinationPort: resource.destinationPort ?? undefined,
alias: resource.alias ?? null,
tcpPortRangeString: resource.tcpPortRangeString ?? "*",
udpPortRangeString: resource.udpPortRangeString ?? "*",
disableIcmp: resource.disableIcmp ?? false,
roles: [],
users: [],
clients: []
@@ -273,6 +370,17 @@ export default function EditInternalResourceDialog({
const mode = form.watch("mode");
// Update form values when port mode or custom ports change
useEffect(() => {
const tcpValue = getPortStringFromMode(tcpPortMode, tcpCustomPorts);
form.setValue("tcpPortRangeString", tcpValue);
}, [tcpPortMode, tcpCustomPorts, form]);
useEffect(() => {
const udpValue = getPortStringFromMode(udpPortMode, udpCustomPorts);
form.setValue("udpPortRangeString", udpValue);
}, [udpPortMode, udpCustomPorts, form]);
// Helper function to check if destination contains letters (hostname vs IP)
const isHostname = (destination: string): boolean => {
return /[a-zA-Z]/.test(destination);
@@ -327,6 +435,9 @@ export default function EditInternalResourceDialog({
data.alias.trim()
? data.alias
: null,
tcpPortRangeString: data.tcpPortRangeString,
udpPortRangeString: data.udpPortRangeString,
disableIcmp: data.disableIcmp ?? false,
roleIds: (data.roles || []).map((r) => parseInt(r.id)),
userIds: (data.users || []).map((u) => u.id),
clientIds: (data.clients || []).map((c) => parseInt(c.id))
@@ -396,10 +507,26 @@ export default function EditInternalResourceDialog({
mode: resource.mode || "host",
destination: resource.destination || "",
alias: resource.alias ?? null,
tcpPortRangeString: resource.tcpPortRangeString ?? "*",
udpPortRangeString: resource.udpPortRangeString ?? "*",
disableIcmp: resource.disableIcmp ?? false,
roles: [],
users: [],
clients: []
});
// Reset port mode state
setTcpPortMode(getPortModeFromString(resource.tcpPortRangeString));
setUdpPortMode(getPortModeFromString(resource.udpPortRangeString));
setTcpCustomPorts(
resource.tcpPortRangeString && resource.tcpPortRangeString !== "*"
? resource.tcpPortRangeString
: ""
);
setUdpCustomPorts(
resource.udpPortRangeString && resource.udpPortRangeString !== "*"
? resource.udpPortRangeString
: ""
);
previousResourceId.current = resource.id;
}
@@ -438,10 +565,26 @@ export default function EditInternalResourceDialog({
destination: resource.destination || "",
// destinationPort: resource.destinationPort ?? undefined,
alias: resource.alias ?? null,
tcpPortRangeString: resource.tcpPortRangeString ?? "*",
udpPortRangeString: resource.udpPortRangeString ?? "*",
disableIcmp: resource.disableIcmp ?? false,
roles: [],
users: [],
clients: []
});
// Reset port mode state
setTcpPortMode(getPortModeFromString(resource.tcpPortRangeString));
setUdpPortMode(getPortModeFromString(resource.udpPortRangeString));
setTcpCustomPorts(
resource.tcpPortRangeString && resource.tcpPortRangeString !== "*"
? resource.tcpPortRangeString
: ""
);
setUdpCustomPorts(
resource.udpPortRangeString && resource.udpPortRangeString !== "*"
? resource.udpPortRangeString
: ""
);
// Reset previous resource ID to ensure clean state on next open
previousResourceId.current = null;
}
@@ -674,6 +817,163 @@ export default function EditInternalResourceDialog({
</div>
)}
{/* Port Restrictions Section */}
<div>
<h3 className="text-lg font-semibold mb-4">
{t("portRestrictions")}
</h3>
<div className="space-y-4">
{/* TCP Ports */}
<FormField
control={form.control}
name="tcpPortRangeString"
render={({ field }) => (
<FormItem>
<div className="flex items-center gap-2">
<FormLabel className="min-w-10">
TCP
</FormLabel>
{/*<InfoPopup
info={t("tcpPortsDescription")}
/>*/}
<Select
value={tcpPortMode}
onValueChange={(value: PortMode) => {
setTcpPortMode(value);
}}
>
<SelectTrigger className="w-[110px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">
{t("allPorts")}
</SelectItem>
<SelectItem value="blocked">
{t("blocked")}
</SelectItem>
<SelectItem value="custom">
{t("custom")}
</SelectItem>
</SelectContent>
</Select>
{tcpPortMode === "custom" ? (
<FormControl>
<Input
placeholder="80,443,8000-9000"
value={tcpCustomPorts}
onChange={(e) =>
setTcpCustomPorts(e.target.value)
}
className="flex-1"
/>
</FormControl>
) : (
<Input
disabled
placeholder={
tcpPortMode === "all"
? t("allPortsAllowed")
: t("allPortsBlocked")
}
className="flex-1"
/>
)}
</div>
<FormMessage />
</FormItem>
)}
/>
{/* UDP Ports */}
<FormField
control={form.control}
name="udpPortRangeString"
render={({ field }) => (
<FormItem>
<div className="flex items-center gap-2">
<FormLabel className="min-w-10">
UDP
</FormLabel>
{/*<InfoPopup
info={t("udpPortsDescription")}
/>*/}
<Select
value={udpPortMode}
onValueChange={(value: PortMode) => {
setUdpPortMode(value);
}}
>
<SelectTrigger className="w-[110px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">
{t("allPorts")}
</SelectItem>
<SelectItem value="blocked">
{t("blocked")}
</SelectItem>
<SelectItem value="custom">
{t("custom")}
</SelectItem>
</SelectContent>
</Select>
{udpPortMode === "custom" ? (
<FormControl>
<Input
placeholder="53,123,500-600"
value={udpCustomPorts}
onChange={(e) =>
setUdpCustomPorts(e.target.value)
}
className="flex-1"
/>
</FormControl>
) : (
<Input
disabled
placeholder={
udpPortMode === "all"
? t("allPortsAllowed")
: t("allPortsBlocked")
}
className="flex-1"
/>
)}
</div>
<FormMessage />
</FormItem>
)}
/>
{/* ICMP Toggle */}
<FormField
control={form.control}
name="disableIcmp"
render={({ field }) => (
<FormItem>
<div className="flex items-center gap-2">
<FormLabel className="min-w-10">
ICMP
</FormLabel>
<FormControl>
<Switch
checked={!field.value}
onCheckedChange={(checked) => field.onChange(!checked)}
/>
</FormControl>
<span className="text-sm text-muted-foreground">
{field.value ? t("blocked") : t("allowed")}
</span>
</div>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>
{/* Access Control Section */}
<div>
<h3 className="text-lg font-semibold mb-4">

2
src/components/InvitationsTable.tsx
View File

@@ -182,7 +182,7 @@ export default function InvitationsTable({
setSelectedInvitation(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("inviteQuestionRemove")}</p>
<p>{t("inviteMessageRemove")}</p>
</div>

15
src/components/LayoutSidebar.tsx
View File

@@ -25,6 +25,7 @@ import { useEffect, useState } from "react";
import { FaGithub } from "react-icons/fa";
import SidebarLicenseButton from "./SidebarLicenseButton";
import { SidebarSupportButton } from "./SidebarSupportButton";
import { is } from "drizzle-orm";
const ProductUpdates = dynamic(() => import("./ProductUpdates"), {
ssr: false
@@ -52,7 +53,7 @@ export function LayoutSidebar({
const pathname = usePathname();
const isAdminPage = pathname?.startsWith("/admin");
const { user } = useUserContext();
const { isUnlocked } = useLicenseStatusContext();
const { isUnlocked, licenseStatus } = useLicenseStatusContext();
const { env } = useEnvContext();
const t = useTranslations();
@@ -226,6 +227,18 @@ export function LayoutSidebar({
<FaGithub size={12} />
</Link>
</div>
{build === "enterprise" &&
isUnlocked() &&
licenseStatus?.tier === "personal" ? (
<div className="text-xs text-muted-foreground text-center">
{t("personalUseOnly")}
</div>
) : null}
{build === "enterprise" && !isUnlocked() ? (
<div className="text-xs text-muted-foreground text-center">
{t("unlicensed")}
</div>
) : null}
{env?.app?.version && (
<div className="text-xs text-muted-foreground text-center">
<Link

54
src/components/LogAnalyticsData.tsx
View File

@@ -1,22 +1,27 @@
"use client";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { createApiClient } from "@app/lib/api";
import { cn } from "@app/lib/cn";
import {
logAnalyticsFiltersSchema,
logQueries,
resourceQueries
} from "@app/lib/queries";
import { useQuery } from "@tanstack/react-query";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { Card, CardContent, CardHeader } from "./ui/card";
import { LoaderIcon, RefreshCw, XIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { DateRangePicker, type DateTimeValue } from "./DateTimePicker";
import { Button } from "./ui/button";
import { cn } from "@app/lib/cn";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader } from "./ui/card";
import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji";
import {
InfoSection,
InfoSectionContent,
InfoSections,
InfoSectionTitle
} from "./InfoSection";
import { Label } from "./ui/label";
import {
Select,
SelectContent,
@@ -24,23 +29,10 @@ import {
SelectTrigger,
SelectValue
} from "./ui/select";
import { Label } from "./ui/label";
import { Separator } from "./ui/separator";
import {
InfoSection,
InfoSectionContent,
InfoSections,
InfoSectionTitle
} from "./InfoSection";
import { WorldMap } from "./WorldMap";
import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from "./ui/tooltip";
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
import {
ChartContainer,
ChartLegend,
@@ -49,7 +41,13 @@ import {
ChartTooltipContent,
type ChartConfig
} from "./ui/chart";
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from "./ui/tooltip";
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
export type AnalyticsContentProps = {
orgId: string;
@@ -67,17 +65,18 @@ export function LogAnalyticsData(props: AnalyticsContentProps) {
const isEmptySearchParams =
!filters.resourceId && !filters.timeStart && !filters.timeEnd;
const env = useEnvContext();
const [api] = useState(() => createApiClient(env));
const router = useRouter();
console.log({ filters });
const dateRange = {
startDate: filters.timeStart ? new Date(filters.timeStart) : undefined,
endDate: filters.timeEnd ? new Date(filters.timeEnd) : undefined
startDate: filters.timeStart
? new Date(filters.timeStart)
: getSevenDaysAgo(),
endDate: filters.timeEnd ? new Date(filters.timeEnd) : new Date()
};
const { data: resources = [], isFetching: isFetchingResources } = useQuery(
resourceQueries.listNamesPerOrg(props.orgId, api)
resourceQueries.listNamesPerOrg(props.orgId)
);
const {
@@ -88,7 +87,6 @@ export function LogAnalyticsData(props: AnalyticsContentProps) {
} = useQuery(
logQueries.requestAnalytics({
orgId: props.orgId,
api,
filters
})
);

93
src/components/LogDataTable.tsx
View File

@@ -1,16 +1,5 @@
"use client";
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import {
Table,
TableBody,
@@ -19,29 +8,36 @@ import {
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useEffect, useMemo, useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import {
Plus,
Search,
RefreshCw,
Filter,
X,
Download,
ChevronRight,
ChevronDown
} from "lucide-react";
import {
Card,
CardContent,
CardHeader,
CardTitle
} from "@app/components/ui/card";
import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs";
import { useTranslations } from "next-intl";
import { DateRangePicker, DateTimeValue } from "@app/components/DateTimePicker";
import { Button } from "@app/components/ui/button";
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
import {
ColumnDef,
ColumnFiltersState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
SortingState,
useReactTable
} from "@tanstack/react-table";
import {
ChevronDown,
ChevronRight,
Download,
Loader,
RefreshCw
} from "lucide-react";
import { useTranslations } from "next-intl";
import { useState, useEffect, useMemo } from "react";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from "./ui/tooltip";
const STORAGE_KEYS = {
PAGE_SIZE: "datatable-page-size",
@@ -400,15 +396,28 @@ export function LogDataTable<TData, TValue>({
</Button>
)}
{onExport && (
<Button
onClick={() => !disabled && onExport()}
disabled={isExporting || disabled}
>
<Download
className={`mr-2 h-4 w-4 ${isExporting ? "animate-spin" : ""}`}
/>
{t("exportCsv")}
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
onClick={() =>
!disabled && onExport()
}
disabled={isExporting || disabled}
>
{isExporting ? (
<Loader className="mr-2 size-4 animate-spin" />
) : (
<Download className="mr-2 size-4" />
)}
{t("exportCsv")}
</Button>
</TooltipTrigger>
<TooltipContent>
{t("exportCsvTooltip")}
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
</CardHeader>
@@ -533,6 +542,8 @@ export function LogDataTable<TData, TValue>({
isServerPagination={isServerPagination}
isLoading={isLoading}
disabled={disabled}
pageSize={pageSize}
pageIndex={currentPage}
/>
</div>
</CardContent>

2
src/components/MachineClientsTable.tsx
View File

@@ -354,7 +354,7 @@ export default function MachineClientsTable({
setSelectedClient(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("deleteClientQuestion")}</p>
<p>{t("clientMessageRemove")}</p>
</div>

2
src/components/OrgApiKeysTable.tsx
View File

@@ -189,7 +189,7 @@ export default function OrgApiKeysTable({
setSelected(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("apiKeysQuestionRemove")}</p>
<p>{t("apiKeysMessageRemove")}</p>

1
src/components/PermissionsSelectBox.tsx
View File

@@ -27,6 +27,7 @@ function getActionsCategories(root: boolean) {
[t("actionUpdateOrg")]: "updateOrg",
[t("actionGetOrgUser")]: "getOrgUser",
[t("actionInviteUser")]: "inviteUser",
[t("actionRemoveInvitation")]: "removeInvitation",
[t("actionListInvitations")]: "listInvitations",
[t("actionRemoveUser")]: "removeUser",
[t("actionListUsers")]: "listUsers",

2
src/components/ProxyResourcesTable.tsx
View File

@@ -535,7 +535,7 @@ export default function ProxyResourcesTable({
setSelectedResource(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("resourceQuestionRemove")}</p>
<p>{t("resourceMessageRemove")}</p>
</div>

18
src/components/ResourceAuthPortal.tsx
View File

@@ -93,7 +93,7 @@ type ResourceAuthPortalProps = {
export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
const router = useRouter();
const t = useTranslations();
const { isUnlocked } = useLicenseStatusContext();
const { isUnlocked, licenseStatus } = useLicenseStatusContext();
const getNumMethods = () => {
let colLength = 0;
@@ -737,6 +737,22 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
</span>
</div>
)}
{build === "enterprise" && !isUnlocked() ? (
<div className="text-center mt-2">
<span className="text-sm font-medium text-muted-foreground">
{t("instanceIsUnlicensed")}
</span>
</div>
) : null}
{build === "enterprise" &&
isUnlocked() &&
licenseStatus?.tier === "personal" ? (
<div className="text-center mt-2">
<span className="text-sm font-medium text-muted-foreground">
{t("loginPageLicenseWatermark")}
</span>
</div>
) : null}
</div>
) : (
<ResourceAccessDenied />

2
src/components/SitesTable.tsx
View File

@@ -412,7 +412,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
setSelectedSite(null);
}}
dialog={
<div className="">
<div className="space-y-2">
<p>{t("siteQuestionRemove")}</p>
<p>{t("siteMessageRemove")}</p>
</div>

2
src/components/UserDevicesTable.tsx
View File

@@ -401,7 +401,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
setSelectedClient(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("deleteClientQuestion")}</p>
<p>{t("clientMessageRemove")}</p>
</div>

2
src/components/UsersTable.tsx
View File

@@ -258,7 +258,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
setSelectedUser(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("userQuestionOrgRemove")}</p>
<p>{t("userMessageOrgRemove")}</p>
</div>

2
src/components/ViewDevicesDialog.tsx
View File

@@ -224,7 +224,7 @@ export default function ViewDevicesDialog({
}
}}
dialog={
<div>
<div className="space-y-2">
<p>
{t("deviceQuestionRemove") ||
"Are you sure you want to delete this device?"}

2
src/components/private/OrgIdpTable.tsx
View File

@@ -177,7 +177,7 @@ export default function IdpTable({ idps, orgId }: Props) {
setSelectedIdp(null);
}}
dialog={
<div>
<div className="space-y-2">
<p>{t("idpQuestionRemove")}</p>
<p>{t("idpMessageRemove")}</p>
</div>

2
src/components/tags/autocomplete.tsx
View File

@@ -308,7 +308,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
role="option"
aria-selected={isSelected}
className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 hover:bg-accent",
isSelected &&
"bg-accent text-accent-foreground",
classStyleProps?.commandItem

35
src/components/ui/data-table.tsx
View File

@@ -10,7 +10,8 @@ import {
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel,
VisibilityState
VisibilityState,
PaginationState
} from "@tanstack/react-table";
// Extended ColumnDef type that includes optional friendlyName for column visibility dropdown
@@ -227,6 +228,10 @@ export function DataTable<TData, TValue>({
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
initialColumnVisibility
);
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: pageSize
});
const [activeTab, setActiveTab] = useState<string>(
defaultTab || tabs?.[0]?.id || ""
);
@@ -256,6 +261,7 @@ export function DataTable<TData, TValue>({
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
onColumnVisibilityChange: setColumnVisibility,
onPaginationChange: setPagination,
initialState: {
pagination: {
pageSize: pageSize,
@@ -267,21 +273,18 @@ export function DataTable<TData, TValue>({
sorting,
columnFilters,
globalFilter,
columnVisibility
columnVisibility,
pagination
}
});
// Persist pageSize to localStorage when it changes
useEffect(() => {
const currentPageSize = table.getState().pagination.pageSize;
if (currentPageSize !== pageSize) {
table.setPageSize(pageSize);
// Persist to localStorage if enabled
if (persistPageSize) {
setStoredPageSize(pageSize, tableId);
}
if (persistPageSize && pagination.pageSize !== pageSize) {
setStoredPageSize(pagination.pageSize, tableId);
setPageSize(pagination.pageSize);
}
}, [pageSize, table, persistPageSize, tableId]);
}, [pagination.pageSize, persistPageSize, tableId, pageSize]);
useEffect(() => {
// Persist column visibility to localStorage when it changes
@@ -293,13 +296,17 @@ export function DataTable<TData, TValue>({
const handleTabChange = (value: string) => {
setActiveTab(value);
// Reset to first page when changing tabs
table.setPageIndex(0);
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
};
// Enhanced pagination component that updates our local state
const handlePageSizeChange = (newPageSize: number) => {
setPagination((prev) => ({
...prev,
pageSize: newPageSize,
pageIndex: 0
}));
setPageSize(newPageSize);
table.setPageSize(newPageSize);
// Persist immediately when changed
if (persistPageSize) {
@@ -614,6 +621,8 @@ export function DataTable<TData, TValue>({
<DataTablePagination
table={table}
onPageSizeChange={handlePageSizeChange}
pageSize={pagination.pageSize}
pageIndex={pagination.pageIndex}
/>
</div>
</CardContent>

2
src/components/ui/dialog.tsx
View File

@@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef<
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-xl font-semibold leading-none tracking-tight",
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}