From ed63b26be9ed84bbb615e0d16bfcc97b5e07ee73 Mon Sep 17 00:00:00 2001
From: Ktbch <140395978+Ktbch@users.noreply.github.com>
Date: Tue, 7 May 2024 17:46:14 +0200
Subject: [PATCH] Update _RenderFormInput.tsx featue Ehancement

implementation of Show password functionality
on the auth page
---
 .../SchemaForm/_RenderFormInput.tsx           | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/SchemaForm/_RenderFormInput.tsx b/src/frontend/components/SchemaForm/_RenderFormInput.tsx
index f7c4bdf3d..bc4fc0260 100644
--- a/src/frontend/components/SchemaForm/_RenderFormInput.tsx
+++ b/src/frontend/components/SchemaForm/_RenderFormInput.tsx
@@ -28,6 +28,7 @@ export function RenderFormInput(props: IRenderFormInputProps) {
     onChange,
   } = useExtendRenderFormInputProps(props);
   const { _ } = useLingui();
+  const isPasswordReveal = useToggle();
   const formProps = {
     label,
     required,
@@ -70,10 +71,37 @@ export function RenderFormInput(props: IRenderFormInputProps) {
 
   switch (type) {
     case "email":
-    case "password":
     case "url":
     case "color":
       return <FormInput type={type} {...formProps} />;
+    case "password":
+    return (
+        <FormInput
+          type={isPasswordReveal.isOn ? "text" : "password"}
+          {...formProps}
+          rightActions={
+            formProps.input.value
+              ? [
+                  {
+                    systemIcon: "Eye",
+                    action: () => {
+                      isPasswordReveal.toggle();
+                    },
+                    label: msg`show Password`,
+                  },
+                ]
+              : []
+          }
+          input={{
+            ...formProps.input,
+            onChange: (val) => {
+              formProps.input.onChange(val);
+              if (!formProps.input.value) isPasswordReveal.off();
+            },
+          }}
+        />
+      );
+
     case "number":
       return <FormNumberInput {...formProps} />;