117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
import { type VariantProps, cva } from "class-variance-authority";
|
|
import * as React from "react";
|
|
|
|
import { Button } from "@components/UI/Button.js";
|
|
import { Input } from "@components/UI/Input.js";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@components/UI/Select.js";
|
|
import cryptoRandomString from "crypto-random-string";
|
|
import { useState } from "react";
|
|
import { fromByteArray, toByteArray } from "base64-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<HTMLElement>,
|
|
VariantProps<typeof generatorVariants> {
|
|
devicePSKBitCount?: number;
|
|
value: string;
|
|
buttonText?: string;
|
|
changeEvent: Function;
|
|
|
|
}
|
|
|
|
const getBitString = (bitcount?: number) => {
|
|
if (bitcount == 32) {
|
|
return "32"
|
|
}
|
|
if (bitcount == 1) {
|
|
return "1"
|
|
}
|
|
return "16"
|
|
}
|
|
|
|
const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
|
|
(
|
|
{
|
|
devicePSKBitCount,
|
|
value,
|
|
buttonText,
|
|
variant,
|
|
changeEvent,
|
|
...props
|
|
},
|
|
ref,
|
|
) => {
|
|
|
|
return (
|
|
<>
|
|
<Input type="text" id="pskInput" value={value} />
|
|
<Select
|
|
value={getBitString(devicePSKBitCount)}
|
|
onValueChange={(e) => changeEvent(e)}
|
|
>
|
|
<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"
|
|
{...props}
|
|
>
|
|
{buttonText}
|
|
</Button>
|
|
</>
|
|
);
|
|
},
|
|
);
|
|
Generator.displayName = "Button";
|
|
|
|
export { Generator, generatorVariants };
|