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/ModemSettings.tsx b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
index ca43bba..a381f2b 100644
--- a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
+++ b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
@@ -35,6 +35,14 @@ const ModemSettings = () => {
};
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: [
@@ -68,7 +76,7 @@ const ModemSettings = () => {
const response = await modemMutation.mutateAsync(modemConfig);
- if (response?.id) {
+ if (!response?.id) {
toast.success("Modem settings updated successfully", {
id: "modemSettings",
});
@@ -138,7 +146,6 @@ const ModemSettings = () => {
id="serverPrimary"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
- validate={ValidateIPaddress}
/>
@@ -151,7 +158,6 @@ const ModemSettings = () => {
id="serverSecondary"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
- validate={ValidateIPaddress}
/>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 9707968..7cdc0a8 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -185,15 +185,13 @@ export const reverseZoomMapping = (magnification: string) => {
}
};
-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";
+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";
}
- return undefined;
-}
+};