From 4d8f85508a1042ce338e00e38fb5069442b97b9d Mon Sep 17 00:00:00 2001
From: Riccardo Balbo <riccardo0blb@gmail.com>
Date: Tue, 5 Nov 2024 17:16:27 +0100
Subject: [PATCH 1/2] Use -webkit-text-security to hide passphrase

---
 components/form.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/form.js b/components/form.js
index 1d37cdc4d..7f11e19d7 100644
--- a/components/form.js
+++ b/components/form.js
@@ -1188,17 +1188,18 @@ export function PasswordInput ({ newPass, qr, copy, readOnly, append, value, ...
     )
   }, [showPass, copy, field?.value, qr, readOnly, append])
 
-  const maskedValue = !showPass && props.as === 'textarea' ? field?.value?.replace(/./g, '•') : field?.value
-
   return (
     <ClientInput
       {...props}
+      {
+        ...(!showPass && props.as === 'textarea') ? { style: { '-webkit-text-security': 'disc' } } : {}
+      }
       className={styles.passwordInput}
       type={showPass ? 'text' : 'password'}
       autoComplete={newPass ? 'new-password' : 'current-password'}
       readOnly={readOnly}
       append={props.as === 'textarea' ? undefined : Append}
-      value={maskedValue}
+      value={field?.value}
       under={props.as === 'textarea'
         ? (
           <div className='mt-2 d-flex justify-content-end' style={{ gap: '8px' }}>

From 49caec5b63b9bc92416b591954bd344b063f0e42 Mon Sep 17 00:00:00 2001
From: Riccardo Balbo <riccardo0blb@gmail.com>
Date: Tue, 5 Nov 2024 17:29:20 +0100
Subject: [PATCH 2/2] do not override passed style

---
 components/form.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/form.js b/components/form.js
index 7f11e19d7..95b7324e1 100644
--- a/components/form.js
+++ b/components/form.js
@@ -1188,12 +1188,18 @@ export function PasswordInput ({ newPass, qr, copy, readOnly, append, value, ...
     )
   }, [showPass, copy, field?.value, qr, readOnly, append])
 
+  const style = props.style ? { ...props.style } : {}
+  if (props.as === 'textarea') {
+    if (!showPass) {
+      style.WebkitTextSecurity = 'disc'
+    } else {
+      if (style.WebkitTextSecurity) delete style.WebkitTextSecurity
+    }
+  }
   return (
     <ClientInput
       {...props}
-      {
-        ...(!showPass && props.as === 'textarea') ? { style: { '-webkit-text-security': 'disc' } } : {}
-      }
+      style={style}
       className={styles.passwordInput}
       type={showPass ? 'text' : 'password'}
       autoComplete={newPass ? 'new-password' : 'current-password'}