From 4b532fc7f86305f8793464ef5113244a8fddf38f Mon Sep 17 00:00:00 2001 From: medentem Date: Wed, 2 Oct 2024 15:54:53 -0500 Subject: [PATCH 1/3] added password visibility toggle --- src/components/Form/FormInput.tsx | 13 ++++++++++++- src/components/Form/FormPasswordGenerator.tsx | 14 +++++++++++++- src/components/PageComponents/Channel.tsx | 3 ++- src/components/UI/Generator.tsx | 6 +++--- 4 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/Form/FormInput.tsx b/src/components/Form/FormInput.tsx index 13f77260..27c3828b 100644 --- a/src/components/Form/FormInput.tsx +++ b/src/components/Form/FormInput.tsx @@ -4,7 +4,9 @@ import type { } from "@components/Form/DynamicForm.js"; import { Input } from "@components/UI/Input.js"; import type { LucideIcon } from "lucide-react"; +import { Eye, EyeOff } from "lucide-react"; import type { ChangeEventHandler } from "react"; +import { useState } from "react"; import { Controller, type FieldValues } from "react-hook-form"; export interface InputFieldProps extends BaseFormBuilderProps { @@ -27,13 +29,22 @@ export function GenericInput({ disabled, field, }: GenericFormElementProps>) { + const [passwordShown, setPasswordShown] = useState(false); + const togglePasswordVisiblity = () => { + setPasswordShown(passwordShown ? false : true); + }; + return ( ( { diff --git a/src/components/Form/FormPasswordGenerator.tsx b/src/components/Form/FormPasswordGenerator.tsx index cf05f806..4410097d 100644 --- a/src/components/Form/FormPasswordGenerator.tsx +++ b/src/components/Form/FormPasswordGenerator.tsx @@ -4,6 +4,8 @@ import type { } from "@components/Form/DynamicForm.js"; import { Generator } from "@components/UI/Generator.js"; import type { ChangeEventHandler, MouseEventHandler } from "react"; +import { useState } from "react"; +import { Eye, EyeOff } from "lucide-react"; import { Controller, type FieldValues } from "react-hook-form"; export interface PasswordGeneratorProps extends BaseFormBuilderProps { @@ -21,13 +23,23 @@ export function PasswordGenerator({ field, disabled, }: GenericFormElementProps>) { + + const [passwordShown, setPasswordShown] = useState(false); + const togglePasswordVisiblity = () => { + setPasswordShown(passwordShown ? false : true); + }; + return ( ( { inputChange: inputChangeEvent, selectChange: selectChangeEvent, buttonClick: clickEvent, + hide: true, properties: { - value: pass, + value: pass }, }, { diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx index 7d589be4..f9db3f89 100644 --- a/src/components/UI/Generator.tsx +++ b/src/components/UI/Generator.tsx @@ -12,7 +12,7 @@ import { import type { LucideIcon } from "lucide-react"; export interface GeneratorProps extends React.BaseHTMLAttributes { - hide?: boolean; + type: "text" | "password"; devicePSKBitCount?: number; value: string; variant: "default" | "invalid"; @@ -31,7 +31,7 @@ export interface GeneratorProps extends React.BaseHTMLAttributes { const Generator = React.forwardRef( ( { - hide = true, + type, devicePSKBitCount, variant, value, @@ -68,7 +68,7 @@ const Generator = React.forwardRef( return ( <> Date: Wed, 2 Oct 2024 19:33:09 -0500 Subject: [PATCH 2/3] biome --- src/components/Form/FormInput.tsx | 12 ++++++++---- src/components/Form/FormPasswordGenerator.tsx | 15 +++++++++------ src/components/PageComponents/Channel.tsx | 2 +- src/index.css | 2 +- src/pages/Messages.tsx | 2 +- 5 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/components/Form/FormInput.tsx b/src/components/Form/FormInput.tsx index 27c3828b..ba9fb885 100644 --- a/src/components/Form/FormInput.tsx +++ b/src/components/Form/FormInput.tsx @@ -41,10 +41,14 @@ export function GenericInput({ render={({ field: { value, onChange, ...rest } }) => ( { diff --git a/src/components/Form/FormPasswordGenerator.tsx b/src/components/Form/FormPasswordGenerator.tsx index 4410097d..396d746c 100644 --- a/src/components/Form/FormPasswordGenerator.tsx +++ b/src/components/Form/FormPasswordGenerator.tsx @@ -3,9 +3,9 @@ import type { GenericFormElementProps, } from "@components/Form/DynamicForm.js"; import { Generator } from "@components/UI/Generator.js"; +import { Eye, EyeOff } from "lucide-react"; import type { ChangeEventHandler, MouseEventHandler } from "react"; import { useState } from "react"; -import { Eye, EyeOff } from "lucide-react"; import { Controller, type FieldValues } from "react-hook-form"; export interface PasswordGeneratorProps extends BaseFormBuilderProps { @@ -23,7 +23,6 @@ export function PasswordGenerator({ field, disabled, }: GenericFormElementProps>) { - const [passwordShown, setPasswordShown] = useState(false); const togglePasswordVisiblity = () => { setPasswordShown(passwordShown ? false : true); @@ -36,10 +35,14 @@ export function PasswordGenerator({ render={({ field: { value, ...rest } }) => ( { buttonClick: clickEvent, hide: true, properties: { - value: pass + value: pass, }, }, { diff --git a/src/index.css b/src/index.css index d9508cd3..8a35066d 100644 --- a/src/index.css +++ b/src/index.css @@ -99,4 +99,4 @@ img { -drag: none; -webkit-user-drag: none; -} \ No newline at end of file +} diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx index 4e7fbae9..bc624a76 100644 --- a/src/pages/Messages.tsx +++ b/src/pages/Messages.tsx @@ -76,7 +76,7 @@ export const MessagesPage = (): JSX.Element => { chatType === "broadcast" && currentChannel ? getChannelName(currentChannel) : chatType === "direct" && nodes.get(activeChat) - ? nodes.get(activeChat)?.user?.longName ?? nodeHex + ? (nodes.get(activeChat)?.user?.longName ?? nodeHex) : "Loading..." }`} actions={ From d69976454688e382f70e168dfa20d23f1d78149f Mon Sep 17 00:00:00 2001 From: Hunter Thornsberry Date: Wed, 2 Oct 2024 22:07:45 -0400 Subject: [PATCH 3/3] biome --- src/components/Form/FormInput.tsx | 8 +++++--- src/components/Form/FormPasswordGenerator.tsx | 2 +- src/pages/Messages.tsx | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Form/FormInput.tsx b/src/components/Form/FormInput.tsx index ba9fb885..c4e5001d 100644 --- a/src/components/Form/FormInput.tsx +++ b/src/components/Form/FormInput.tsx @@ -31,7 +31,7 @@ export function GenericInput({ }: GenericFormElementProps>) { const [passwordShown, setPasswordShown] = useState(false); const togglePasswordVisiblity = () => { - setPasswordShown(passwordShown ? false : true); + setPasswordShown(!passwordShown); }; return ( @@ -40,9 +40,11 @@ export function GenericInput({ control={control} render={({ field: { value, onChange, ...rest } }) => ( ({ }: GenericFormElementProps>) { const [passwordShown, setPasswordShown] = useState(false); const togglePasswordVisiblity = () => { - setPasswordShown(passwordShown ? false : true); + setPasswordShown(!passwordShown); }; return ( diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx index bc624a76..4e7fbae9 100644 --- a/src/pages/Messages.tsx +++ b/src/pages/Messages.tsx @@ -76,7 +76,7 @@ export const MessagesPage = (): JSX.Element => { chatType === "broadcast" && currentChannel ? getChannelName(currentChannel) : chatType === "direct" && nodes.get(activeChat) - ? (nodes.get(activeChat)?.user?.longName ?? nodeHex) + ? nodes.get(activeChat)?.user?.longName ?? nodeHex : "Loading..." }`} actions={