WIP

src/pages/settings/Device.tsx

@@ -18,15 +18,14 @@ export interface DeviceProps {
 
 export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
   const { t } = useTranslation();
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+  const user = useAppSelector((state) => state.meshtastic.user);
 
-  const { register, handleSubmit, formState } =
-    useForm<Protobuf.RadioConfig_UserPreferences>({
-      defaultValues: radioConfig,
-    });
+  const { register, handleSubmit, formState } = useForm<Protobuf.User>({
+    defaultValues: user,
+  });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setPreferences(data);
+    void connection.setOwner(data);
   });
 
   return (
@@ -54,14 +53,9 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
         </Button>
       }
     >
-      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
-        <form onSubmit={onSubmit}>
-          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
-          <Input
-            type="password"
-            label={t('strings.wifi_psk')}
-            {...register('wifiPassword')}
-          />
+      <div className="w-full max-w-3xl md:max-w-xl">
+        <form className="space-y-2" onSubmit={onSubmit}>
+          <Input label={'Device Name'} {...register('longName')} />
         </form>
       </div>
     </PrimaryTemplate>

src/pages/settings/Radio.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface RadioProps {
   navOpen: boolean;
@@ -14,6 +18,16 @@ export interface RadioProps {
 
 export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
   const { t } = useTranslation();
+  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+
+  const { register, handleSubmit, formState } =
+    useForm<Protobuf.RadioConfig_UserPreferences>({
+      defaultValues: radioConfig,
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
 
   return (
     <PrimaryTemplate
@@ -32,6 +46,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         <Button
           className="px-10 ml-auto"
           icon={<SaveIcon className="w-5 h-5" />}
+          disabled={!formState.isDirty}
           active
           border
         >
@@ -39,8 +54,15 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         </Button>
       }
     >
-      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
-        <Input label="test" />
+      <div className="w-full max-w-3xl md:max-w-xl">
+        <form className="space-y-2" onSubmit={onSubmit}>
+          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
+          <Input
+            type="password"
+            label={t('strings.wifi_psk')}
+            {...register('wifiPassword')}
+          />
+        </form>
       </div>
     </PrimaryTemplate>
   );