Fixed overrideFrequency Input Constraints (#801)

* Fixed overrideFrequency to properly allow for floats with a minimum of 410 MHz and maximum of 930 MHz. Added 3 decimal point check.

* Removed duplicate error message in FormInput.tsx

* Added error message for overrideFrequency in several locales

* Simplified check and reverted translated languages to English besides German. Also fixed a typo in src/components/UI/Input.tsx.

* Let i18n handle fallback + linting

---------

Co-authored-by: philon- <[email protected]>

packages/web/public/i18n/locales/de-DE/common.json

@@ -135,6 +135,9 @@
 			"generic": "Dies ist ein Pflichtfeld.",
 			"managed": "Mindestens ein administrativer Schlüssel wird benötigt, um diesen Knoten zu verwalten",
 			"key": "Schlüssel erforderlich."
+		},
+		"invalidOverrideFreq": {
+			"number": "Ungültiges Format, erwartet 430-930 MHz."
 		}
 	},
 	"yes": "Ja",

packages/web/public/i18n/locales/en/common.json

@@ -111,6 +111,9 @@
       "generic": "This field is required.",
       "managed": "At least one admin key is requred if the node is managed.",
       "key": "Key is required."
+    },
+    "invalidOverrideFreq": {
+      "number": "Invalid format, expected between 430-930 MHz."
     }
   },
   "yes": "Yes",

packages/web/src/components/Form/DynamicFormField.tsx

@@ -52,7 +52,6 @@ export function DynamicFormField<T extends FieldValues>({
           control={control}
           disabled={disabled}
           isDirty={isDirty}
-          invalid={invalid}
         />
       );
 

packages/web/src/components/Form/FormInput.tsx

@@ -30,7 +30,6 @@ export function GenericInput<T extends FieldValues>({
   control,
   disabled,
   field,
-  invalid,
 }: GenericFormElementProps<T, InputFieldProps<T>>) {
   const { fieldLength, ...restProperties } = field.properties || {};
 
@@ -46,8 +45,6 @@ export function GenericInput<T extends FieldValues>({
     },
   });
 
-  const isInvalid = invalid || Boolean(error?.message);
-
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
 
@@ -100,12 +97,6 @@ export function GenericInput<T extends FieldValues>({
           {currentLength}/{fieldLength.max}
         </div>
       )}
-
-      {isInvalid && (
-        <div className="absolute inset-y-12 bottom-0 flex items-center pr-3">
-          <p className="text-sm text-red-500">{error?.message ?? ""}</p>
-        </div>
-      )}
     </div>
   );
 }

packages/web/src/components/UI/Input.tsx

@@ -10,7 +10,7 @@ const cnInvalidBase = "border-2 border-red-500 dark:border-red-500";
 const cnDirtyBase = "border-2 border-sky-500 dark:border-sky-500";
 
 const inputVariants = cva(
-  "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-transparet dark:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-600",
+  "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-transparent dark:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-600",
   {
     variants: {
       variant: {

packages/web/src/validation/config/lora.ts

@@ -18,7 +18,11 @@ export const LoRaValidationSchema = z.object({
   channelNum: z.coerce.number().int(),
   overrideDutyCycle: z.boolean(),
   sx126xRxBoostedGain: z.boolean(),
-  overrideFrequency: z.coerce.number().int(),
+  overrideFrequency: z.coerce
+    .number()
+    .refine((val) => val >= 410 && val <= 930, {
+      message: "formValidation.invalidOverrideFreq.number",
+    }),
   ignoreIncoming: z.coerce.number().array(),
   ignoreMqtt: z.boolean(),
   configOkToMqtt: z.boolean(),