Fix/autofocusing (#1408)

* useConditionalAutofocus hook

* allow password submission immediately if no errors

* empty the mouth

* increase timeout so that the styling isnt messed up, renaming, apply useEffect

* tidy up, add back delay param

Author: Jamchello

app/dash/Accounts/Add/Components/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 
+import useFocusableRef from '../../../../../resources/Hooks/useFocusableRef'
 import RingIcon from '../../../../../resources/Components/RingIcon'
 import { ConfirmPassword, CreatePassword } from '../../../../../resources/Components/Password'
 import link from '../../../../../resources/link'
@@ -18,7 +19,7 @@ const navForward = async (newAccountType, accountData) =>
 
 const removeLineBreaks = (str) => str.replace(/(\r\n|\n|\r)/gm, '')
 
-const AddHotAccountWrapper = ({ children, title, svgName, summary, intro, index }) => {
+const AddHotAccountWrapper = ({ children, title, svgName, summary, index }) => {
   return (
     <div className={'addAccountItem addAccountItemSmart addAccountItemAdding'}>
       <div className='addAccountItemBar addAccountItemHot' />
@@ -46,9 +47,9 @@ const AddHotAccountWrapper = ({ children, title, svgName, summary, intro, index
   )
 }
 
-const EnterSecret = ({ newAccountType, validateSecret, title }) => {
+const EnterSecret = ({ newAccountType, validateSecret, title, autofocus }) => {
   const EMPTY_STATE = `Enter ${title}`
-  const inputRef = useRef(null)
+  const inputRef = useFocusableRef(autofocus, 100)
   const [error, setError] = useState(EMPTY_STATE)
 
   const resetError = () => setError(EMPTY_STATE)
@@ -156,10 +157,10 @@ export function AddHotAccount({
     })
 
   const steps = [
-    <EnterSecret key={0} {...{ validateSecret, title, newAccountType }} />,
-    <CreatePassword key={1} onCreate={onCreate} />,
-    <ConfirmPassword key={2} password={password} onConfirm={onConfirm} />,
-    <Error key={3} {...{ error }} />
+    <EnterSecret key={0} {...{ validateSecret, title, newAccountType, autofocus: viewIndex === 0 }} />,
+    <CreatePassword key={1} onCreate={onCreate} autofocus={viewIndex === 1} />,
+    <ConfirmPassword key={2} password={password} onConfirm={onConfirm} autofocus={viewIndex === 2} />,
+    <Error key={3} error={error} />
   ]
 
   return (

resources/Components/Password/index.js

@@ -1,14 +1,16 @@
-import React from 'react'
-import { useRef, useState } from 'react'
+import React, { useRef } from 'react'
+import { useState } from 'react'
 import zxcvbn from 'zxcvbn'
+import useFocusableRef from '../../Hooks/useFocusableRef'
 
 import { debounce } from '../../utils'
 
 const NO_PASSWORD_ENTERED = 'Enter password'
 
-const PasswordInput = ({ getError, next, title, buttonText }) => {
+const PasswordInput = ({ getError: getInputError, next, title, buttonText, autofocus }) => {
   const [error, setError] = useState(NO_PASSWORD_ENTERED)
-  const inputRef = useRef(null)
+  const inputRef = useFocusableRef(autofocus)
+  const [disabled, setDisabled] = useState(false)
 
   const resetError = () => setError(NO_PASSWORD_ENTERED)
 
@@ -22,12 +24,20 @@ const PasswordInput = ({ getError, next, title, buttonText }) => {
     setTimeout(clear, 600)
   }
 
-  const validateInput = debounce((e) => {
-    const value = e.target.value
-    if (!value) return resetError()
-    const err = getError(value)
-    setError(err || '')
-  }, 300)
+  const getError = () =>
+    inputRef.current.value ? getInputError(inputRef.current.value) || '' : NO_PASSWORD_ENTERED
+
+  const validateInput = (e) => {
+    const err = getError()
+    if (err) {
+      setDisabled(true)
+      return debounce(() => {
+        setDisabled(false)
+        setError(getError())
+      }, 300)()
+    }
+    return setError(err)
+  }
 
   return (
     <div className='addAccountItemOptionSetupFrame'>
@@ -42,7 +52,7 @@ const PasswordInput = ({ getError, next, title, buttonText }) => {
           ref={inputRef}
           onChange={validateInput}
           onKeyDown={(e) => {
-            if (!error && e.key === 'Enter') handleSubmit()
+            if (!error && e.key === 'Enter' && !disabled) handleSubmit()
           }}
         />
       </div>
@@ -52,15 +62,15 @@ const PasswordInput = ({ getError, next, title, buttonText }) => {
           {error}
         </div>
       ) : (
-        <div role='button' className='addAccountItemOptionSubmit' onClick={() => handleSubmit()}>
+        <div role='button' className='addAccountItemOptionSubmit' onClick={() => !disabled && handleSubmit()}>
           {buttonText}
         </div>
       )}
     </div>
   )
 }
 
-export const CreatePassword = ({ onCreate }) => {
+export const CreatePassword = ({ onCreate, autofocus }) => {
   const getError = (password) => {
     if (password.length < 12) return 'PASSWORD MUST BE 12 OR MORE CHARACTERS'
     const {
@@ -72,13 +82,29 @@ export const CreatePassword = ({ onCreate }) => {
     return (warning || 'PLEASE ENTER A STRONGER PASSWORD').toUpperCase()
   }
 
-  return <PasswordInput getError={getError} next={onCreate} title='Create Password' buttonText='Continue' />
+  return (
+    <PasswordInput
+      getError={getError}
+      next={onCreate}
+      title='Create Password'
+      buttonText='Continue'
+      autofocus={autofocus}
+    />
+  )
 }
 
-export const ConfirmPassword = ({ password, onConfirm }) => {
+export const ConfirmPassword = ({ password, onConfirm, autofocus }) => {
   const getError = (confirmedPassword) => {
     if (password !== confirmedPassword) return 'PASSWORDS DO NOT MATCH'
   }
 
-  return <PasswordInput getError={getError} next={onConfirm} title='Confirm Password' buttonText='Create' />
+  return (
+    <PasswordInput
+      getError={getError}
+      next={onConfirm}
+      title='Confirm Password'
+      buttonText='Create'
+      autofocus={autofocus}
+    />
+  )
 }

resources/Hooks/useFocusableRef.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react'
+
+const useFocusableRef = (focus, delay = 900) => {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (focus) {
+      const timeout = setTimeout(() => ref.current && ref.current.focus(), delay)
+      return () => clearTimeout(timeout)
+    }
+  })
+
+  return ref
+}
+
+export default useFocusableRef