Fix network config

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["bradlc.vscode-tailwindcss"]
+}

src/components/PageComponents/Config/Network.tsx

@@ -6,7 +6,6 @@ import { toast } from "react-hot-toast";
 
 import { FormSection } from "@app/components/form/FormSection.js";
 import { Input } from "@app/components/form/Input.js";
-import { IPAddress } from "@app/components/form/IPAddress.js";
 import { Select } from "@app/components/form/Select.js";
 import { Toggle } from "@app/components/form/Toggle.js";
 import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
@@ -42,6 +41,12 @@ export const Network = (): JSX.Element => {
     defaultValue: false
   });
 
+  const ethMode = useWatch({
+    control,
+    name: "ethMode",
+    defaultValue: Protobuf.Config_NetworkConfig_EthMode.DHCP
+  });
+
   useEffect(() => {
     reset(config.network);
   }, [reset, config.network]);
@@ -50,17 +55,13 @@ export const Network = (): JSX.Element => {
     console.log(data);
 
     if (connection) {
-      const tmp = Protobuf.Config_NetworkConfig.create({
-        ethEnabled: true,
-        ethMode: Protobuf.Config_NetworkConfig_EthMode.DHCP
-      });
       void toast.promise(
         connection
           .setConfig({
             config: {
               payloadVariant: {
                 oneofKind: "network",
-                network: tmp
+                network: Protobuf.Config_NetworkConfig.create(data)
               }
             },
             callback: async () => {
@@ -105,7 +106,7 @@ export const Network = (): JSX.Element => {
           control={control}
           render={({ field: { value, ...rest } }) => (
             <Toggle
-              label="WiFi Enabled"
+              label="Enabled"
               description="Enable or disable the WiFi radio"
               checked={value}
               {...rest}
@@ -134,7 +135,7 @@ export const Network = (): JSX.Element => {
           control={control}
           render={({ field: { value, ...rest } }) => (
             <Toggle
-              label="Ethernet Enabled"
+              label="Enabled"
               description="Enable or disbale the Ethernet port"
               checked={value}
               {...rest}
@@ -152,37 +153,38 @@ export const Network = (): JSX.Element => {
         >
           {renderOptions(Protobuf.Config_NetworkConfig_EthMode)}
         </Select>
-      </FormSection>
+        {ethMode === Protobuf.Config_NetworkConfig_EthMode.STATIC && (
-      <FormSection title="IP Config">
+          <>
-        <IPAddress label="IP" description="IP Address" />
+            <Input
-        <Input
+              label="IP"
-          label="IP"
+              type="number"
-          type="number"
+              description="IP Address"
-          description="IP Address"
+              error={errors.ipv4Config?.ip?.message}
-          error={errors.ipv4Config?.ip?.message}
+              {...register("ipv4Config.ip", { valueAsNumber: true })}
-          {...register("ipv4Config.ip", { valueAsNumber: true })}
+            />
-        />
+            <Input
-        <Input
+              label="Gateway"
-          label="Gateway"
+              type="number"
-          type="number"
+              description="Default Gateway"
-          description="Default Gateway"
+              error={errors.ipv4Config?.gateway?.message}
-          error={errors.ipv4Config?.gateway?.message}
+              {...register("ipv4Config.gateway", { valueAsNumber: true })}
-          {...register("ipv4Config.gateway", { valueAsNumber: true })}
+            />
-        />
+            <Input
-        <Input
+              label="Subnet"
-          label="Subnet"
+              type="number"
-          type="number"
+              description="Subnet Mask"
-          description="Subnet Mask"
+              error={errors.ipv4Config?.subnet?.message}
-          error={errors.ipv4Config?.subnet?.message}
+              {...register("ipv4Config.subnet", { valueAsNumber: true })}
-          {...register("ipv4Config.subnet", { valueAsNumber: true })}
+            />
-        />
+            <Input
-        <Input
+              label="DNS"
-          label="DNS"
+              type="number"
-          type="number"
+              description="DNS Server"
-          description="DNS Server"
+              error={errors.ipv4Config?.dns?.message}
-          error={errors.ipv4Config?.dns?.message}
+              {...register("ipv4Config.dns", { valueAsNumber: true })}
-          {...register("ipv4Config.dns", { valueAsNumber: true })}
+            />
-        />
+          </>
+        )}
       </FormSection>
       <Input
         label="NTP Server"

src/components/form/IPAddress.tsx

@@ -1,133 +0,0 @@
-import React, { InputHTMLAttributes, useState } from "react";
-
-import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
-
-export interface IPAddressProps extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
-  description?: string;
-  prefix?: string;
-  suffix?: string;
-  action?: {
-    icon: JSX.Element;
-    action: () => void;
-  };
-  error?: string;
-}
-
-export const IPAddress = ({
-  label,
-  description,
-  action,
-  error,
-  disabled,
-  ...rest
-}: IPAddressProps): JSX.Element => {
-  const [value, setValue] = useState<[number, number, number, number]>([
-    0, 0, 0, 0
-  ]);
-
-  // const getRange = (el) => {
-  //     var cuRange, tbRange, headRange, range, dupRange, ret = {};
-  //     if (el.setSelectionRange) {
-  //       // standard
-  //       ret.begin = el.selectionStart;
-  //       ret.end = el.selectionEnd;
-  //       ret.result = el.value.substring(ret.begin, ret.end);
-  //     } else if (document.selection) {
-  //       // ie
-  //       if (el.tagName.toLowerCase() === 'input') {
-  //         cuRange = document.selection.createRange();
-  //         tbRange = el.createTextRange();
-  //         tbRange.collapse(true);
-  //         tbRange.select();
-  //         headRange = document.selection.createRange();
-  //         headRange.setEndPoint('EndToEnd', cuRange);
-  //         ret.begin = headRange.text.length - cuRange.text.length;
-  //         ret.end = headRange.text.length;
-  //         ret.result = cuRange.text;
-  //         cuRange.select();
-  //       } else if (el.tagName.toLowerCase() === 'textarea') {
-  //         range = document.selection.createRange();
-  //         dupRange = range.duplicate();
-  //         dupRange.moveToElementText(el);
-  //         dupRange.setEndPoint('EndToEnd', range);
-  //         ret.begin = dupRange.text.length - range.text.length;
-  //         ret.end = dupRange.text.length;
-  //         ret.result = range.text;
-  //       }
-  //     }
-  //     el.focus();
-  //     return ret;
-  //   }
-
-  //   const isValidIPItemValue = (val) => {
-  //     val = parseInt(val);
-  //     return !isNaN(val) && val >= 0 && val <= 255;
-  //   }
-
-  //   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {
-  //     /* 37 = ←, 39 = →, 8 = backspace, 110 or 190 = . */
-  //     let domId = index;
-  //     if ((event.keyCode === 37 || event.keyCode === 8) && getRange(event.target).end === 0 && index > 0) { domId = index - 1; }
-  //     if (event.keyCode === 39 && getRange(event.target).end === event.target.value.length && index < 3) { domId = index + 1; }
-  //     if (event.keyCode === 110 || event.keyCode === 190) {
-  //         event.preventDefault();
-  //       if(i < 3) {
-  //         domId = i + 1;
-  //       }
-  //     }
-  //     this[`_input-${domId}`].focus();
-  //   }
-
-  //   useEffect(() => {
-
-  //   }, [])
-
-  //   const ip = value.map(val => isNaN(val) ? '' : val).join('.');
-
-  return (
-    <div>
-      {/* Label */}
-      <label className="block text-sm font-medium text-gray-700">{label}</label>
-      {/*  */}
-      <div className="relative flex gap-1 rounded-md">
-        {value.map((octet, index) => (
-          <>
-            <input
-              key={index}
-              //   ref={ref}
-              className={`flex h-10 w-full rounded-md border-transparent bg-orange-100 px-3 text-sm shadow-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 ${
-                action ? "rounded-r-none" : ""
-              } ${
-                disabled
-                  ? "cursor-not-allowed bg-orange-50 text-orange-200"
-                  : ""
-              }`}
-              disabled={disabled}
-              {...rest}
-            />
-            {index !== 3 && <i className="text-xl">.</i>}
-          </>
-        ))}
-        {action && (
-          <button
-            type="button"
-            onClick={action.action}
-            className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-orange-200 px-4 py-2 text-sm font-medium hover:bg-orange-300 focus:outline-none focus:ring-2 focus:ring-orange-500"
-          >
-            {action.icon}
-          </button>
-        )}
-        {error && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-            <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
-          </div>
-        )}
-      </div>
-      {description && (
-        <p className="mt-2 text-sm text-gray-500">{description}</p>
-      )}
-      {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
-    </div>
-  );
-};