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 1/5] 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} />;
 

From 777b172a72af920ff5343c6ece3d514ba76ae8a1 Mon Sep 17 00:00:00 2001
From: Ktbch <140395978+Ktbch@users.noreply.github.com>
Date: Thu, 9 May 2024 13:44:36 +0200
Subject: [PATCH 2/5] Update _RenderFormInput.tsx

re-design  of the  Update _RenderFormInput.tsx
---
 .../SchemaForm/_RenderFormInput.tsx           | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/frontend/components/SchemaForm/_RenderFormInput.tsx b/src/frontend/components/SchemaForm/_RenderFormInput.tsx
index bc4fc0260..8615319f1 100644
--- a/src/frontend/components/SchemaForm/_RenderFormInput.tsx
+++ b/src/frontend/components/SchemaForm/_RenderFormInput.tsx
@@ -11,6 +11,9 @@ import { FormSelectButton } from "frontend/design-system/components/Form/FormSel
 import { FormRichTextArea } from "frontend/design-system/components/Form/FormRichTextArea";
 import { useExtendRenderFormInputProps } from "frontend/views/data/portal";
 import { useLingui } from "@lingui/react";
+import { msg } from "@lingui/macro";
+import { useToggle } from "frontend/hooks/state/useToggleState";
+import { FormPasswordInput } from "frontend/design-system/components/Form/FormPasswordInput";
 import { IRenderFormInputProps } from "./types";
 
 export function RenderFormInput(props: IRenderFormInputProps) {
@@ -28,7 +31,7 @@ export function RenderFormInput(props: IRenderFormInputProps) {
     onChange,
   } = useExtendRenderFormInputProps(props);
   const { _ } = useLingui();
-  const isPasswordReveal = useToggle();
+  const showPassword = useToggle();
   const formProps = {
     label,
     required,
@@ -74,37 +77,34 @@ export function RenderFormInput(props: IRenderFormInputProps) {
     case "url":
     case "color":
       return <FormInput type={type} {...formProps} />;
+    case "number":
+      return <FormNumberInput {...formProps} />;
     case "password":
-    return (
-        <FormInput
-          type={isPasswordReveal.isOn ? "text" : "password"}
+      return (
+        <FormPasswordInput
+          type={showPassword.isOn ? "text" : "password"}
           {...formProps}
           rightActions={
-            formProps.input.value
+            showPassword.isOn
               ? [
                   {
                     systemIcon: "Eye",
-                    action: () => {
-                      isPasswordReveal.toggle();
+                    action() {
+                      showPassword.toggle();
                     },
-                    label: msg`show Password`,
+                    label: msg`Hide Password`,
+                  },
+                ]
+              : [
+                  {
+                    systemIcon: "EyeOff",
+                    action: showPassword.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} />;
-
     case "datetime-local":
       return <FormDateInput {...formProps} />;
 

From 2179048eff374faac412b785a40969f1c4e07be8 Mon Sep 17 00:00:00 2001
From: Ktbch <140395978+Ktbch@users.noreply.github.com>
Date: Thu, 9 May 2024 13:47:25 +0200
Subject: [PATCH 3/5] Create FormPasswordInput.tsx

---
 .../components/Form/FormPasswordInput.tsx     | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/frontend/design-system/components/Form/FormPasswordInput.tsx

diff --git a/src/frontend/design-system/components/Form/FormPasswordInput.tsx b/src/frontend/design-system/components/Form/FormPasswordInput.tsx
new file mode 100644
index 000000000..f34748b00
--- /dev/null
+++ b/src/frontend/design-system/components/Form/FormPasswordInput.tsx
@@ -0,0 +1,25 @@
+import { useLingui } from "@lingui/react";
+import { ISharedFormInput } from "./_types";
+import { generateFormArias, wrapLabelAndError } from "./_wrapForm";
+import { Input } from "./Styles";
+
+interface IFormInput extends ISharedFormInput {
+  type?: "password" | "text";
+}
+
+export const FormPasswordInput = (formInput: IFormInput) => {
+  const { input, type, disabled, meta, placeholder, ...rest } = formInput;
+  const { _ } = useLingui();
+  return wrapLabelAndError(
+    <Input
+      {...input}
+      {...rest}
+      {...generateFormArias(meta)}
+      type={type}
+      id={formInput.input.name}
+      placeholder={placeholder ? _(placeholder) : null}
+      disabled={disabled}
+    />,
+    formInput
+  );
+};

From 8d717544da73fcdd7d52330a429fab67fa9cd19a Mon Sep 17 00:00:00 2001
From: Ktbch <140395978+Ktbch@users.noreply.github.com>
Date: Thu, 9 May 2024 13:55:21 +0200
Subject: [PATCH 4/5] Update Icons.tsx

---
 src/shared/constants/Icons.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/constants/Icons.tsx b/src/shared/constants/Icons.tsx
index c2d0f95cc..75cf2a78d 100644
--- a/src/shared/constants/Icons.tsx
+++ b/src/shared/constants/Icons.tsx
@@ -69,6 +69,7 @@ export const SystemIcons = {
   Book: `<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />`,
   Terminal: `<polyline points="4 17 10 11 4 5" /><line x1="12" x2="20" y1="19" y2="19" />`,
   Eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" />`,
+  EyeOff: `<path d="M17.94 17.94A9.995 9.995 0 0112.009 20H12c-7 0-11-8-11-8a18.605 18.605 0 015.017-5.908l.043-.032M9.9 4.24A8.865 8.865 0 0111.979 4h.023-.001c7 0 11 8 11 8a18.62 18.62 0 01-2.182 3.217l.022-.027m-6.721-1.07a3 3 0 11-4.242-4.238l.002-.002M1 1l22 22" />`,
   Columns: `<path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18" />`,
   Thrash: `<polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" />`,
   Copy: `<rect height="13" rx="2" ry="2" width="13" x="9" y="9" />

From 1adf8d2749c0bed7e99f0cfd9b7ec6298673a9fc Mon Sep 17 00:00:00 2001
From: Ktbch <140395978+Ktbch@users.noreply.github.com>
Date: Thu, 9 May 2024 14:20:30 +0200
Subject: [PATCH 5/5] Update FormPasswordInput.tsx

---
 .../design-system/components/Form/FormPasswordInput.tsx       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/frontend/design-system/components/Form/FormPasswordInput.tsx b/src/frontend/design-system/components/Form/FormPasswordInput.tsx
index f34748b00..a6ff4849c 100644
--- a/src/frontend/design-system/components/Form/FormPasswordInput.tsx
+++ b/src/frontend/design-system/components/Form/FormPasswordInput.tsx
@@ -3,9 +3,7 @@ import { ISharedFormInput } from "./_types";
 import { generateFormArias, wrapLabelAndError } from "./_wrapForm";
 import { Input } from "./Styles";
 
-interface IFormInput extends ISharedFormInput {
-  type?: "password" | "text";
-}
+interface IFormInput extends ISharedFormInput {}
 
 export const FormPasswordInput = (formInput: IFormInput) => {
   const { input, type, disabled, meta, placeholder, ...rest } = formInput;