Consolidate forms & other minor fixes

src/components/layout/Sidebar/Settings/WiFi.tsx

@@ -2,10 +2,9 @@ import type React from 'react';
 import { useEffect, useState } from 'react';
 
 import { useForm, useWatch } from 'react-hook-form';
-import { FiSave } from 'react-icons/fi';
 
-import { IconButton } from '@components/generic/button/IconButton';
 import { Checkbox } from '@components/generic/form/Checkbox';
+import { Form } from '@components/generic/form/Form';
 import { Input } from '@components/generic/form/Input';
 import { connection } from '@core/connection';
 import { useAppSelector } from '@hooks/useAppSelector';
@@ -21,18 +20,12 @@ export const WiFi = (): JSX.Element => {
       defaultValues: preferences,
     });
 
-  const watchWifiApMode = useWatch({
+  const WifiApMode = useWatch({
     control,
     name: 'wifiApMode',
     defaultValue: false,
   });
 
-  const watchMQTTDisabled = useWatch({
-    control,
-    name: 'mqttDisabled',
-    defaultValue: false,
-  });
-
   useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
@@ -46,51 +39,20 @@ export const WiFi = (): JSX.Element => {
     });
   });
   return (
-    <>
-      <form className="space-y-2" onSubmit={onSubmit}>
-        <Checkbox label="Enable WiFi AP" {...register('wifiApMode')} />
-        <Input
-          label="WiFi SSID"
-          disabled={watchWifiApMode}
-          {...register('wifiSsid')}
-        />
-        <Input
-          type="password"
-          autoComplete="off"
-          label="WiFi PSK"
-          disabled={watchWifiApMode}
-          {...register('wifiPassword')}
-        />
-        <Checkbox label="Disable MQTT" {...register('mqttDisabled')} />
-        <Input
-          label="MQTT Server Address"
-          disabled={watchMQTTDisabled}
-          {...register('mqttServer')}
-        />
-        <Input
-          label="MQTT Username"
-          disabled={watchMQTTDisabled}
-          {...register('mqttUsername')}
-        />
-        <Input
-          label="MQTT Password"
-          type="password"
-          autoComplete="off"
-          disabled={watchMQTTDisabled}
-          {...register('mqttPassword')}
-        />
-      </form>
-      <div className="flex w-full bg-white dark:bg-secondaryDark">
-        <div className="ml-auto p-2">
-          <IconButton
-            disabled={!formState.isDirty}
-            onClick={async (): Promise<void> => {
-              await onSubmit();
-            }}
-            icon={<FiSave />}
-          />
-        </div>
-      </div>
-    </>
+    <Form loading={loading} dirty={!formState.isDirty} submit={onSubmit}>
+      <Checkbox label="Enable WiFi AP" {...register('wifiApMode')} />
+      <Input
+        label="WiFi SSID"
+        disabled={WifiApMode}
+        {...register('wifiSsid')}
+      />
+      <Input
+        type="password"
+        autoComplete="off"
+        label="WiFi PSK"
+        disabled={WifiApMode}
+        {...register('wifiPassword')}
+      />
+    </Form>
   );
 };