From 1ae879342a42dfb346c4c14c31de1d2f1fdd1b51 Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Sun, 28 Jul 2024 15:09:11 -0400 Subject: [PATCH] added password generator --- src/components/Form/DynamicFormField.tsx | 11 +- src/components/Form/FormPasswordGenerator.tsx | 39 ++++++ src/components/PageComponents/Channel.tsx | 4 +- src/components/UI/Button.tsx | 2 + src/components/UI/Generator.tsx | 111 ++++++++++++++++++ 5 files changed, 164 insertions(+), 3 deletions(-) create mode 100644 src/components/Form/FormPasswordGenerator.tsx create mode 100644 src/components/UI/Generator.tsx diff --git a/src/components/Form/DynamicFormField.tsx b/src/components/Form/DynamicFormField.tsx index fc2f7575..6f517e95 100644 --- a/src/components/Form/DynamicFormField.tsx +++ b/src/components/Form/DynamicFormField.tsx @@ -10,12 +10,17 @@ 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 = | InputFieldProps | SelectFieldProps - | ToggleFieldProps; + | ToggleFieldProps + | PasswordGeneratorProps; export interface DynamicFormFieldProps { field: FieldProps; @@ -44,6 +49,10 @@ export function DynamicFormField({ return ( ); + case "passwordGenerator": + return ( + + ) case "multiSelect": return
tmp
; } diff --git a/src/components/Form/FormPasswordGenerator.tsx b/src/components/Form/FormPasswordGenerator.tsx new file mode 100644 index 00000000..eb30dc1a --- /dev/null +++ b/src/components/Form/FormPasswordGenerator.tsx @@ -0,0 +1,39 @@ +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 extends BaseFormBuilderProps { + type: "passwordGenerator"; + } + + export function PasswordGenerator({ + control, + field, + }: GenericFormElementProps>) { + const [password, createPassword] = useState(""); + + const generate = () => { + let generatedPass = "VHl1OTVpY7TAly0jGF0X2A=="; + return generatedPass + } + + return ( + ( + + )} + /> + ); + } + \ No newline at end of file diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx index 464d04e7..9b5bb9f2 100644 --- a/src/components/PageComponents/Channel.tsx +++ b/src/components/PageComponents/Channel.tsx @@ -76,10 +76,10 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { }, }, { - type: "password", + type: "passwordGenerator", name: "settings.psk", label: "pre-Shared Key", - description: "16, or 32 bytes", + description: "256, 128, or 8 bit PSKs allowed", properties: { // act }, diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx index cea50fea..f903f25e 100644 --- a/src/components/UI/Button.tsx +++ b/src/components/UI/Button.tsx @@ -12,6 +12,8 @@ const buttonVariants = cva( "bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900", 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: diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx new file mode 100644 index 00000000..64b78bee --- /dev/null +++ b/src/components/UI/Generator.tsx @@ -0,0 +1,111 @@ +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 { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@components/UI/Select.js"; +import { useState } from "react"; + +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 + { + passwordValue?: string; + textValue?: string; + } + +const Generator = React.forwardRef( + ({ passwordValue, textValue, className, variant, size, ...props }, ref) => { + const [pass, setPass] = useState(""); + const [bitCount, setBits] = useState("bit256"); + + const generate = () => { + let generated = "thisisapass"; + if (bitCount == "bit8") { + generated = "8bitpassword" + } + if (bitCount == "bit128") { + generated = "128bitpassword" + } + if (bitCount == "bit256") { + generated = "256bitpassword" + } + return generated; + }; + + return ( + <> + + + + + ); + }, +); +Generator.displayName = "Button"; + +export { Generator, generatorVariants };