fix(seed): only highlight seed after success

Ensure that the seed confirmation input fields only turn green when the
user inputs the specific word correctly

Fix #938

app/components/Onboarding/Steps/SeedConfirm.js

@@ -40,6 +40,19 @@ class SeedConfirm extends React.Component {
     this.formApi = formApi
   }
 
+  handleWordChange = (value, fieldIndex, wordIndex) => {
+    // If the word has been determined as valid, mark the field touched to trigger field highlighting.
+    const error = this.validateWord(wordIndex, value)
+    if (!error) {
+      this.formApi.setTouched(`word${fieldIndex}`, true)
+    }
+    // Otherwise reset the field state to prevent highlightning as valid.
+    else {
+      this.formApi.setTouched(`word${fieldIndex}`, false)
+      this.formApi.setError(`word${fieldIndex}`, null)
+    }
+  }
+
   validateWord = (index, word) => {
     const { seed } = this.props
     return !word || word !== seed[index] ? 'incorrect' : null
@@ -65,48 +78,42 @@ class SeedConfirm extends React.Component {
         onSubmit={onSubmit}
         onSubmitFailure={onSubmitFailure}
       >
-        {({ formState }) => {
+        <Header
-          const shouldValidateInline = formState.submits > 0
+          title={<FormattedMessage {...messages.retype_seed_title} />}
-          return (
+          subtitle={
-            <>
+            <FormattedMessage
-              <Header
+              {...messages.retype_seed_description}
-                title={<FormattedMessage {...messages.retype_seed_title} />}
+              values={{
-                subtitle={
+                word1: seedWordIndexes[0],
-                  <FormattedMessage
+                word2: seedWordIndexes[1],
-                    {...messages.retype_seed_description}
+                word3: seedWordIndexes[2]
-                    values={{
+              }}
-                      word1: seedWordIndexes[0],
+            />
-                      word2: seedWordIndexes[1],
+          }
-                      word3: seedWordIndexes[2]
+          align="left"
-                    }}
+        />
-                  />
-                }
-                align="left"
-              />
 
-              <Bar my={4} />
+        <Bar my={4} />
 
-              {seedWordIndexes.map((wordIndex, index) => {
+        {seedWordIndexes.map((wordIndex, index) => {
-                return (
+          // Only validate if the word has been entered connectly already or the form has been siubmitted.
-                  <Flex key={`word${index}`} justifyContent="flex-start" mb={3}>
+          return (
-                    <Label htmlFor="alias" width={25} mt={18}>
+            <Flex key={`word${index}`} justifyContent="flex-start" mb={3}>
-                      {wordIndex}
+              <Label htmlFor="alias" width={25} mt={18}>
-                    </Label>
+                {wordIndex}
-                    <Input
+              </Label>
-                      field={`word${index}`}
+              <Input
-                      name={`word${index}`}
+                field={`word${index}`}
-                      validateOnBlur={shouldValidateInline}
+                name={`word${index}`}
-                      validateOnChange={shouldValidateInline}
+                validateOnBlur
-                      validate={value => this.validateWord.call(null, wordIndex - 1, value)}
+                validateOnChange
-                      placeholder={intl.formatMessage({ ...messages.word_placeholder })}
+                validate={value => this.validateWord.call(null, wordIndex - 1, value)}
-                      required
+                onChange={e => this.handleWordChange(e.target.value, index, wordIndex - 1)}
-                    />
+                placeholder={intl.formatMessage({ ...messages.word_placeholder })}
-                  </Flex>
+              />
-                )
+            </Flex>
-              })}
-            </>
           )
-        }}
+        })}
       </Form>
     )
   }