Fix dns zone domain validation and peers last seen sort (#595)

* Add reverse proxy access rules

* Fix coderabbit comments

* Fix coderabbit comments

* Fix coderabbit comments

* Add auth header modal

* Remove password managers from auth headers

* fix unique id

* Remove gradient, fix button roundness

* update lucide, add additional event auth methods

* Clear existing header value on change

package-lock.json

@@ -59,7 +59,7 @@
         "ip-cidr": "^3.1.0",
         "js-cookie": "^3.0.5",
         "lodash": "^4.17.23",
-        "lucide-react": "^0.562.0",
+        "lucide-react": "^0.566.0",
         "next": "^16.1.7",
         "next-themes": "^0.2.1",
         "punycode": "^2.3.1",
@@ -6923,9 +6923,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.562.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
-      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "version": "0.566.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.566.0.tgz",
+      "integrity": "sha512-b18qC/JAh1X9rVKlF5EtSIyumdIYuh78b0JShynZnHbcaWR4AW4oZyi8Ms/aQYVSnLPlAnMhug2hSr19BgVZAw==",
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package.json

@@ -67,7 +67,7 @@
     "ip-cidr": "^3.1.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.23",
-    "lucide-react": "^0.562.0",
+    "lucide-react": "^0.566.0",
     "next": "^16.1.7",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",

src/components/Button.tsx

@@ -74,7 +74,7 @@ export const buttonVariants = cva(
           "",
         ],
         "danger-text": [
-          "dark:bg-transparent dark:text-red-500 dark:hover:text-red-600 dark:border-transparent !px-0 !shadow-none !py-0 focus:ring-red-500/30 dark:ring-offset-neutral-950/50",
+          "dark:bg-transparent dark:text-red-500 dark:hover:text-red-600 dark:border-transparent !px-0 !shadow-none !py-0 focus:ring-red-500/30 dark:ring-offset-neutral-950/50 rounded-sm",
         ],
         "default-outline": [
           "dark:ring-offset-nb-gray-950/50 dark:focus:ring-nb-gray-500/20",

src/components/Select.tsx

@@ -98,7 +98,7 @@ const SelectItem = React.forwardRef<
             <Check className="h-4 w-4" />
           </SelectPrimitive.ItemIndicator>
         </span>
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
           <span className="flex-shrink-0">{icon}</span>
           <div className="flex flex-col">
             <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

src/components/select/SelectDropdown.tsx

@@ -48,6 +48,9 @@ interface SelectDropdownProps {
   children?: React.ReactNode;
   maxHeight?: number;
   triggerClassName?: string;
+  iconSize?: number;
+  truncate?: boolean;
+  compact?: boolean;
 }
 
 export function SelectDropdown({
@@ -68,6 +71,9 @@ export function SelectDropdown({
   children,
   maxHeight,
   triggerClassName,
+  iconSize = 14,
+  truncate = false,
+  compact = false,
 }: Readonly<SelectDropdownProps>) {
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
 
@@ -107,15 +113,18 @@ export function SelectDropdown({
 
   const SelectedItem = () => {
     return (
-      <div className={"flex items-center gap-2.5"}>
-        {selected?.icon && <selected.icon size={14} width={14} />}
+      <div className={cn("flex items-center gap-2.5", truncate && "min-w-0")}>
+        {selected?.icon && <selected.icon size={iconSize} width={iconSize} />}
         <div
           className={cn(
             "flex flex-col text-sm font-medium",
             size === "xs" && "text-xs",
+            truncate && "min-w-0",
           )}
         >
-          <span className={"text-nb-gray-200"}>{selected?.label}</span>
+          <span className={cn("text-nb-gray-200", truncate && "truncate")}>
+            {selected?.label}
+          </span>
         </div>
       </div>
     );
@@ -216,20 +225,22 @@ export function SelectDropdown({
 
             <ScrollArea
               className={cn(
-                "overflow-y-auto flex flex-col gap-1 pl-2 pr-3",
-                !showSearch && "pt-2",
+                "overflow-y-auto flex flex-col gap-1",
+                compact ? "pl-1 pr-1" : "pl-2 pr-3",
+                !showSearch && (compact ? "pt-1" : "pt-2"),
               )}
               style={{
                 maxHeight: maxHeight ?? 380,
               }}
             >
               <CommandGroup>
-                <div className={"grid grid-cols-1 gap-1 pb-2 w-full"}>
+                <div className={cn("grid grid-cols-1 gap-1 w-full", compact ? "pb-1" : "pb-2")}>
                   {filteredItems.map((option) => (
                     <SelectDropdownItem
                       option={option}
                       toggle={toggle}
                       key={option.value}
+                      iconSize={iconSize}
                       showValue={showValues}
                       size={size}
                     />
@@ -249,11 +260,13 @@ const SelectDropdownItem = ({
   toggle,
   showValue = false,
   size = "sm",
+  iconSize = 14,
 }: {
   option: SelectOption;
   toggle: (value: string) => void;
   showValue?: boolean;
   size: "xs" | "sm";
+  iconSize?: number;
 }) => {
   const value = option.value || "" + option.label || "";
   const elementRef = useRef<HTMLDivElement>(null);
@@ -285,7 +298,12 @@ const SelectDropdownItem = ({
               option?.disabled && "cursor-not-allowed",
             )}
           >
-            {option.icon && <option.icon size={14} width={14} />}
+            {option.icon && (
+              <div className={"shrink-0"}>
+                <option.icon size={iconSize} width={iconSize} />
+              </div>
+            )}
+
             {option?.renderItem && option.renderItem()}
             {!option?.renderItem && (
               <div

src/components/table/DataTable.tsx

@@ -53,6 +53,7 @@ declare module "@tanstack/table-core" {
   }
   interface SortingFns {
     checkbox: SortingFn<unknown>;
+    datetime: SortingFn<unknown>;
   }
 }
 
@@ -99,6 +100,15 @@ const arrIncludesSomeExact: FilterFn<any> = (
   return value.some((val) => val === rowValue);
 };
 
+const datetimeSort: SortingFn<any> = (rowA, rowB, columnId) => {
+  const aConnected = rowA.original?.connected;
+  const bConnected = rowB.original?.connected;
+  if (aConnected !== bConnected) return aConnected ? 1 : -1;
+  const a = dayjs(rowA.getValue(columnId)).valueOf();
+  const b = dayjs(rowB.getValue(columnId)).valueOf();
+  return a - b;
+};
+
 const checkboxSort: SortingFn<any> = (rowA, rowB, columnId) => {
   const valueA =
     columnId === "select" ? rowA.getIsSelected() : rowA.getValue(columnId);
@@ -324,6 +334,7 @@ export function DataTable<TData, TValue>({
     },
     sortingFns: {
       checkbox: checkboxSort,
+      datetime: datetimeSort,
     },
     getRowId: useRowId ? (row) => row.id : undefined,
     onRowSelectionChange: setRowSelection,

src/components/table/DataTableHeader.tsx

@@ -14,6 +14,7 @@ type Props = {
   center?: boolean;
   className?: string;
   sorting?: boolean;
+  onSort?: () => void;
   name?: string;
 };
 export default function DataTableHeader({
@@ -23,14 +24,20 @@ export default function DataTableHeader({
   center,
   className,
   sorting = true,
+  onSort,
   name,
 }: Props) {
   const serverPagination = useOptionalServerPagination();
 
   const handleSort = () => {
-    const direction = column.getIsSorted() === "asc" ? "desc" : "asc";
-    column.toggleSorting(direction === "desc");
+    if (onSort) {
+      onSort();
+    } else {
+      const direction = column.getIsSorted() === "asc" ? "desc" : "asc";
+      column.toggleSorting(direction === "desc");
+    }
     if (name && serverPagination?.setSort) {
+      const direction = column.getIsSorted() === "asc" ? "desc" : "asc";
       serverPagination.setSort(name, direction);
     }
   };

src/components/ui/CountrySelector.tsx

@@ -9,8 +9,11 @@ import { useCountries } from "@/contexts/CountryProvider";
 type Props = {
   value: string;
   onChange: (value: string) => void;
+  iconSize?: number;
+  popoverWidth?: "auto" | "content" | number;
+  truncate?: boolean;
 };
-export const CountrySelector = ({ value, onChange }: Props) => {
+export const CountrySelector = ({ value, onChange, iconSize = 20, popoverWidth, truncate }: Props) => {
   const { countries, isLoading } = useCountries();
 
   const countryList = useMemo(() => {
@@ -22,7 +25,7 @@ export const CountrySelector = ({ value, onChange }: Props) => {
       }) =>
         createElement(RoundedFlag, {
           country: country.country_code,
-          size: 20,
+          size: iconSize,
           ...props,
         });
       return {
@@ -42,7 +45,10 @@ export const CountrySelector = ({ value, onChange }: Props) => {
         searchPlaceholder={"Search country..."}
         value={value}
         onChange={onChange}
+        iconSize={iconSize}
         options={countryList || []}
+        popoverWidth={popoverWidth}
+        truncate={truncate}
       />
     </div>
   );

src/contexts/CountryProvider.tsx

@@ -13,7 +13,11 @@ const CountryContext = React.createContext(
     countries: Country[] | undefined;
     isLoading: boolean;
     getRegionByPeer: (peer: Peer) => string;
-    getRegionText: (country_code: string, city_name: string, subdivision_code?: string) => string;
+    getRegionText: (
+      country_code: string,
+      city_name: string,
+      subdivision_code?: string,
+    ) => string;
   },
 );
 
@@ -21,7 +25,11 @@ export default function CountryProvider({ children }: Props) {
   const { isRestricted } = usePermissions();
 
   const getRegionByPeer = (peer: Peer) => "Unknown";
-  const getRegionText = (country_code: string, city_name: string, _subdivision_code?: string) => "Unknown";
+  const getRegionText = (
+    country_code: string,
+    city_name: string,
+    subdivision_code?: string,
+  ) => "Unknown";
 
   return isRestricted ? (
     <CountryContext.Provider

src/interfaces/ReverseProxy.ts

@@ -22,6 +22,13 @@ export interface ReverseProxy {
   meta?: ReverseProxyMeta;
 }
 
+export interface AccessRestrictions {
+  allowed_cidrs?: string[];
+  blocked_cidrs?: string[];
+  allowed_countries?: string[];
+  blocked_countries?: string[];
+}
+
 export interface ReverseProxyMeta {
   created_at: string;
   status: ReverseProxyStatus;
@@ -87,13 +94,6 @@ export interface HeaderAuthConfig {
   value: string;
 }
 
-export interface AccessRestrictions {
-  allowed_cidrs?: string[];
-  blocked_cidrs?: string[];
-  allowed_countries?: string[];
-  blocked_countries?: string[];
-}
-
 export interface ReverseProxyDomain {
   id: string;
   domain: string;
@@ -101,6 +101,7 @@ export interface ReverseProxyDomain {
   type: ReverseProxyDomainType;
   target_cluster?: string;
   supports_custom_ports?: boolean;
+  require_subdomain?: boolean;
 }
 
 export enum ReverseProxyDomainType {
@@ -197,5 +198,8 @@ export const REVERSE_PROXY_DOMAIN_VERIFICATION_LINK =
 export const REVERSE_PROXY_EVENTS_DOCS_LINK =
   "https://docs.netbird.io/manage/reverse-proxy/access-logs";
 
+export const REVERSE_PROXY_ACCESS_CONTROL_DOCS_LINK =
+  "https://docs.netbird.io/manage/reverse-proxy";
+
 export const REVERSE_PROXY_TROUBLESHOOTING_DOCS_LINK =
   "https://docs.netbird.io/manage/reverse-proxy#troubleshooting";

src/modules/dns/zones/DNSZoneModal.tsx

@@ -91,10 +91,11 @@ export function DNSZoneModalContent({
     if (domain == "") return "";
     const valid = validator.isValidDomain(domain, {
       allowWildcard: false,
-      allowOnlyTld: false,
+      allowOnlyTld: true,
+      preventLeadingAndTrailingDots: true,
     });
     if (!valid) {
-      return "Please enter a valid domain, e.g. company.internal or intra.example.com";
+      return "Please enter a valid domain, e.g. internal, company.internal or intra.example.com";
     }
   }, [domain]);
 

src/modules/peers/PeersTable.tsx

@@ -138,8 +138,18 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
   },
   {
     accessorKey: "last_seen",
-    header: ({ column }) => {
-      return <DataTableHeader column={column}>Last seen</DataTableHeader>;
+    header: ({ column, table }) => {
+      return (
+        <DataTableHeader
+          column={column}
+          onSort={() => {
+            const desc = column.getIsSorted() === "desc";
+            table.setSorting([{ id: "last_seen", desc: !desc }]);
+          }}
+        >
+          Last seen
+        </DataTableHeader>
+      );
     },
     sortingFn: "datetime",
     cell: ({ row }) => <PeerLastSeenCell peer={row.original} />,
@@ -226,17 +236,13 @@ export default function PeersTable({
     "netbird-table-sort" + path,
     [
       {
-        id: "connected",
+        id: "last_seen",
         desc: true,
       },
       {
         id: "name",
         desc: false,
       },
-      {
-        id: "last_seen",
-        desc: true,
-      },
     ],
   );
 

src/modules/reverse-proxy/AccessRestrictionsSection.tsx

@@ -1,227 +0,0 @@
-import Button from "@components/Button";
-import HelpText from "@components/HelpText";
-import { Label } from "@components/Label";
-import { CountrySelector } from "@components/ui/CountrySelector";
-import { cn } from "@utils/helpers";
-import cidr from "ip-cidr";
-import { Globe, MinusCircleIcon, PlusCircle, ShieldCheck } from "lucide-react";
-import React, { useState } from "react";
-import { AccessRestrictions } from "@/interfaces/ReverseProxy";
-
-let nextRowId = 0;
-
-type Props = {
-  value: AccessRestrictions;
-  onChange: (value: AccessRestrictions) => void;
-};
-
-type CidrRow = { id: number; value: string };
-
-type RowListProps = {
-  values: string[];
-  onChange: (values: string[]) => void;
-};
-
-function CidrList({ values, onChange }: Readonly<RowListProps>) {
-  const [rows, setRows] = useState<CidrRow[]>(() =>
-    values.map((v) => ({ id: nextRowId++, value: v })),
-  );
-  const [errors, setErrors] = useState<Record<number, string>>({});
-
-  const addRow = () => {
-    const next = [...rows, { id: nextRowId++, value: "" }];
-    setRows(next);
-    onChange(next.map((r) => r.value));
-  };
-
-  const updateRow = (id: number, raw: string) => {
-    const next = rows.map((r) => (r.id === id ? { ...r, value: raw } : r));
-    setRows(next);
-    onChange(next.map((r) => r.value));
-
-    if (raw && !cidr.isValidCIDR(raw)) {
-      setErrors((prev) => ({ ...prev, [id]: "Invalid CIDR format" }));
-    } else {
-      setErrors((prev) => {
-        const copy = { ...prev };
-        delete copy[id];
-        return copy;
-      });
-    }
-  };
-
-  const removeRow = (id: number) => {
-    const next = rows.filter((r) => r.id !== id);
-    setRows(next);
-    onChange(next.map((r) => r.value));
-    setErrors((prev) => {
-      const copy = { ...prev };
-      delete copy[id];
-      return copy;
-    });
-  };
-
-  return (
-    <div className="flex flex-col gap-2">
-      {rows.map((row) => (
-        <div key={row.id}>
-          <div className="flex gap-2">
-            <input
-              type="text"
-              value={row.value}
-              onChange={(e) => updateRow(row.id, e.target.value.trim())}
-              placeholder="e.g. 10.0.0.0/8"
-              className={cn(
-                "flex-1 h-[42px] px-3 text-sm font-mono bg-nb-gray-900/40 rounded-md outline-none",
-                "border placeholder:text-neutral-400/70",
-                errors[row.id]
-                  ? "border-red-400"
-                  : "border-nb-gray-700",
-              )}
-            />
-            <Button
-              className="h-[42px]"
-              variant="default-outline"
-              onClick={() => removeRow(row.id)}
-            >
-              <MinusCircleIcon size={15} />
-            </Button>
-          </div>
-          {errors[row.id] && (
-            <p className="text-xs text-red-400 mt-1">{errors[row.id]}</p>
-          )}
-        </div>
-      ))}
-      <Button variant="dotted" size="sm" onClick={addRow}>
-        <PlusCircle size={16} />
-        Add CIDR
-      </Button>
-    </div>
-  );
-}
-
-type CountryRow = { id: number; value: string };
-
-function CountryList({ values, onChange }: Readonly<RowListProps>) {
-  const [rows, setRows] = useState<CountryRow[]>(() =>
-    values.map((v) => ({ id: nextRowId++, value: v })),
-  );
-
-  const addCountry = () => {
-    const next = [...rows, { id: nextRowId++, value: "" }];
-    setRows(next);
-    onChange(next.map((r) => r.value));
-  };
-
-  const updateCountry = (id: number, code: string) => {
-    if (rows.some((r) => r.value === code)) return;
-    const next = rows.map((r) => (r.id === id ? { ...r, value: code } : r));
-    setRows(next);
-    onChange(next.map((r) => r.value));
-  };
-
-  const removeCountry = (id: number) => {
-    const next = rows.filter((r) => r.id !== id);
-    setRows(next);
-    onChange(next.map((r) => r.value));
-  };
-
-  return (
-    <div className="flex flex-col gap-2">
-      {rows.map((row) => (
-        <div key={row.id} className="flex gap-2">
-          <div className="flex-1">
-            <CountrySelector
-              value={row.value}
-              onChange={(v) => updateCountry(row.id, v)}
-            />
-          </div>
-          <Button
-            className="h-[42px]"
-            variant="default-outline"
-            onClick={() => removeCountry(row.id)}
-          >
-            <MinusCircleIcon size={15} />
-          </Button>
-        </div>
-      ))}
-      <Button variant="dotted" size="sm" onClick={addCountry}>
-        <PlusCircle size={16} />
-        Add Country
-      </Button>
-    </div>
-  );
-}
-
-export default function AccessRestrictionsSection({
-  value,
-  onChange,
-}: Readonly<Props>) {
-  const update = (patch: Partial<AccessRestrictions>) => {
-    onChange({ ...value, ...patch });
-  };
-
-  return (
-    <div className="px-8 flex-col flex gap-6">
-      <div>
-        <Label>
-          <ShieldCheck size={14} />
-          CIDR Allowlist
-        </Label>
-        <HelpText>
-          Only connections from these IP ranges will be allowed. All other
-          IPs will be blocked. Leave empty to allow all.
-        </HelpText>
-        <CidrList
-          values={value.allowed_cidrs ?? []}
-          onChange={(v) => update({ allowed_cidrs: v })}
-        />
-      </div>
-
-      <div>
-        <Label>
-          <ShieldCheck size={14} />
-          CIDR Blocklist
-        </Label>
-        <HelpText>
-          Block connections from these IP ranges. Takes priority over the
-          allowlist.
-        </HelpText>
-        <CidrList
-          values={value.blocked_cidrs ?? []}
-          onChange={(v) => update({ blocked_cidrs: v })}
-        />
-      </div>
-
-      <div>
-        <Label>
-          <Globe size={14} />
-          Country Allowlist
-        </Label>
-        <HelpText>
-          Only connections from these countries will be allowed. All other
-          countries will be blocked. Leave empty to allow all.
-        </HelpText>
-        <CountryList
-          values={value.allowed_countries ?? []}
-          onChange={(v) => update({ allowed_countries: v })}
-        />
-      </div>
-
-      <div>
-        <Label>
-          <Globe size={14} />
-          Country Blocklist
-        </Label>
-        <HelpText>
-          Block connections from these countries. Takes priority over the
-          allowlist.
-        </HelpText>
-        <CountryList
-          values={value.blocked_countries ?? []}
-          onChange={(v) => update({ blocked_countries: v })}
-        />
-      </div>
-    </div>
-  );
-}

src/modules/reverse-proxy/ReverseProxyAccessControlRules.tsx

@@ -0,0 +1,315 @@
+import { useEffect, useMemo, useReducer, useRef } from "react";
+import { Label } from "@components/Label";
+import HelpText from "@components/HelpText";
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import cidr from "ip-cidr";
+import {
+  FlagIcon,
+  MinusCircleIcon,
+  NetworkIcon,
+  PlusIcon,
+  ShieldCheckIcon,
+  ShieldXIcon,
+  WorkflowIcon,
+} from "lucide-react";
+import {
+  SelectDropdown,
+  SelectOption,
+} from "@components/select/SelectDropdown";
+import { CountrySelector } from "@/components/ui/CountrySelector";
+import { AccessRestrictions } from "@/interfaces/ReverseProxy";
+
+type AccessAction = "allow" | "block";
+type AccessRuleType = "country" | "ip" | "cidr";
+
+const ACTION_OPTIONS: SelectOption[] = [
+  {
+    label: "Allow Only",
+    value: "allow",
+    icon: (props) => <ShieldCheckIcon {...props} className="text-green-500" />,
+  },
+  {
+    label: "Block Only",
+    value: "block",
+    icon: (props) => <ShieldXIcon {...props} className="text-red-500" />,
+  },
+];
+
+const TYPE_OPTIONS: SelectOption[] = [
+  {
+    label: "Country",
+    value: "country",
+    icon: (props) => <FlagIcon {...props} />,
+  },
+  {
+    label: "IP Address",
+    value: "ip",
+    icon: (props) => <WorkflowIcon {...props} />,
+  },
+  {
+    label: "CIDR Block",
+    value: "cidr",
+    icon: (props) => <NetworkIcon {...props} />,
+  },
+];
+
+type AccessRule = {
+  id: string;
+  action: AccessAction;
+  type: AccessRuleType;
+  value: string;
+};
+
+type RulesAction =
+  | { type: "add" }
+  | { type: "remove"; id: string }
+  | {
+      type: "update";
+      id: string;
+      field: "action" | "type" | "value";
+      value: string;
+    };
+
+const nextId = () => crypto.randomUUID();
+
+function rulesReducer(state: AccessRule[], action: RulesAction): AccessRule[] {
+  switch (action.type) {
+    case "add":
+      return [
+        ...state,
+        { id: nextId(), action: "allow", type: "country", value: "" },
+      ];
+    case "remove":
+      return state.filter((r) => r.id !== action.id);
+    case "update":
+      return state.map((r) => {
+        if (r.id !== action.id) return r;
+        if (action.field === "type") {
+          return { ...r, type: action.value as AccessRuleType, value: "" };
+        }
+        return { ...r, [action.field]: action.value };
+      });
+  }
+}
+
+function restrictionsToRules(
+  restrictions: AccessRestrictions | undefined,
+): AccessRule[] {
+  if (!restrictions) return [];
+  const rules: AccessRule[] = [];
+  restrictions.allowed_countries?.forEach((v) =>
+    rules.push({ id: nextId(), action: "allow", type: "country", value: v }),
+  );
+  restrictions.blocked_countries?.forEach((v) =>
+    rules.push({ id: nextId(), action: "block", type: "country", value: v }),
+  );
+  restrictions.allowed_cidrs?.forEach((v) => {
+    const isIp = v.endsWith("/32");
+    rules.push({ id: nextId(), action: "allow", type: isIp ? "ip" : "cidr", value: isIp ? v.replace(/\/32$/, "") : v });
+  });
+  restrictions.blocked_cidrs?.forEach((v) => {
+    const isIp = v.endsWith("/32");
+    rules.push({ id: nextId(), action: "block", type: isIp ? "ip" : "cidr", value: isIp ? v.replace(/\/32$/, "") : v });
+  });
+  return rules;
+}
+
+function rulesToRestrictions(
+  rules: AccessRule[],
+): AccessRestrictions | undefined {
+  const allowed_countries: string[] = [];
+  const blocked_countries: string[] = [];
+  const allowed_cidrs: string[] = [];
+  const blocked_cidrs: string[] = [];
+
+  for (const rule of rules) {
+    if (!rule.value) continue;
+    if (rule.type === "country") {
+      if (rule.action === "allow") allowed_countries.push(rule.value);
+      else blocked_countries.push(rule.value);
+    } else {
+      const value = rule.type === "ip" && !rule.value.includes("/") ? `${rule.value}/32` : rule.value;
+      if (rule.action === "allow") allowed_cidrs.push(value);
+      else blocked_cidrs.push(value);
+    }
+  }
+
+  const hasAny =
+    allowed_countries.length > 0 ||
+    blocked_countries.length > 0 ||
+    allowed_cidrs.length > 0 ||
+    blocked_cidrs.length > 0;
+
+  if (!hasAny) return undefined;
+
+  return {
+    ...(allowed_countries.length > 0 && { allowed_countries }),
+    ...(blocked_countries.length > 0 && { blocked_countries }),
+    ...(allowed_cidrs.length > 0 && { allowed_cidrs }),
+    ...(blocked_cidrs.length > 0 && { blocked_cidrs }),
+  };
+}
+
+type Props = {
+  value: AccessRestrictions | undefined;
+  onChange: (value: AccessRestrictions | undefined) => void;
+  onValidationChange?: (hasErrors: boolean) => void;
+};
+
+function validateRule(rule: AccessRule): string {
+  if (rule.type === "country" || !rule.value) return "";
+  if (rule.type === "ip") {
+    const val = rule.value.includes("/") ? rule.value : `${rule.value}/32`;
+    if (!cidr.isValidAddress(val)) {
+      return "Please enter a valid IP address, e.g., 85.203.15.42";
+    }
+  } else {
+    if (!rule.value.includes("/") || !cidr.isValidAddress(rule.value)) {
+      return "Please enter a valid CIDR block, e.g., 74.125.0.0/16";
+    }
+  }
+  return "";
+}
+
+export const ReverseProxyAccessControlRules = ({ value, onChange, onValidationChange }: Props) => {
+  const [rules, dispatch] = useReducer(
+    rulesReducer,
+    value,
+    restrictionsToRules,
+  );
+
+  const errors = useMemo(
+    () => Object.fromEntries(rules.map((r) => [r.id, validateRule(r)])),
+    [rules],
+  );
+
+  const hasErrors = useMemo(
+    () => Object.values(errors).some((e) => e !== ""),
+    [errors],
+  );
+
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const onValidationChangeRef = useRef(onValidationChange);
+  onValidationChangeRef.current = onValidationChange;
+
+  useEffect(() => {
+    onChangeRef.current(rulesToRestrictions(rules));
+  }, [rules]);
+
+  useEffect(() => {
+    onValidationChangeRef.current?.(hasErrors);
+  }, [hasErrors]);
+
+  return (
+    <div className={"flex-col flex"}>
+      <div>
+        <Label>Access Control Rules</Label>
+        <HelpText>
+          Define rules to allow or block traffic based on country, IP address,
+          or CIDR block.
+          <br />
+          Block rules always take priority over allow rules.
+        </HelpText>
+      </div>
+      {rules.length > 0 && (
+        <div className="flex flex-col gap-3 mt-1 mb-4">
+          {rules.map((rule) => (
+            <div key={rule.id} className="flex items-center">
+              <div className="w-[160px] shrink-0 [&_button]:rounded-r-none [&_button]:w-[160px]">
+                <SelectDropdown
+                  value={rule.action}
+                  onChange={(v) =>
+                    dispatch({
+                      type: "update",
+                      id: rule.id,
+                      field: "action",
+                      value: v,
+                    })
+                  }
+                  options={ACTION_OPTIONS}
+                  compact
+                />
+              </div>
+
+              <div className="w-[160px] shrink-0 -ml-px [&_button]:rounded-none [&_button]:w-[160px]">
+                <SelectDropdown
+                  value={rule.type}
+                  onChange={(v) =>
+                    dispatch({
+                      type: "update",
+                      id: rule.id,
+                      field: "type",
+                      value: v,
+                    })
+                  }
+                  options={TYPE_OPTIONS}
+                  compact
+                />
+              </div>
+
+              <div className="flex-1 min-w-0 -ml-px [&_button]:rounded-l-none [&_input]:rounded-l-none">
+                {rule.type === "country" ? (
+                  <CountrySelector
+                    iconSize={16}
+                    popoverWidth={350}
+                    truncate
+                    value={rule.value}
+                    onChange={(v) =>
+                      dispatch({
+                        type: "update",
+                        id: rule.id,
+                        field: "value",
+                        value: v,
+                      })
+                    }
+                  />
+                ) : (
+                  <Input
+                    placeholder={
+                      rule.type === "ip"
+                        ? "e.g., 85.203.15.42"
+                        : "e.g., 74.125.0.0/16"
+                    }
+                    value={rule.value}
+                    onChange={(e) =>
+                      dispatch({
+                        type: "update",
+                        id: rule.id,
+                        field: "value",
+                        value: e.target.value,
+                      })
+                    }
+                    error={errors[rule.id]}
+                    errorTooltip={true}
+                    maxWidthClass="w-full"
+                  />
+                )}
+              </div>
+
+              <Button
+                variant="default-outline"
+                className="h-[42px] w-[42px] !px-0 shrink-0 ml-2"
+                onClick={() => dispatch({ type: "remove", id: rule.id })}
+                aria-label="Remove rule"
+              >
+                <MinusCircleIcon size={14} />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+      <Button
+        variant="dotted"
+        className="w-full"
+        size="sm"
+        onClick={() => dispatch({ type: "add" })}
+      >
+        <PlusIcon size={14} />
+        Add Rule
+      </Button>
+    </div>
+  );
+};

src/modules/reverse-proxy/domain/ReverseProxyDomainInput.tsx

@@ -13,6 +13,7 @@ type Props = {
   baseDomain: string;
   onBaseDomainChange: (value: string) => void;
   domainAlreadyExists: boolean;
+  subdomainRequired?: boolean;
   clusterOffline?: {
     clusterName: string;
   };
@@ -24,13 +25,16 @@ export default function ReverseProxyDomainInput({
   baseDomain,
   onBaseDomainChange,
   domainAlreadyExists,
+  subdomainRequired = false,
   clusterOffline,
 }: Readonly<Props>) {
   return (
     <div>
       <Label>Domain</Label>
       <HelpText>
-        Enter a subdomain and select a domain for your service.
+        {subdomainRequired
+          ? "Enter a subdomain and select a domain for your service."
+          : "Optionally enter a subdomain, or use the domain directly."}
       </HelpText>
       <div className="flex items-start mt-2">
         <div className="flex-1 min-w-0">
@@ -47,7 +51,7 @@ export default function ReverseProxyDomainInput({
                 ? "This domain is already used by another service."
                 : undefined
             }
-            placeholder={"myapp"}
+            placeholder={subdomainRequired ? "myapp" : "myapp (optional)"}
             className="!rounded-r-none !border-r-0"
           />
         </div>

src/modules/reverse-proxy/domain/useReverseProxyDomain.ts

@@ -23,6 +23,13 @@ function parseDomain(
       .filter((d) => d.domain)
       .sort((a, b) => b.domain.length - a.domain.length);
     for (const d of sorted) {
+      if (fullDomain === d.domain) {
+        return {
+          subdomain: "",
+          baseDomain: d.domain,
+          isCustom: d.type === ReverseProxyDomainType.CUSTOM,
+        };
+      }
       if (fullDomain.endsWith(`.${d.domain}`)) {
         return {
           subdomain: fullDomain.slice(0, -(d.domain.length + 1)),
@@ -103,7 +110,11 @@ export function useReverseProxyDomain({
     return customDomain?.domain || freeDomain?.domain || "";
   });
 
-  const fullDomain = baseDomain ? `${subdomain}.${baseDomain}` : subdomain;
+  const fullDomain = baseDomain
+    ? subdomain
+      ? `${subdomain}.${baseDomain}`
+      : baseDomain
+    : subdomain;
 
   const domainAlreadyExists = useMemo(() => {
     if (!reverseProxies || !fullDomain) return false;

src/modules/reverse-proxy/events/ReverseProxyEventsAuthMethodCell.tsx

@@ -1,5 +1,14 @@
 import Badge from "@components/Badge";
-import { Binary, Globe, KeyRound, Mail, Network, RectangleEllipsis, ShieldOff, Users } from "lucide-react";
+import {
+  Binary,
+  FileCode2Icon,
+  Flag,
+  GlobeOff,
+  Mail,
+  Network,
+  RectangleEllipsis,
+  Users,
+} from "lucide-react";
 import * as React from "react";
 import { ReverseProxyEvent } from "@/interfaces/ReverseProxy";
 
@@ -35,8 +44,8 @@ export const ReverseProxyEventsAuthMethodCell = ({ event }: Props) => {
         };
       case "header":
         return {
-          icon: <KeyRound size={12} />,
-          label: "Header Auth",
+          icon: <FileCode2Icon size={12} />,
+          label: "HTTP Headers",
         };
       case "link":
       case "magic_link":
@@ -52,12 +61,12 @@ export const ReverseProxyEventsAuthMethodCell = ({ event }: Props) => {
         };
       case "country_restricted":
         return {
-          icon: <Globe size={12} />,
+          icon: <Flag size={12} />,
           label: "Country Restricted",
         };
       case "geo_unavailable":
         return {
-          icon: <ShieldOff size={12} />,
+          icon: <GlobeOff size={12} />,
           label: "Geo Unavailable",
         };
       default:

src/modules/reverse-proxy/events/ReverseProxyEventsLocationIpCell.tsx

@@ -19,8 +19,17 @@ export const ReverseProxyEventsLocationIpCell = ({ event }: Props) => {
   const { getRegionText, isLoading } = useCountries();
 
   const region = useMemo(() => {
-    return getRegionText(event.country_code || "", event.city_name || "", event.subdivision_code);
-  }, [getRegionText, event.country_code, event.city_name, event.subdivision_code]);
+    return getRegionText(
+      event.country_code || "",
+      event.city_name || "",
+      event.subdivision_code,
+    );
+  }, [
+    getRegionText,
+    event.country_code,
+    event.city_name,
+    event.subdivision_code,
+  ]);
 
   return (
     <FullTooltip