diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx index 045676ab..ac4fd092 100644 --- a/src/components/PageComponents/Channel.tsx +++ b/src/components/PageComponents/Channel.tsx @@ -6,18 +6,19 @@ import { Controller, useForm } from "react-hook-form"; import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; +import { ChannelSettingsValidation } from "@app/validation/channelSettings.js"; import { Form } from "@components/form/Form"; +import { Select } from "@components/form/Select.js"; +import { Toggle } from "@components/form/Toggle.js"; import { useDevice } from "@core/providers/useDevice.js"; import { ArrowPathIcon, EyeIcon, EyeSlashIcon, } from "@heroicons/react/24/outline"; +import { classValidatorResolver } from "@hookform/resolvers/class-validator"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { Select } from "../form/Select.js"; -import { Toggle } from "../form/Toggle.js"; - export interface SettingsPanelProps { channel: Protobuf.Channel; } @@ -34,9 +35,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { reset, control, setValue, - } = useForm< - Omit & { psk: string; enabled: boolean } - >({ + } = useForm({ defaultValues: { enabled: [ Protobuf.Channel_Role.SECONDARY, @@ -47,6 +46,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { ...channel?.settings, psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)), }, + resolver: classValidatorResolver(ChannelSettingsValidation), }); useEffect(() => { @@ -136,6 +136,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { @@ -162,7 +163,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { { setPskHidden(!pskHidden); }, }} + error={errors.psk?.message} {...register("psk")} /> { render={({ field: { value, ...rest } }) => ( @@ -194,7 +196,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { render={({ field: { value, ...rest } }) => ( diff --git a/src/validation/channelSettings.ts b/src/validation/channelSettings.ts index 9c6ad25e..250e6685 100644 --- a/src/validation/channelSettings.ts +++ b/src/validation/channelSettings.ts @@ -1,13 +1,20 @@ -import { IsBoolean, IsInt, Length } from "class-validator"; +import { IsBoolean, IsInt, IsNumber, IsString, Length } from "class-validator"; import type { Protobuf } from "@meshtastic/meshtasticjs"; export class ChannelSettingsValidation - implements Omit + implements Omit { - psk: Uint8Array; + @IsBoolean() + enabled: boolean; + + @IsString() + psk: string; + + @IsNumber() + channelNum: number; - @Length(1, 30) + @Length(1, 11) name: string; @IsInt()