Merge pull request 'added wifi validation' (#1) from bugfix/wifi into develop

Reviewed-on: #1

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,66 +45,71 @@ const WiFiSettingsForm = () => {
     await wifiMutation.mutateAsync(wifiConfig);
   };
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+    <>
-      {({ isSubmitting }) => (
+      <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-        <Form className="flex flex-col space-y-5 px-2">
+        {({ isSubmitting }) => (
-          <FormGroup>
+          <Form className="flex flex-col space-y-5 px-2">
-            <label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">
+            <FormGroup>
-              SSID
+              <label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">
-            </label>
+                SSID
-            <Field
+              </label>
-              id="ssid"
-              name="ssid"
-              type="text"
-              className="p-1.5 border border-gray-400 rounded-lg"
-              placeholder="Enter SSID"
-            />
-          </FormGroup>
-          <FormGroup>
-            <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-              Password
-            </label>
-            <div className="flex gap-2 items-center relative mb-4">
               <Field
-                id="password"
+                id="ssid"
-                name="password"
+                name="ssid"
-                type={showPwd ? "text" : "password"}
+                type="text"
-                className="p-2 border border-gray-400 rounded-lg w-full"
+                className="p-1.5 border border-gray-400 rounded-lg"
-                placeholder="Enter Password"
+                placeholder="Enter SSID"
               />
-              <FontAwesomeIcon
+            </FormGroup>
-                type="button"
+            <FormGroup>
-                className="absolute right-5 end-0"
+              <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                onClick={() => setShowPwd((s) => !s)}
+                Password
-                icon={showPwd ? faEyeSlash : faEye}
+              </label>
-              />
+              <div className="flex gap-2 items-center relative mb-4">
-            </div>
+                <Field
-          </FormGroup>
+                  id="password"
-          <FormGroup>
+                  name="password"
-            <label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">
+                  type={showPwd ? "text" : "password"}
-              WPA/Encryption Type
+                  className="p-2 border border-gray-400 rounded-lg w-full"
-            </label>
+                  placeholder="Enter Password"
-            <Field
+                  validate={validatePassword}
-              id="encryption"
+                />
-              name="encryption"
+
-              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+                <FontAwesomeIcon
-              as="select"
+                  type="button"
+                  className="absolute right-5 end-0"
+                  onClick={() => setShowPwd((s) => !s)}
+                  icon={showPwd ? faEyeSlash : faEye}
+                />
+              </div>
+            </FormGroup>
+            <FormGroup>
+              <label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">
+                WPA/Encryption Type
+              </label>
+              <Field
+                id="encryption"
+                name="encryption"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+                as="select"
+              >
+                <option value="WPA2">WPA2</option>
+                <option value="WPA3">WPA3</option>
+                <option value="WEP">WEP</option>
+                <option value="None">None</option>
+              </Field>
+            </FormGroup>
+            <button
+              type="submit"
+              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             >
-              <option value="WPA2">WPA2</option>
+              {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
-              <option value="WPA3">WPA3</option>
+            </button>
-              <option value="WEP">WEP</option>
+          </Form>
-              <option value="None">None</option>
+        )}
-            </Field>
+      </Formik>
-          </FormGroup>
+      <Toaster />
-          <button
+    </>
-            type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
-          >
-            {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
-          </button>
-        </Form>
-      )}
-    </Formik>
   );
 };