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,6 +30,8 @@ const ModemSettings = () => {
     username: username ?? "",
     password: password ?? "",
     authenticationType: "PAP",
+    serverPrimary: serverPrimary ?? "",
+    serverSecondary: serverSecondary ?? "",
   };
 
   const handleSubmit = async (values: ModemSettingsType) => {
@@ -49,9 +55,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 +128,35 @@ 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"
+                    validate={ValidateIPaddress}
+                  />
+                </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"
+                    validate={ValidateIPaddress}
+                  />
+                </FormGroup>
                 <FormGroup>
                   <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                    Password
+                    Authentication Type
                   </label>
                   <Field
                     name="authenticationType"
@@ -132,6 +179,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,16 @@ export const reverseZoomMapping = (magnification: string) => {
       break;
   }
 };
+
+export function ValidateIPaddress(ipaddress: string) {
+  if (!ipaddress) {
+    return undefined;
+  } else if (
+    !/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+      ipaddress
+    )
+  ) {
+    return "Invalid IP";
+  }
+  return undefined;
+}