From 10dd410db5ae78aea27bf152a3f509b26dbe94c3 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Tue, 16 Apr 2024 16:13:05 +0200
Subject: [PATCH] Add better validation for routes

---
 src/contexts/RoutesProvider.tsx         |  2 +-
 src/modules/routes/RouteModal.tsx       | 21 ++++++++++++++++++++-
 src/modules/routes/RouteUpdateModal.tsx | 13 +++++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/contexts/RoutesProvider.tsx b/src/contexts/RoutesProvider.tsx
index 7b828a65..60a160f1 100644
--- 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
index e1212936..dc904a2d 100644
--- a/src/modules/routes/RouteModal.tsx
+++ b/src/modules/routes/RouteModal.tsx
@@ -147,6 +147,18 @@ 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 (
@@ -154,7 +166,9 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
       (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
index fc4f0a97..18b86b4c 100644
--- 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={