diff --git a/src/components/SettingForms/System/SystemConfigFields.tsx b/src/components/SettingForms/System/SystemConfigFields.tsx
index 7d8951f..b830dd2 100644
--- a/src/components/SettingForms/System/SystemConfigFields.tsx
+++ b/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 }) => (
diff --git a/src/components/SettingForms/WiFi&Modem/ModemCard.tsx b/src/components/SettingForms/WiFi&Modem/ModemCard.tsx
index dcc2dfc..46cbb16 100644
--- a/src/components/SettingForms/WiFi&Modem/ModemCard.tsx
+++ b/src/components/SettingForms/WiFi&Modem/ModemCard.tsx
@@ -6,7 +6,6 @@ const ModemCard = () => {
return (
-
);
diff --git a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
index 56cc831..a381f2b 100644
--- a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
+++ b/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 = () => {
/>
+
+
+
+
+
+
+
+
{
)}
+
>
);
};
diff --git a/src/types/types.ts b/src/types/types.ts
index fbf4f0e..9d5cfdf 100644
--- a/src/types/types.ts
+++ b/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";
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ed80a28..7cdc0a8 100644
--- a/src/utils/utils.ts
+++ b/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";
+ }
+};