added password visibility toggle

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) => {