From 4b532fc7f86305f8793464ef5113244a8fddf38f Mon Sep 17 00:00:00 2001
From: medentem <info@medentem.com>
Date: Wed, 2 Oct 2024 15:54:53 -0500
Subject: [PATCH] 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<T> extends BaseFormBuilderProps<T> {
@@ -27,13 +29,22 @@ export function GenericInput<T extends FieldValues>({
   disabled,
   field,
 }: GenericFormElementProps<T, InputFieldProps<T>>) {
+  const [passwordShown, setPasswordShown] = useState(false);
+  const togglePasswordVisiblity = () => {
+    setPasswordShown(passwordShown ? false : true);
+  };
+
   return (
     <Controller
       name={field.name}
       control={control}
       render={({ field: { value, onChange, ...rest } }) => (
         <Input
-          type={field.type}
+          type={field.type == "password" && passwordShown ? "text" : field.type}
+          action={field.type == "password" ? {
+            icon: passwordShown ? EyeOff : Eye,
+            onClick: togglePasswordVisiblity
+          } : undefined}
           step={field.properties?.step}
           value={field.type === "number" ? Number.parseFloat(value) : value}
           onChange={(e) => {
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<T> extends BaseFormBuilderProps<T> {
@@ -21,13 +23,23 @@ export function PasswordGenerator<T extends FieldValues>({
   field,
   disabled,
 }: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
+  
+  const [passwordShown, setPasswordShown] = useState(false);
+  const togglePasswordVisiblity = () => {
+    setPasswordShown(passwordShown ? false : true);
+  };
+
   return (
     <Controller
       name={field.name}
       control={control}
       render={({ field: { value, ...rest } }) => (
         <Generator
-          hide={field.hide}
+          type={field.hide && !passwordShown ? "password" : "text"}
+          action={field.hide ? {
+            icon: passwordShown ? EyeOff : Eye,
+            onClick: togglePasswordVisiblity
+          } : undefined}
           devicePSKBitCount={field.devicePSKBitCount}
           bits={field.bits}
           inputChange={field.inputChange}
diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx
index 293a5cad..d10fbaa2 100644
--- a/src/components/PageComponents/Channel.tsx
+++ b/src/components/PageComponents/Channel.tsx
@@ -131,8 +131,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               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<HTMLElement> {
-  hide?: boolean;
+  type: "text" | "password";
   devicePSKBitCount?: number;
   value: string;
   variant: "default" | "invalid";
@@ -31,7 +31,7 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
 const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
   (
     {
-      hide = true,
+      type,
       devicePSKBitCount,
       variant,
       value,
@@ -68,7 +68,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
     return (
       <>
         <Input
-          type={hide ? "password" : "text"}
+          type={type}
           id="pskInput"
           variant={variant}
           value={value}