From 620136d18712a402297e8580286423e8863de5b7 Mon Sep 17 00:00:00 2001
From: tolgahan-arikan <tolgahan.arikan@gmail.com>
Date: Mon, 11 Nov 2024 17:04:48 +0300
Subject: [PATCH] Unlock by pressing enter (#34)

---
 src/components/PasswordInput.tsx | 5 ++++-
 src/routes/Landing.tsx           | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/PasswordInput.tsx b/src/components/PasswordInput.tsx
index 65c1228..91bdc22 100644
--- 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,6 +8,7 @@ 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
 }
 
@@ -15,6 +16,7 @@ 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
index d9cbcb6..a0ba323 100644
--- 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)