From 9b58e13bac2d3625b4f870fc976a03ff3d100b08 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 8 Oct 2023 18:52:20 +0300
Subject: [PATCH] feat: hide passwords while typing

---
 .../KeyGeneration/KeystoreFiles.tsx            | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles.tsx
index 7548d7b7..ae64c732 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles.tsx
@@ -8,6 +8,8 @@ const KeystoreFiles = () => {
   const [confirmEncryptedPassword, setConfirmEncryptedPassword] = useState('')
   const [encryptedPasswordError, setEncryptedPasswordError] = useState(false)
   const [confirmEncryptedPasswordError, setConfirmEncryptedPasswordError] = useState(false)
+  const [displayEncryptedPassword, setDisplayEncryptedPassword] = useState('')
+  const [displayConfirmEncryptedPassword, setDisplayConfirmEncryptedPassword] = useState('')
 
   const generateKeystoreFilesHandler = () => {
     if (
@@ -25,11 +27,15 @@ const KeystoreFiles = () => {
   }
 
   const changeEncryptedPasswordHandler = (e: any) => {
-    setEncryptedPassword(e.target.value)
+    const password = e.target.value
+    setEncryptedPassword(password)
+    setDisplayEncryptedPassword(getHidedPassword(password.length))
   }
 
   const changeConfirmEncryptedPasswordHandler = (e: any) => {
-    setConfirmEncryptedPassword(e.target.value)
+    const password = e.target.value
+    setConfirmEncryptedPassword(password)
+    setDisplayConfirmEncryptedPassword(getHidedPassword(password.length))
   }
 
   const clearEncryptedPasswordHandler = () => {
@@ -49,6 +55,10 @@ const KeystoreFiles = () => {
     element.click()
   }
 
+  const getHidedPassword = (passwordLength: number) => {
+    return '*'.repeat(passwordLength)
+  }
+
   return (
     <YStack space={'$4'}>
       <XStack space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
@@ -68,7 +78,7 @@ const KeystoreFiles = () => {
                 />
               }
               error={encryptedPasswordError}
-              value={encryptedPassword}
+              value={displayEncryptedPassword}
               onChange={changeEncryptedPasswordHandler}
             />
           </YStack>
@@ -87,7 +97,7 @@ const KeystoreFiles = () => {
                 />
               }
               error={confirmEncryptedPasswordError}
-              value={confirmEncryptedPassword}
+              value={displayConfirmEncryptedPassword}
               onChange={changeConfirmEncryptedPasswordHandler}
             />
           </YStack>