Browse Source

biome linting

pull/266/head
Hunter Thornsberry 2 years ago
parent
commit
1c7c44a472
  1. 16
      src/components/Form/DynamicFormField.tsx
  2. 61
      src/components/Form/FormPasswordGenerator.tsx
  3. 6
      src/components/PageComponents/Channel.tsx
  4. 109
      src/components/UI/Generator.tsx

16
src/components/Form/DynamicFormField.tsx

@ -2,6 +2,10 @@ import {
GenericInput,
type InputFieldProps,
} from "@components/Form/FormInput.js";
import {
PasswordGenerator,
type PasswordGeneratorProps,
} from "@components/Form/FormPasswordGenerator.js";
import {
type SelectFieldProps,
SelectInput,
@ -10,10 +14,6 @@ import {
type ToggleFieldProps,
ToggleInput,
} from "@components/Form/FormToggle.js";
import {
type PasswordGeneratorProps,
PasswordGenerator,
} from "@components/Form/FormPasswordGenerator.js";
import type { Control, FieldValues } from "react-hook-form";
export type FieldProps<T> =
@ -51,8 +51,12 @@ export function DynamicFormField<T extends FieldValues>({
);
case "passwordGenerator":
return (
<PasswordGenerator field={field} control={control} disabled={disabled} />
)
<PasswordGenerator
field={field}
control={control}
disabled={disabled}
/>
);
case "multiSelect":
return <div>tmp</div>;
}

61
src/components/Form/FormPasswordGenerator.tsx

@ -1,32 +1,31 @@
import type {
BaseFormBuilderProps,
GenericFormElementProps,
} from "@components/Form/DynamicForm.js";
import { Generator } from "@components/UI/Generator.js";
import { useState } from "react";
import { Controller, type FieldValues } from "react-hook-form";
export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
type: "passwordGenerator";
}
export function PasswordGenerator<T extends FieldValues>({
control,
field,
}: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
return (
<Controller
name={field.name}
control={control}
render={({ field: { value, onChange, ...rest } }) => (
<Generator
variant={"success"}
textValue="Generate"
{...field.properties}
{...rest}
/>
)}
/>
);
}
BaseFormBuilderProps,
GenericFormElementProps,
} from "@components/Form/DynamicForm.js";
import { Generator } from "@components/UI/Generator.js";
import { useState } from "react";
import { Controller, type FieldValues } from "react-hook-form";
export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
type: "passwordGenerator";
}
export function PasswordGenerator<T extends FieldValues>({
control,
field,
}: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
return (
<Controller
name={field.name}
control={control}
render={({ field: { value, onChange, ...rest } }) => (
<Generator
variant={"success"}
textValue="Generate"
{...field.properties}
{...rest}
/>
)}
/>
);
}

6
src/components/PageComponents/Channel.tsx

@ -81,8 +81,10 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
label: "pre-Shared Key",
description: "256, 128, or 8 bit PSKs allowed",
properties: {
passwordValue: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
devicePSKBitCount: channel?.settings?.psk.length
passwordValue: fromByteArray(
channel?.settings?.psk ?? new Uint8Array(0),
),
devicePSKBitCount: channel?.settings?.psk.length,
},
},
{

109
src/components/UI/Generator.tsx

@ -1,26 +1,25 @@
import { type VariantProps, cva } from "class-variance-authority";
import * as React from "react";
import { cn } from "@core/utils/cn.js";
import { Input } from "@components/UI/Input.js";
import { Button } from "@components/UI/Button.js";
import {
import { Input } from "@components/UI/Input.js";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
SelectValue,
} from "@components/UI/Select.js";
import { cn } from "@core/utils/cn.js";
import cryptoRandomString from "crypto-random-string";
import { useState } from "react";
import cryptoRandomString from 'crypto-random-string';
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:
"",
default: "",
destructive:
"bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
success:
@ -48,48 +47,72 @@ const generatorVariants = cva(
export interface GeneratorProps
extends React.BaseHTMLAttributes<HTMLElement>,
VariantProps<typeof generatorVariants>
{
devicePSKBitCount?: number;
passwordValue?: string;
textValue?: string;
}
VariantProps<typeof generatorVariants> {
devicePSKBitCount?: number;
passwordValue?: string;
textValue?: string;
}
const Generator = React.forwardRef<HTMLButtonElement, GeneratorProps>(
({ devicePSKBitCount, passwordValue, textValue, className, variant, size, ...props }, ref) => {
(
{
devicePSKBitCount,
passwordValue,
textValue,
className,
variant,
size,
...props
},
ref,
) => {
const [pass, setPass] = useState<string>(passwordValue ?? "");
const [bitCount, setBits] = useState<string>(devicePSKBitCount?.toString() ?? "");
const [bitCount, setBits] = useState<string>(
devicePSKBitCount?.toString() ?? "",
);
return (
<>
<Input
type="text"
id="pskInput"
value={pass}
/>
<Select value={bitCount} onValueChange={(value) => {
setBits(value)
}}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem key="bit256" value="32">256 bit</SelectItem>
<SelectItem key="bit128" value="16">128 bit</SelectItem>
<SelectItem key="bit8" value="1">8 bit</SelectItem>
</SelectContent>
</Select>
<Button
type="button"
variant="success"
ref={ref}
{...props}
onClick={() => {
setPass(btoa(cryptoRandomString({length: Number.parseInt(bitCount), type: 'alphanumeric'})));
}}
>
{textValue}
</Button>
<Input type="text" id="pskInput" value={pass} />
<Select
value={bitCount}
onValueChange={(value) => {
setBits(value);
}}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem key="bit256" value="32">
256 bit
</SelectItem>
<SelectItem key="bit128" value="16">
128 bit
</SelectItem>
<SelectItem key="bit8" value="1">
8 bit
</SelectItem>
</SelectContent>
</Select>
<Button
type="button"
variant="success"
ref={ref}
{...props}
onClick={() => {
setPass(
btoa(
cryptoRandomString({
length: Number.parseInt(bitCount),
type: "alphanumeric",
}),
),
);
}}
>
{textValue}
</Button>
</>
);
},

Loading…
Cancel
Save