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"; + } +};