fix(ui): dont allow form submit before seed generation

LN-Zap · Jan 16, 2019 · 0971c70 · 0971c70
1 parent 4280a85
commit 0971c70
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 44 deletions.
diff --git a/app/components/Onboarding/Steps/SeedView.js b/app/components/Onboarding/Steps/SeedView.js
@@ -3,7 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage, injectIntl } from 'react-intl'
 import { Flex } from 'rebass'
-import { Bar, Form, Header, Message, Spinner, Text } from 'components/UI'
+import { Bar, Form, Header, Input, Message, Spinner, Text } from 'components/UI'
 import messages from './messages'
 
 const SeedWord = ({ index, word }) => (
@@ -37,59 +37,99 @@ class SeedView extends React.Component {
     fetchingSeed: false
   }
 
-  async componentDidMount() {
+  componentDidMount() {
     const { seed, fetchSeed } = this.props
     if (seed.length === 0) {
       fetchSeed()
     }
   }
 
+  componentDidUpdate(prevProps) {
+    const { fetchingSeed, seed } = this.props
+    if (seed && seed !== prevProps.seed) {
+      this.formApi.setValue('seed', seed)
+    }
+    if (fetchingSeed && fetchingSeed !== prevProps.fetchingSeed) {
+      this.formApi.setValue('seed', null)
+      this.formApi.setTouched('seed', true)
+    }
+  }
+
+  setFormApi = formApi => {
+    this.formApi = formApi
+  }
+
   render() {
     const { wizardApi, wizardState, seed, fetchSeed, fetchingSeed, intl, ...rest } = this.props
-    const { getApi, onSubmit, onSubmitFailure } = wizardApi
+    const { getApi, onChange, onSubmit, onSubmitFailure } = wizardApi
+    const { currentItem } = wizardState
 
     return (
-      <Form {...rest} getApi={getApi} onSubmit={onSubmit} onSubmitFailure={onSubmitFailure}>
-        <Header
-          title={<FormattedMessage {...messages.save_seed_title} />}
-          subtitle={<FormattedMessage {...messages.save_seed_description} />}
-          align="left"
-        />
-        <Bar my={4} />
-
-        {fetchingSeed && (
-          <Text textAlign="center">
-            <Spinner />
-            <FormattedMessage {...messages.generating_seed} />
-          </Text>
-        )}
-        {!fetchingSeed && seed.length > 0 && (
+      <Form
+        {...rest}
+        getApi={formApi => {
+          this.setFormApi(formApi)
+          if (getApi) {
+            getApi(formApi)
+          }
+        }}
+        onChange={onChange && (formState => onChange(formState, currentItem))}
+        onSubmit={onSubmit}
+        onSubmitFailure={onSubmitFailure}
+      >
+        {() => (
           <>
-            <Flex justifyContent="space-between" mb={3}>
-              <Flex flexDirection="column" as="ul">
-                {seed.slice(0, 6).map((word, index) => (
-                  <SeedWord key={index} index={index + 1} word={word} />
-                ))}
-              </Flex>
-              <Flex flexDirection="column" as="ul">
-                {seed.slice(6, 12).map((word, index) => (
-                  <SeedWord key={index} index={index + 7} word={word} />
-                ))}
-              </Flex>
-              <Flex flexDirection="column" as="ul">
-                {seed.slice(12, 18).map((word, index) => (
-                  <SeedWord key={index} index={index + 13} word={word} />
-                ))}
-              </Flex>
-              <Flex flexDirection="column" as="ul">
-                {seed.slice(18, 24).map((word, index) => (
-                  <SeedWord key={index} index={index + 19} word={word} />
-                ))}
-              </Flex>
-            </Flex>
-            <Message variant="warning" justifyContent="center">
-              <FormattedMessage {...messages.seed_warning} />
-            </Message>
+            <Header
+              title={<FormattedMessage {...messages.save_seed_title} />}
+              subtitle={<FormattedMessage {...messages.save_seed_description} />}
+              align="left"
+            />
+            <Bar my={4} />
+
+            {fetchingSeed && (
+              <Text textAlign="center">
+                <Spinner />
+                <FormattedMessage {...messages.generating_seed} />
+              </Text>
+            )}
+            {!fetchingSeed && seed.length > 0 && (
+              <>
+                <Flex justifyContent="space-between">
+                  <Flex flexDirection="column" as="ul">
+                    {seed.slice(0, 6).map((word, index) => (
+                      <SeedWord key={index} index={index + 1} word={word} />
+                    ))}
+                  </Flex>
+                  <Flex flexDirection="column" as="ul">
+                    {seed.slice(6, 12).map((word, index) => (
+                      <SeedWord key={index} index={index + 7} word={word} />
+                    ))}
+                  </Flex>
+                  <Flex flexDirection="column" as="ul">
+                    {seed.slice(12, 18).map((word, index) => (
+                      <SeedWord key={index} index={index + 13} word={word} />
+                    ))}
+                  </Flex>
+                  <Flex flexDirection="column" as="ul">
+                    {seed.slice(18, 24).map((word, index) => (
+                      <SeedWord key={index} index={index + 19} word={word} />
+                    ))}
+                  </Flex>
+                </Flex>
+                <Message variant="warning" justifyContent="center" mt={3}>
+                  <FormattedMessage {...messages.seed_warning} />
+                </Message>
+              </>
+            )}
+
+            <Input
+              field="seed"
+              name="seed"
+              type="hidden"
+              validateOnBlur
+              validateOnChange
+              required
+            />
           </>
         )}
       </Form>

diff --git a/test/e2e/onboarding-create.spec.js b/test/e2e/onboarding-create.spec.js
@@ -36,9 +36,11 @@ test('should create a new wallet', async t => {
     // Wait for SeedView to generate seed and then submit the form.
     .expect(onboarding.seedView.withProps({ fetchingSeed: false }).exists)
     .ok()
+    .expect(onboarding.nextButton.hasAttribute('disabled'))
+    .notOk('ready to be clicked')
     .click(onboarding.nextButton)
 
-    // Fill out and submit seedConfirm form.
+    // Ensure we navigate to the SeedConfirm step next.
     .expect(onboarding.seedConfirm.exists)
     .ok()