From 815416bb41f18a562784d5b4d2ec664d025cd921 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 14 Jun 2022 17:21:07 +0100
Subject: [PATCH] allow sign in with enter key + create key listener hook

---
 nym-wallet/src/components/ConfirmPassword.tsx | 12 ++-
 nym-wallet/src/components/textfields.tsx      |  4 +-
 nym-wallet/src/hooks/useKeyPress.ts           | 28 +++++++
 .../src/pages/auth/pages/signin-mnemonic.tsx  | 35 ++++-----
 .../src/pages/auth/pages/signin-password.tsx  | 74 ++++++++++---------
 5 files changed, 96 insertions(+), 57 deletions(-)
 create mode 100644 nym-wallet/src/hooks/useKeyPress.ts

diff --git a/nym-wallet/src/components/ConfirmPassword.tsx b/nym-wallet/src/components/ConfirmPassword.tsx
index 610ed0d090..43a82be0f3 100644
--- a/nym-wallet/src/components/ConfirmPassword.tsx
+++ b/nym-wallet/src/components/ConfirmPassword.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, CircularProgress, DialogActions, DialogContent, Typography } from '@mui/material';
+import { useKeyPress } from 'src/hooks/useKeyPress';
 import { PasswordInput } from './textfields';
 
 export const ConfirmPassword = ({
@@ -15,6 +16,14 @@ export const ConfirmPassword = ({
 }) => {
   const [value, setValue] = useState('');
 
+  const enterKeyPressed = useKeyPress('Enter');
+
+  useEffect(() => {
+    if (enterKeyPressed && !!value.length && !isLoading) {
+      onConfirm(value);
+    }
+  }, [enterKeyPressed]);
+
   return (
     <>
       <DialogContent>
@@ -27,6 +36,7 @@ export const ConfirmPassword = ({
           onUpdatePassword={(pswrd) => setValue(pswrd)}
           placeholder="Confirm password"
           autoFocus
+          disabled={isLoading}
         />
       </DialogContent>
       <DialogActions sx={{ p: 3, pt: 0 }}>
diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index c03306d01c..c19d9db638 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/nym-wallet/src/components/textfields.tsx
@@ -39,8 +39,9 @@ export const PasswordInput: React.FC<{
   label?: string;
   placeholder?: string;
   autoFocus?: boolean;
+  disabled?: boolean;
   onUpdatePassword: (password: string) => void;
-}> = ({ password, label, placeholder, error, autoFocus, onUpdatePassword }) => {
+}> = ({ password, label, placeholder, error, autoFocus, disabled, onUpdatePassword }) => {
   const [showPassword, setShowPassword] = useState(false);
 
   return (
@@ -54,6 +55,7 @@ export const PasswordInput: React.FC<{
           onChange={(e) => onUpdatePassword(e.target.value)}
           type={showPassword ? 'input' : 'password'}
           autoFocus={autoFocus}
+          disabled={disabled}
           InputProps={{
             endAdornment: (
               <IconButton onClick={() => setShowPassword((show) => !show)}>
diff --git a/nym-wallet/src/hooks/useKeyPress.ts b/nym-wallet/src/hooks/useKeyPress.ts
new file mode 100644
index 0000000000..dffaca627a
--- /dev/null
+++ b/nym-wallet/src/hooks/useKeyPress.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+export function useKeyPress(targetKey: string): boolean {
+  // State for keeping track of whether key is pressed
+  const [keyPressed, setKeyPressed] = useState(false);
+  // If pressed key is our target key then set to true
+  function downHandler({ key }: { key: string }): void {
+    if (key === targetKey) {
+      setKeyPressed(true);
+    }
+  }
+  // If released key is our target key then set to false
+  const upHandler = ({ key }: { key: string }): void => {
+    if (key === targetKey) {
+      setKeyPressed(false);
+    }
+  };
+  // Add event listeners
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    // Remove event listeners on cleanup
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []); // Empty array ensures that effect is only run on mount and unmount
+  return keyPressed;
+}
diff --git a/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx b/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
index 0555ca1495..e1cb8d2d15 100644
--- a/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
+++ b/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
@@ -31,27 +31,24 @@ export const SignInMnemonic = () => {
     <Stack spacing={2} alignItems="center" minWidth="50%">
       <Subtitle subtitle="Enter a mnemonic to sign in" />
       <FormControl fullWidth>
-        <Stack spacing={2}>
-          <MnemonicInput mnemonic={mnemonic} onUpdateMnemonic={(mnc) => setMnemonic(mnc)} error={error} />
-          <Button
-            variant="contained"
-            size="large"
-            fullWidth
-            onClick={() => logIn({ type: 'mnemonic', value: mnemonic })}
-          >
-            Sign in with mnemonic
-          </Button>
-          <Box display="flex" justifyContent={passwordExists ? 'center' : 'space-between'}>
-            <Button color="inherit" onClick={() => handlePageChange('/existing-account')}>
-              Back
+        <form onSubmit={() => logIn({ type: 'mnemonic', value: mnemonic })}>
+          <Stack spacing={2}>
+            <MnemonicInput mnemonic={mnemonic} onUpdateMnemonic={(mnc) => setMnemonic(mnc)} error={error} />
+            <Button variant="contained" size="large" fullWidth type="submit">
+              Sign in with mnemonic
             </Button>
-            {!passwordExists && (
-              <Button color="info" onClick={() => handlePageChange('/confirm-mnemonic')}>
-                Create a password
+            <Box display="flex" justifyContent={passwordExists ? 'center' : 'space-between'}>
+              <Button color="inherit" onClick={() => handlePageChange('/existing-account')}>
+                Back
               </Button>
-            )}
-          </Box>
-        </Stack>
+              {!passwordExists && (
+                <Button color="info" onClick={() => handlePageChange('/confirm-mnemonic')}>
+                  Create a password
+                </Button>
+              )}
+            </Box>
+          </Stack>
+        </form>
       </FormControl>
     </Stack>
   );
diff --git a/nym-wallet/src/pages/auth/pages/signin-password.tsx b/nym-wallet/src/pages/auth/pages/signin-password.tsx
index ca441ee7e7..27b6394059 100644
--- a/nym-wallet/src/pages/auth/pages/signin-password.tsx
+++ b/nym-wallet/src/pages/auth/pages/signin-password.tsx
@@ -14,46 +14,48 @@ export const SignInPassword = () => {
     <Stack spacing={2} alignItems="center" minWidth="50%">
       <Subtitle subtitle="Enter a password to sign in" />
       <FormControl fullWidth>
-        <Stack spacing={2}>
-          <PasswordInput
-            label="Enter password"
-            password={password}
-            onUpdatePassword={(pswd) => setPassword(pswd)}
-            error={error}
-            autoFocus
-          />
-          <Button
-            variant="contained"
-            size="large"
-            fullWidth
-            onClick={() => logIn({ type: 'password', value: password })}
-          >
-            Sign in with password
-          </Button>
-          <Box display="flex" justifyContent="space-between">
+        <form onSubmit={() => logIn({ type: 'password', value: password })}>
+          <Stack spacing={2}>
+            <PasswordInput
+              label="Enter password"
+              password={password}
+              onUpdatePassword={(pswd) => setPassword(pswd)}
+              error={error}
+              autoFocus
+            />
             <Button
-              color="inherit"
-              disableElevation
-              onClick={() => {
-                setError(undefined);
-                navigate('/existing-account');
-              }}
+              variant="contained"
+              size="large"
+              fullWidth
+              onClick={() => logIn({ type: 'password', value: password })}
             >
-              Back
+              Sign in with password
             </Button>
+            <Box display="flex" justifyContent="space-between">
+              <Button
+                color="inherit"
+                disableElevation
+                onClick={() => {
+                  setError(undefined);
+                  navigate('/existing-account');
+                }}
+              >
+                Back
+              </Button>
 
-            <Button
-              color="info"
-              onClick={() => {
-                setError(undefined);
-                navigate('/sign-in-mnemonic');
-              }}
-              size="small"
-            >
-              Forgotten password?
-            </Button>
-          </Box>
-        </Stack>
+              <Button
+                color="info"
+                onClick={() => {
+                  setError(undefined);
+                  navigate('/sign-in-mnemonic');
+                }}
+                size="small"
+              >
+                Forgotten password?
+              </Button>
+            </Box>
+          </Stack>
+        </form>
       </FormControl>
     </Stack>
   );