src/components/SettingForms/System/SystemConfigFields.tsx

@@ -5,6 +5,8 @@ import { timezones } from "./timezones";
 import SystemFileUpload from "./SystemFileUpload";
 import type { SystemValues, SystemValuesErrors } from "../../../types/types";
 import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig";
+import { ValidateIPaddress } from "../../../utils/utils";
+import { toast } from "sonner";
 
 const SystemConfigFields = () => {
   const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
@@ -35,6 +37,14 @@ const SystemConfigFields = () => {
     if (!values.timeZone) errors.timeZone = "Required";
     if (isNaN(interval) || interval <= 0) errors.sntpInterval = "Cannot be less than 0";
     if (!values.sntpServer) errors.sntpServer = "Required";
+    const invalidPrimary = ValidateIPaddress(values.serverPrimary);
+    const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+
+    if (invalidPrimary || invalidSecondary) {
+      toast.error(invalidPrimary || invalidSecondary, {
+        id: "invalid-ip",
+      });
+    }
     return errors;
   };
 
@@ -52,7 +62,7 @@ const SystemConfigFields = () => {
       onSubmit={handleSubmit}
       validate={validateValues}
       enableReinitialize
-      validateOnChange
+      validateOnChange={false}
       validateOnBlur
     >
       {({ values, errors, touched, isSubmitting }) => (

src/components/SettingForms/WiFi&Modem/ModemCard.tsx

@@ -6,7 +6,6 @@ const ModemCard = () => {
   return (
     <Card className="p-4">
       <CardHeader title={"Modem"} />
-
       <ModemSettings />
     </Card>
   );

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -6,6 +6,8 @@ import { useEffect, useState } from "react";
 import ModemToggle from "./ModemToggle";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ValidateIPaddress } from "../../../utils/utils";
+import { toast, Toaster } from "sonner";
 
 const ModemSettings = () => {
   const [showSettings, setShowSettings] = useState(false);
@@ -16,6 +18,8 @@ const ModemSettings = () => {
   const username = modemQuery?.data?.propUsername.value;
   const password = modemQuery?.data?.propPassword?.value;
   const mode = modemQuery?.data?.propMode?.value;
+  const serverPrimary = modemQuery?.data?.propNameServerPrimary?.value;
+  const serverSecondary = modemQuery?.data?.propNameServerSecondary?.value;
 
   useEffect(() => {
     setShowSettings(mode === "AUTO");
@@ -26,9 +30,19 @@ const ModemSettings = () => {
     username: username ?? "",
     password: password ?? "",
     authenticationType: "PAP",
+    serverPrimary: serverPrimary ?? "",
+    serverSecondary: serverSecondary ?? "",
   };
 
   const handleSubmit = async (values: ModemSettingsType) => {
+    const invalidPrimary = ValidateIPaddress(values.serverPrimary);
+    const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+    if (invalidPrimary || invalidSecondary) {
+      toast.error(invalidPrimary || invalidSecondary, {
+        id: "invalid-ip",
+      });
+      return;
+    }
     const modemConfig = {
       id: "ModemAndWifiManager-modem",
       fields: [
@@ -49,9 +63,24 @@ const ModemSettings = () => {
           property: "propMode",
           value: showSettings ? "AUTO" : "MANUAL",
         },
+        {
+          property: "propNameServerPrimary",
+          value: values.serverPrimary,
+        },
+        {
+          property: "propNameServerSecondary",
+          value: values.serverSecondary,
+        },
       ],
     };
-    await modemMutation.mutateAsync(modemConfig);
+
+    const response = await modemMutation.mutateAsync(modemConfig);
+
+    if (!response?.id) {
+      toast.success("Modem settings updated successfully", {
+        id: "modemSettings",
+      });
+    }
   };
 
   return (
@@ -107,9 +136,33 @@ const ModemSettings = () => {
                     />
                   </div>
                 </FormGroup>
+                <FormGroup>
+                  <label htmlFor="serverPrimary" className="font-medium whitespace-nowrap md:w-2/3">
+                    Name server primary
+                  </label>
+                  <Field
+                    placeholder="Enter Server primary"
+                    name="serverPrimary"
+                    id="serverPrimary"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="serverSecondary" className="font-medium whitespace-nowrap md:w-2/3">
+                    Name server secondary
+                  </label>
+                  <Field
+                    placeholder="Enter Server secondary"
+                    name="serverSecondary"
+                    id="serverSecondary"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
+                  />
+                </FormGroup>
                 <FormGroup>
                   <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                    Password
+                    Authentication Type
                   </label>
                   <Field
                     name="authenticationType"
@@ -132,6 +185,7 @@ const ModemSettings = () => {
           </Form>
         )}
       </Formik>
+      <Toaster />
     </>
   );
 };

src/types/types.ts

@@ -403,6 +403,8 @@ export type ModemSettingsType = {
   username: string;
   password: string;
   authenticationType: string;
+  serverPrimary: string;
+  serverSecondary: string;
 };
 
 export type HitKind = "NPED" | "HOTLIST";

src/utils/utils.ts

@@ -184,3 +184,14 @@ export const reverseZoomMapping = (magnification: string) => {
       break;
   }
 };
+
+export const ValidateIPaddress = (value: string | undefined) => {
+  if (!value) return;
+
+  const regex =
+    /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
+
+  if (!regex.test(value)) {
+    return "Invalid IP address format";
+  }
+};