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 <[email protected]> * Update src/components/Dialog/DeviceNameDialog.tsx Co-authored-by: Copilot <[email protected]> * Update src/components/Dialog/DeviceNameDialog.tsx Co-authored-by: Copilot <[email protected]> * fixed typo --------- Co-authored-by: Copilot <[email protected]>
12 months ago · 43143bfdf6
8 changed files with 769 additions and 732 deletions
--- a/deno.lock
+++ b/deno.lock
--- a/package.json
+++ b/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/[email protected]",
    "@meshtastic/js": "npm:@jsr/[email protected]",
    "@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": {
--- a/public/site.webmanifest
+++ b/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"
    }
--- a/src/components/Dialog/DeviceNameDialog.tsx
+++ b/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 ?? t("unknown.shortName"),
+    shortName: myNode?.user?.shortName ?? "",
+    longName: myNode?.user?.longName ?? "",
  };

-  const { getValues, setValue, reset, control, handleSubmit } = useForm<User>({
-    values: defaultValues,
+  const deviceNameSchema = z.object({
+    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(
-    getValues("longName"),
-    MAX_LONG_NAME_BYTE_LENGTH,
-  );
-  const { currentLength: currentShortNameLength } = validateMaxByteLength(
-    getValues("shortName"),
-    MAX_SHORT_NAME_BYTE_LENGTH,
-  );
-
-  if (!myNode?.user) {
-    console.warn("DeviceNameDialog: No user data available");
-    return null;
-  }
+  const { getValues, reset, control, handleSubmit } = useForm<User>({
+    values: defaultValues,
+    resolver: zodResolver(deviceNameSchema),
+  });

  const onSubmit = handleSubmit((data) => {
    connection?.setOwner(
@ -70,9 +67,7 @@ export const DeviceNameDialog = ({
  });

  const handleReset = () => {
-    reset({ longName: "", shortName: "" });
-    setValue("longName", "");
-    setValue("shortName", "");
+    reset(defaultValues);
  };

  return (
@ -99,8 +94,9 @@ export const DeviceNameDialog = ({
                properties: {
                  className: "text-slate-900 dark:text-slate-200",
                  fieldLength: {
-                    currentValueLength: currentLongNameLength ?? 0,
-                    max: MAX_LONG_NAME_BYTE_LENGTH,
+                    currentValueLength: getValues("longName").length,
+                    max: 40,
+                    min: 1,
                    showCharacterCount: true,
                  },
                },
@ -119,8 +115,9 @@ export const DeviceNameDialog = ({
                type: "text",
                properties: {
                  fieldLength: {
-                    currentValueLength: currentShortNameLength ?? 0,
-                    max: MAX_SHORT_NAME_BYTE_LENGTH,
+                    currentValueLength: getValues("shortName").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>
--- a/src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx
+++ b/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">
--- a/src/components/Form/FormInput.tsx
+++ b/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;
-    prefix?: string;
+    id?: 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>
--- a/src/components/PageComponents/Connect/BLE.tsx
+++ b/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";
--- a/src/i18n/locales/en/dialog.json
+++ b/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.",
-      "requiresWebSerial": "This connection type requires <0>Web Serial</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.",
      "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."
    }