From 1eedb6d97b33d8cb07c311c42d1d08b10aa2fdef Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Sat, 10 Aug 2024 18:50:47 -0400 Subject: [PATCH] validation --- src/components/Form/DynamicForm.tsx | 5 ++ src/components/Form/FormPasswordGenerator.tsx | 12 +++- src/components/Form/FormWrapper.tsx | 5 ++ src/components/PageComponents/Channel.tsx | 54 ++++++++++++++- src/components/UI/Generator.tsx | 67 +++++-------------- src/components/UI/Input.tsx | 31 ++++++--- 6 files changed, 110 insertions(+), 64 deletions(-) diff --git a/src/components/Form/DynamicForm.tsx b/src/components/Form/DynamicForm.tsx index 4c9b551b..d70a0ee5 100644 --- a/src/components/Form/DynamicForm.tsx +++ b/src/components/Form/DynamicForm.tsx @@ -26,6 +26,7 @@ export interface BaseFormBuilderProps { disabledBy?: DisabledBy[]; label: string; description?: string; + validationText?: string; properties?: Record; } @@ -44,6 +45,8 @@ export interface DynamicFormProps { fieldGroups: { label: string; description: string; + valid?: boolean; + validationText?: string; fields: FieldProps[]; }[]; } @@ -98,6 +101,8 @@ export function DynamicForm({ key={field.label} label={field.label} description={field.description} + valid={field.validationText == undefined || field.validationText == ""} + validationText={field.validationText} > extends BaseFormBuilderProps { type: "passwordGenerator"; devicePSKBitCount: number; + inputChange: ChangeEventHandler; + selectChange: (event: string) => void; + buttonClick: MouseEventHandler; } export function PasswordGenerator({ @@ -18,12 +22,14 @@ export function PasswordGenerator({ ( + render={({ field: { value,...rest } }) => ( (
@@ -19,6 +23,7 @@ export const FieldWrapper = ({

{description}

+
{children}
diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx index 3c79a543..85a6866c 100644 --- a/src/components/PageComponents/Channel.tsx +++ b/src/components/PageComponents/Channel.tsx @@ -21,6 +21,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { const [bitCount, setBits] = useState( channel?.settings?.psk.length ?? 16, ); + const [validationText, setValidationText] = useState(); const onSubmit = (data: ChannelValidation) => { const channel = new Protobuf.Channel.Channel({ @@ -54,8 +55,53 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { }), ), ); + setValidationText(undefined); }; + const validatePass = (input: string, count: number) => { + if (count == 32) { + if (input.length != 44) { + setValidationText("Please enter a valid 256 bit PSK."); + } + else { + setValidationText(undefined); + } + } + else if (count == 16) + { + if (input.length != 24) { + setValidationText("Please enter a valid 128 bit PSK."); + } + else { + setValidationText(undefined); + } + } + else if (count == 1) + { + if (input.length != 4) { + setValidationText("Please enter a valid 1 bit PSK"); + } + else { + setValidationText(undefined); + } + } + else { + setValidationText("Unkown PSK length."); + } + } + + const inputChangeEvent = (e) => { + let psk = e.currentTarget?.value; + setPass(psk); + validatePass(psk, bitCount); + }; + + const selectChangeEvent = (e: string) => { + let count = Number.parseInt(e); + setBits(count); + validatePass(pass, count); + } + return ( onSubmit={onSubmit} @@ -100,11 +146,13 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { name: "settings.psk", label: "pre-Shared Key", description: "256, 128, or 8 bit PSKs allowed", + validationText: validationText, devicePSKBitCount: bitCount ?? 0, + inputChange: inputChangeEvent, + selectChange: selectChangeEvent, + buttonClick: clickEvent, properties: { - value: pass, - onClick: clickEvent, - changeEvent: (e: string) => setBits(Number.parseInt(e)), + value: pass }, }, { diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx index 5b3dd44f..bdf0c3b8 100644 --- a/src/components/UI/Generator.tsx +++ b/src/components/UI/Generator.tsx @@ -1,4 +1,3 @@ -import { type VariantProps, cva } from "class-variance-authority"; import * as React from "react"; import { Button } from "@components/UI/Button.js"; @@ -11,67 +10,35 @@ import { SelectValue, } from "@components/UI/Select.js"; -const generatorVariants = cva( - "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2", - { - variants: { - variant: { - default: "", - destructive: - "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600", - success: - "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600", - outline: - "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100", - subtle: - "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100", - ghost: - "bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent", - link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent", - }, - size: { - default: "h-10 py-2 px-4", - sm: "h-9 px-2 rounded-md", - lg: "h-11 px-8 rounded-md", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, - }, -); - export interface GeneratorProps - extends React.BaseHTMLAttributes, - VariantProps { + extends React.BaseHTMLAttributes { devicePSKBitCount?: number; value: string; + variant: "default" | "invalid"; buttonText?: string; - changeEvent: (event: string) => void; + selectChange: (event: string) => void; + inputChange: (event: React.ChangeEvent) => void; + buttonClick: React.MouseEventHandler; } -const getBitString = (bitcount?: number) => { - if (bitcount === 32) { - return "32"; - } - if (bitcount === 1) { - return "1"; - } - return "16"; -}; const Generator = React.forwardRef( ( - { devicePSKBitCount, value, buttonText, variant, changeEvent, ...props }, + { devicePSKBitCount, variant, value, buttonText, selectChange, inputChange, buttonClick, ...props }, ref, ) => { return ( <> - + - @@ -97,4 +64,4 @@ const Generator = React.forwardRef( ); Generator.displayName = "Button"; -export { Generator, generatorVariants }; +export { Generator }; diff --git a/src/components/UI/Input.tsx b/src/components/UI/Input.tsx index e13f25f4..c7ac3217 100644 --- a/src/components/UI/Input.tsx +++ b/src/components/UI/Input.tsx @@ -2,9 +2,28 @@ import * as React from "react"; import { cn } from "@core/utils/cn.js"; import type { LucideIcon } from "lucide-react"; +import { cva, VariantProps } from "class-variance-authority"; + +const inputVariants = cva( + "flex h-10 w-full rounded-md border bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900", + { + variants: { + variant: { + default: + "border-slate-300 dark:border-slate-700", + invalid: + "border-red-500 dark:border-red-500", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); export interface InputProps - extends React.InputHTMLAttributes { + extends React.InputHTMLAttributes, + VariantProps { prefix?: string; suffix?: string; action?: { @@ -14,7 +33,7 @@ export interface InputProps } const Input = React.forwardRef( - ({ className, prefix, suffix, action, ...props }, ref) => { + ({ className, variant, prefix, suffix, action, ...props }, ref) => { return (
{prefix && ( @@ -23,11 +42,7 @@ const Input = React.forwardRef( )} @@ -51,4 +66,4 @@ const Input = React.forwardRef( ); Input.displayName = "Input"; -export { Input }; +export { Input, inputVariants };