[fix] Refactored mixed-content handling and added regression test

- Consolidated duplicated error handling into submitWithMixedContentCheck helper.
- Added a regression test case to verify loading state reset and toast notification
  when an insecure form submission is blocked on an HTTPS page.
- Fixed linting by using destructured setLoading throughout the status component.

fixes #602

Author: prathmeshkulkarni-coder

client/components/status/status.js

@@ -103,6 +103,20 @@ export default class Status extends React.Component {
     }
   }
 
+  submitCaptivePortalForm = (formRef) => {
+    const {setLoading} = this.context;
+    try {
+      checkMixedContent(formRef.current.action);
+      formRef.current.submit();
+      return true;
+    } catch (error) {
+      setLoading(false);
+      toast.error(`Security/Network Error: ${error.message}`);
+      console.error("Mixed Content Exception:", error);
+      return false;
+    }
+  };
+
   async componentDidMount() {
     const {
       cookies,
@@ -247,14 +261,7 @@ export default class Status extends React.Component {
           cookies,
         );
         this.notifyCpLogin(userData);
-        try {
-          checkMixedContent(this.loginFormRef.current.action);
-          this.loginFormRef.current.submit();
-        } catch (error) {
-          setLoading(false);
-          toast.error(`Security/Network Error: ${error.message}`);
-          console.error("Mixed Content Exception:", error);
-        }
+        this.submitCaptivePortalForm(this.loginFormRef);
       } else if (!shouldLogin) {
         // If the user is already logged in, we need to handle the
         // the response from the captive portal.
@@ -608,14 +615,7 @@ export default class Status extends React.Component {
             true,
             cookies,
           );
-          try {
-            checkMixedContent(this.logoutFormRef.current.action);
-            this.logoutFormRef.current.submit();
-          } catch (error) {
-            setLoading(false);
-            toast.error(`Security/Network Error: ${error.message}`);
-            console.error("Mixed Content Exception:", error);
-          }
+          this.submitCaptivePortalForm(this.logoutFormRef);
         }
         return;
       }
@@ -927,13 +927,7 @@ export default class Status extends React.Component {
     });
     const {setLoading} = this.context;
     if (this.logoutFormRef && this.logoutFormRef.current) {
-      try {
-        checkMixedContent(this.logoutFormRef.current.action);
-        this.logoutFormRef.current.submit();
-      } catch (error) {
-        setLoading(false);
-        toast.error(`Security/Network Error: ${error.message}`);
-        console.error("Mixed Content Exception:", error);
+      if (!this.submitCaptivePortalForm(this.logoutFormRef)) {
         return;
       }
     }

client/components/status/status.test.js

@@ -2886,4 +2886,32 @@ describe("<Status /> accounting_swap_octets", () => {
     expect(rows.at(3).find("td").text()).toBe("1 kB");
     expect(rows.at(4).find("td").text()).toBe("2 kB");
   });
+
+  it("should catch mixed content exceptions in submitCaptivePortalForm", () => {
+    props = createTestProps();
+    const setLoadingMock = jest.fn();
+    wrapper = shallow(<Status {...props} />, {
+      context: {setLoading: setLoadingMock},
+      disableLifecycleMethods: true,
+    });
+    jest.spyOn(toast, "error");
+
+    const mockFormRef = {
+      current: {
+        action: "http://example.com",
+        submit: () => {
+          throw new Error(
+            "Mixed Content: Cannot submit insecure HTTP form from a secure HTTPS page.",
+          );
+        },
+      },
+    };
+
+    const result = wrapper.instance().submitCaptivePortalForm(mockFormRef);
+
+    expect(result).toBe(false);
+    expect(setLoadingMock).toHaveBeenCalledWith(false);
+    expect(toast.error).toHaveBeenCalled();
+    expect(toast.error.mock.calls[0][0]).toContain("Mixed Content");
+  });
 });