biome linting
This commit is contained in:
@@ -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>;
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user