Add PasswordInput component (#1090)

* feat: add PasswordHider

* feat: add PasswordInput

* fix typo and require requirement

* merge state

* use ...props and lnbits password required

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>

components/form.js

@@ -29,6 +29,8 @@ import { AWS_S3_URL_REGEXP } from '@/lib/constants'
 import { whenRange } from '@/lib/time'
 import { useFeeButton } from './fee-button'
 import Thumb from '@/svgs/thumb-up-fill.svg'
+import Eye from '@/svgs/eye-fill.svg'
+import EyeClose from '@/svgs/eye-close-line.svg'
 import Info from './info'
 
 export function SubmitButton ({
@@ -1052,5 +1054,35 @@ function Client (Component) {
   }
 }
 
+function PasswordHider ({ onClick, showPass }) {
+  return (
+    <InputGroup.Text
+      style={{ cursor: 'pointer' }}
+      onClick={onClick}
+    >
+      {!showPass
+        ? <EyeClose
+            fill='var(--bs-body-color)' height={20} width={20}
+          />
+        : <Eye
+            fill='var(--bs-body-color)' height={20} width={20}
+          />}
+    </InputGroup.Text>
+  )
+}
+
+export function PasswordInput ({ newPass, ...props }) {
+  const [showPass, setShowPass] = useState(false)
+
+  return (
+    <ClientInput
+      {...props}
+      type={showPass ? 'text' : 'password'}
+      autoComplete={newPass ? 'new-password' : 'current-password'}
+      append={<PasswordHider showPass={showPass} onClick={() => setShowPass(!showPass)} />}
+    />
+  )
+}
+
 export const ClientInput = Client(Input)
 export const ClientCheckbox = Client(Checkbox)

pages/settings/wallets/lnbits.js

@@ -1,5 +1,5 @@
 import { getGetServerSideProps } from '@/api/ssrApollo'
-import { Form, ClientInput, ClientCheckbox } from '@/components/form'
+import { Form, ClientInput, ClientCheckbox, PasswordInput } from '@/components/form'
 import { CenterLayout } from '@/components/layout'
 import { WalletButtonBar, WalletCard } from '@/components/wallet-card'
 import { lnbitsSchema } from '@/lib/validate'
@@ -51,12 +51,12 @@ export default function LNbits () {
           required
           autoFocus
         />
-        <ClientInput
+        <PasswordInput
           initialValue={adminKey}
-          type='password'
-          autoComplete='false'
           label='admin key'
           name='adminKey'
+          newPass
+          required
         />
         <ClientCheckbox
           disabled={!enabled || isDefault || enabledProviders.length === 1}

pages/settings/wallets/nwc.js

@@ -1,5 +1,5 @@
 import { getGetServerSideProps } from '@/api/ssrApollo'
-import { Form, ClientInput, ClientCheckbox } from '@/components/form'
+import { Form, ClientCheckbox, PasswordInput } from '@/components/form'
 import { CenterLayout } from '@/components/layout'
 import { WalletButtonBar, WalletCard } from '@/components/wallet-card'
 import { nwcSchema } from '@/lib/validate'
@@ -43,12 +43,11 @@ export default function NWC () {
           }
         }}
       >
-        <ClientInput
+        <PasswordInput
           initialValue={nwcUrl}
           label='connection'
           name='nwcUrl'
-          type='password'
+          newPass
-          autoComplete='new-password'
           required
           autoFocus
         />