Unlock by pressing enter (#34)

0xsequence · Nov 11, 2024 · 620136d · 620136d
1 parent 7475e0f
commit 620136d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/PasswordInput.tsx b/src/components/PasswordInput.tsx
@@ -1,5 +1,5 @@
 import { TextInput } from '@0xsequence/design-system'
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent, KeyboardEvent, useState } from 'react'
 
 import passwordEyeOff from '../assets/images/password-eye-off.svg'
 import passwordEye from '../assets/images/password-eye.svg'
@@ -8,13 +8,15 @@ interface TextInputWrapperProps {
   label: string
   labelLocation?: 'top' | 'left' | 'right' | 'bottom' // Optional prop for label location
   value: string
+  onKeyPress: (ev: KeyboardEvent<HTMLInputElement>) => void
   onChange: (ev: ChangeEvent<HTMLInputElement>) => void
 }
 
 export const PasswordInput: React.FC<TextInputWrapperProps> = ({
   label,
   labelLocation = 'top',
   value,
+  onKeyPress,
   onChange
 }) => {
   const [showPassword, setShowPassword] = useState(false)
@@ -31,6 +33,7 @@ export const PasswordInput: React.FC<TextInputWrapperProps> = ({
         label={label}
         labelLocation={labelLocation}
         value={value}
+        onKeyPress={onKeyPress}
         onChange={onChange}
       />
       <button

diff --git a/src/routes/Landing.tsx b/src/routes/Landing.tsx
@@ -128,6 +128,11 @@ function Landing() {
                   <PasswordInput
                     label="Password"
                     value={password}
+                    onKeyPress={ev => {
+                      if (ev.key === 'Enter') {
+                        handleUnlock()
+                      }
+                    }}
                     onChange={(ev: ChangeEvent<HTMLInputElement>) => {
                       setPassword(ev.target.value)
                       setWrongPassword(false)