Add better validation for routes

netbirdio · Apr 16, 2024 · 10dd410 · 10dd410
1 parent 7a82073
commit 10dd410
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/src/contexts/RoutesProvider.tsx b/src/contexts/RoutesProvider.tsx
@@ -25,7 +25,7 @@ const RoutesContext = React.createContext(
 );
 
 export default function RoutesProvider({ children }: Props) {
-  const routeRequest = useApiCall<Route>("/routes");
+  const routeRequest = useApiCall<Route>("/routes", true);
   const { mutate } = useSWRConfig();
 
   const updateRoute = async (

diff --git a/src/modules/routes/RouteModal.tsx b/src/modules/routes/RouteModal.tsx
@@ -147,14 +147,28 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
     );
   };
 
+  const networkIdentifierError = useMemo(() => {
+    return (networkIdentifier?.length || 0) > 40
+      ? "Network Identifier must be less than 40 characters"
+      : "";
+  }, [networkIdentifier]);
+
+  const metricError = useMemo(() => {
+    return parseInt(metric) < 1 || parseInt(metric) > 9999
+      ? "Metric must be between 1 and 9999"
+      : "";
+  }, [metric]);
+
   // Is button disabled
   const isDisabled = useMemo(() => {
     return (
       networkIdentifier == "" ||
       (cidrError && cidrError.length > 1) ||
       (peerTab === "peer-group" && routingPeerGroups.length == 0) ||
       (peerTab === "routing-peer" && !routingPeer) ||
-      groups.length == 0
+      groups.length == 0 ||
+      networkIdentifierError !== "" ||
+      metricError !== ""
     );
   }, [
     networkIdentifier,
@@ -163,6 +177,8 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
     routingPeerGroups.length,
     routingPeer,
     groups,
+    networkIdentifierError,
+    metricError,
   ]);
 
   const [tab, setTab] = useState("network");
@@ -220,6 +236,7 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
                 Add a unique network identifier that is assigned to each device.
               </HelpText>
               <Input
+                error={networkIdentifierError}
                 autoFocus={true}
                 tabIndex={0}
                 ref={nameRef}
@@ -346,6 +363,8 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
                 max={9999}
                 maxWidthClass={"max-w-[200px]"}
                 value={metric}
+                error={metricError}
+                errorTooltip={true}
                 type={"number"}
                 onChange={(e) => setMetric(e.target.value)}
                 customPrefix={

diff --git a/src/modules/routes/RouteUpdateModal.tsx b/src/modules/routes/RouteUpdateModal.tsx
@@ -197,14 +197,21 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
       .filter((p) => p != undefined) as string[];
   }, [groupedRoute]);
 
+  const metricError = useMemo(() => {
+    return parseInt(metric.toString()) < 1 || parseInt(metric.toString()) > 9999
+      ? "Metric must be between 1 and 9999"
+      : "";
+  }, [metric]);
+
   // Is button disabled
   const isDisabled = useMemo(() => {
     return (
       (peerTab === "peer-group" && routingPeerGroups.length == 0) ||
       (peerTab === "routing-peer" && !routingPeer) ||
-      groups.length == 0
+      groups.length == 0 ||
+      metricError !== ""
     );
-  }, [peerTab, routingPeerGroups.length, routingPeer, groups]);
+  }, [peerTab, routingPeerGroups.length, routingPeer, groups, metricError]);
 
   const [tab, setTab] = useState(
     cell && cell == "metric" ? "settings" : "network",
@@ -352,6 +359,8 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
                 max={9999}
                 maxWidthClass={"max-w-[200px]"}
                 value={metric}
+                error={metricError}
+                errorTooltip={true}
                 type={"number"}
                 onChange={(e) => setMetric(e.target.value)}
                 customPrefix={