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

@@ -5,6 +5,7 @@ import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
 import { useState } from "react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { toast, Toaster } from "sonner";
 
 const WiFiSettingsForm = () => {
   const [showPwd, setShowPwd] = useState(false);
@@ -19,6 +20,13 @@ const WiFiSettingsForm = () => {
     encryption: "WPA2",
   };
 
+  const validatePassword = (password: string) => {
+    if (password.length < 8) {
+      toast.error("Password must be at least 8 characters long", { id: "password" });
+      return "Password must be at least 8 characters long";
+    }
+  };
+
   const handleSubmit = async (values: WifiSettingValues) => {
     const wifiConfig = {
       id: "ModemAndWifiManager-wifi",
@@ -37,6 +45,7 @@ const WiFiSettingsForm = () => {
     await wifiMutation.mutateAsync(wifiConfig);
   };
   return (
+    <>
       <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
         {({ isSubmitting }) => (
           <Form className="flex flex-col space-y-5 px-2">
@@ -63,7 +72,9 @@ const WiFiSettingsForm = () => {
                   type={showPwd ? "text" : "password"}
                   className="p-2 border border-gray-400 rounded-lg w-full"
                   placeholder="Enter Password"
+                  validate={validatePassword}
                 />
+
                 <FontAwesomeIcon
                   type="button"
                   className="absolute right-5 end-0"
@@ -97,6 +108,8 @@ const WiFiSettingsForm = () => {
           </Form>
         )}
       </Formik>
+      <Toaster />
+    </>
   );
 };