Device Name dialog validation (#676)

* fix: style on config page

* feat: added device name validation

* Update src/i18n/locales/en/dialog.json

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/components/Dialog/DeviceNameDialog.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/components/Dialog/DeviceNameDialog.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fixed typo

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

package.json

@@ -36,6 +36,7 @@
   "homepage": "https://meshtastic.org",
   "dependencies": {
     "@bufbuild/protobuf": "^2.2.5",
+    "@hookform/resolvers": "^5.1.1",
     "@meshtastic/core": "npm:@jsr/meshtastic__core@2.6.4",
     "@meshtastic/js": "npm:@jsr/meshtastic__js@2.6.0-0",
     "@meshtastic/transport-http": "npm:@jsr/meshtastic__transport-http",
@@ -84,7 +85,7 @@
     "react-map-gl": "8.0.4",
     "react-qrcode-logo": "^3.0.0",
     "rfc4648": "^1.5.4",
-    "zod": "^3.25.62",
+    "zod": "^3.25.67",
     "zustand": "5.0.5"
   },
   "devDependencies": {

public/site.webmanifest

@@ -1,11 +1,11 @@
 {
   "name": "Meshtastic",
-  "short_name": "Meshtastic",
+  "short_name": "Web Client",
   "start_url": ".",
-  "description": "Meshtastic web app",
+  "description": "Meshtastic Web App",
   "icons": [
     {
-      "src": "/icon.svg",
+      "src": "/Logo.svg",
       "sizes": "any",
       "type": "image/svg+xml"
     }

src/components/Dialog/DeviceNameDialog.tsx

@@ -14,8 +14,9 @@ import { Protobuf } from "@meshtastic/core";
 import { useForm } from "react-hook-form";
 import { GenericInput } from "@components/Form/FormInput.tsx";
 import { useTranslation } from "react-i18next";
-import { validateMaxByteLength } from "@core/utils/string.ts";
 import { Label } from "../UI/Label.tsx";
+import z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
 
 export interface User {
   longName: string;
@@ -26,8 +27,6 @@ export interface DeviceNameDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
-const MAX_LONG_NAME_BYTE_LENGTH = 40;
-const MAX_SHORT_NAME_BYTE_LENGTH = 4;
 
 export const DeviceNameDialog = ({
   open,
@@ -38,27 +37,25 @@ export const DeviceNameDialog = ({
   const myNode = getNode(hardware.myNodeNum);
 
   const defaultValues = {
-    longName: myNode?.user?.longName ?? t("unknown.longName"),
+    shortName: myNode?.user?.shortName ?? "",
-    shortName: myNode?.user?.shortName ?? t("unknown.shortName"),
+    longName: myNode?.user?.longName ?? "",
   };
 
-  const { getValues, setValue, reset, control, handleSubmit } = useForm<User>({
+  const deviceNameSchema = z.object({
-    values: defaultValues,
+    longName: z
+      .string()
+      .min(1, t("deviceName.validation.longNameMin"))
+      .max(40, t("deviceName.validation.longNameMax")),
+    shortName: z
+      .string()
+      .min(2, t("deviceName.validation.shortNameMin"))
+      .max(4, t("deviceName.validation.shortNameMax")),
   });
 
-  const { currentLength: currentLongNameLength } = validateMaxByteLength(
+  const { getValues, reset, control, handleSubmit } = useForm<User>({
-    getValues("longName"),
+    values: defaultValues,
-    MAX_LONG_NAME_BYTE_LENGTH,
+    resolver: zodResolver(deviceNameSchema),
-  );
+  });
-  const { currentLength: currentShortNameLength } = validateMaxByteLength(
-    getValues("shortName"),
-    MAX_SHORT_NAME_BYTE_LENGTH,
-  );
-
-  if (!myNode?.user) {
-    console.warn("DeviceNameDialog: No user data available");
-    return null;
-  }
 
   const onSubmit = handleSubmit((data) => {
     connection?.setOwner(
@@ -70,9 +67,7 @@ export const DeviceNameDialog = ({
   });
 
   const handleReset = () => {
-    reset({ longName: "", shortName: "" });
+    reset(defaultValues);
-    setValue("longName", "");
-    setValue("shortName", "");
   };
 
   return (
@@ -99,8 +94,9 @@ export const DeviceNameDialog = ({
                 properties: {
                   className: "text-slate-900 dark:text-slate-200",
                   fieldLength: {
-                    currentValueLength: currentLongNameLength ?? 0,
+                    currentValueLength: getValues("longName").length,
-                    max: MAX_LONG_NAME_BYTE_LENGTH,
+                    max: 40,
+                    min: 1,
                     showCharacterCount: true,
                   },
                 },
@@ -119,8 +115,9 @@ export const DeviceNameDialog = ({
                 type: "text",
                 properties: {
                   fieldLength: {
-                    currentValueLength: currentShortNameLength ?? 0,
+                    currentValueLength: getValues("shortName").length,
-                    max: MAX_SHORT_NAME_BYTE_LENGTH,
+                    max: 4,
+                    min: 1,
                     showCharacterCount: true,
                   },
                 },
@@ -137,7 +134,12 @@ export const DeviceNameDialog = ({
             >
               {t("button.reset")}
             </Button>
-            <Button type="submit" name="save">{t("button.save")}</Button>
+            <Button
+              type="submit"
+              name="save"
+            >
+              {t("button.save")}
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>

src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx

@@ -63,7 +63,9 @@ export const UnsafeRolesDialog = (
             onChange={() => setConfirmState(!confirmState)}
             name="confirmUnderstanding"
           >
-            {t("unsafeRoles.confirmUnderstanding")}
+            <span className="dark:text-white">
+              {t("unsafeRoles.confirmUnderstanding")}
+            </span>
           </Checkbox>
         </div>
         <DialogFooter className="mt-6">

src/components/Form/FormInput.tsx

@@ -4,15 +4,14 @@ import type {
 } from "@components/Form/DynamicForm.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import type { ChangeEventHandler } from "react";
-import { useState } from "react";
 import { type FieldValues, useController } from "react-hook-form";
 
 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "text" | "number" | "password";
   inputChange?: ChangeEventHandler;
+  prefix?: string;
   properties?: {
-    value?: string;
+    id?: string;
-    prefix?: string;
     suffix?: string;
     step?: number;
     className?: string;
@@ -31,29 +30,33 @@ export function GenericInput<T extends FieldValues>({
   control,
   disabled,
   field,
-  isDirty,
   invalid,
 }: GenericFormElementProps<T, InputFieldProps<T>>) {
   const { fieldLength, ...restProperties } = field.properties || {};
-  const [currentLength, setCurrentLength] = useState<number>(
-    fieldLength?.currentValueLength || 0,
-  );
 
-  const { field: controllerField } = useController({
+  const {
+    field: controllerField,
+    fieldState: { error, isDirty },
+  } = useController({
     name: field.name,
     control,
+    rules: {
+      minLength: field.properties?.fieldLength?.min,
+      maxLength: field.properties?.fieldLength?.max,
+    },
   });
 
+  const isInvalid = invalid || Boolean(error?.message);
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
 
     if (
       field.properties?.fieldLength?.max &&
-      newValue.length > field.properties?.fieldLength?.max
+      newValue.length > field.properties.fieldLength.max
     ) {
       return;
     }
-    setCurrentLength(newValue.length);
 
     if (field.inputChange) field.inputChange(e);
 
@@ -64,6 +67,10 @@ export function GenericInput<T extends FieldValues>({
     );
   };
 
+  const currentLength = controllerField.value
+    ? String(controllerField.value).length
+    : 0;
+
   return (
     <div className="relative w-full">
       <Input
@@ -80,12 +87,18 @@ export function GenericInput<T extends FieldValues>({
         className={field.properties?.className}
         {...restProperties}
         disabled={disabled}
-        variant={invalid ? "invalid" : isDirty ? "dirty" : "default"}
+        variant={error ? "invalid" : isDirty ? "dirty" : "default"}
       />
 
-      {fieldLength?.showCharacterCount && fieldLength?.max && (
+      {fieldLength?.showCharacterCount && fieldLength.max && (
         <div className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-slate-900 dark:text-slate-200">
-          {currentLength ?? fieldLength?.currentValueLength}/{fieldLength?.max}
+          {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>

src/components/PageComponents/Connect/BLE.tsx

@@ -7,7 +7,6 @@ import { subscribeAll } from "@core/subscriptions.ts";
 import { randId } from "@core/utils/randId.ts";
 import { TransportWebBluetooth } from "@meshtastic/transport-web-bluetooth";
 import { MeshDevice } from "@meshtastic/core";
-import type { BluetoothDevice } from "web-bluetooth";
 import { useCallback, useEffect, useState } from "react";
 import { useMessageStore } from "@core/stores/messageStore/index.ts";
 import { useTranslation } from "react-i18next";

src/i18n/locales/en/dialog.json

@@ -7,7 +7,13 @@
     "description": "The Device will restart once the config is saved.",
     "longName": "Long Name",
     "shortName": "Short Name",
-    "title": "Change Device Name"
+    "title": "Change Device Name",
+    "validation": {
+      "longNameMax": "Long name must not be more than 40 characters",
+      "shortNameMax": "Short name must not be more than 4 characters",
+      "longNameMin": "Long name must have at least 1 character",
+      "shortNameMin": "Short name must have at least 1 character"
+    }
   },
   "import": {
     "description": "The current LoRa configuration will be overridden.",
@@ -21,9 +27,10 @@
     "title": "Import Channel Set"
   },
   "locationResponse": {
+    "title": "Location: {{identifier}}",
     "altitude": "Altitude: ",
     "coordinates": "Coordinates: ",
-    "title": "Location: {{identifier}}"
+    "noCoordinates": "No Coordinates"
   },
   "pkiRegenerateDialog": {
     "title": "Regenerate Pre-Shared Key?",
@@ -61,11 +68,15 @@
     },
     "bluetoothConnection": {
       "noDevicesPaired": "No devices paired yet.",
-      "newDeviceButton": "New device"
+      "newDeviceButton": "New device",
+      "connectionFailed": "Connection failed",
+      "deviceDisconnected": "Device disconnected",
+      "unknownDevice": "Unknown Device",
+      "errorLoadingDevices": "Error loading devices",
+      "unknownErrorLoadingDevices": "Unknown error loading devices"
     },
     "validation": {
-      "requiresWebBluetooth": "This connection type requires <0>Web Bluetooth</0>. Please use a supported browser, like Chrome or Edge.",
+      "requiresFeatures": "This connection type requires <0></0>. Please use a supported browser, like Chrome or Edge.",
-      "requiresWebSerial": "This connection type requires <0>Web Serial</0>. Please use a supported browser, like Chrome or Edge.",
       "requiresSecureContext": "This application requires a <0>secure context</0>. Please connect using HTTPS or localhost.",
       "additionallyRequiresSecureContext": "Additionally, it requires a <0>secure context</0>. Please connect using HTTPS or localhost."
     }