introduce join-flow-step, next-step-button

src/components/join-flow/join-flow-step.jsx

@@ -0,0 +1,40 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+import {Form} from 'formik';
+
+const NextStepButton = require('./next-step-button.jsx');
+
+const JoinFlowStep = ({
+    children,
+    description,
+    title,
+    waiting
+}) => (
+    <Form>
+        <div>
+            {title && (
+                <h2>
+                    {title}
+                </h2>
+            )}
+            {description && (
+                <p>
+                    <span>
+                        {description}
+                    </span>
+                </p>
+            )}
+            {children}
+        </div>
+        <NextStepButton waiting={waiting} />
+    </Form>
+);
+
+JoinFlowStep.propTypes = {
+    children: PropTypes.node,
+    description: PropTypes.string,
+    title: PropTypes.string,
+    waiting: PropTypes.bool
+};
+
+module.exports = JoinFlowStep;

src/components/join-flow/join-flow.jsx

@@ -28,7 +28,7 @@ class JoinFlow extends React.Component {
     render () {
         return (
             <React.Fragment>
-                <JoinFlowSteps.ExampleStep />
+                <JoinFlowSteps.UsernameStep />
             </React.Fragment>
         );
     }

src/components/join-flow/next-step-button.jsx

@@ -0,0 +1,36 @@
+const omit = require('lodash.omit');
+const React = require('react');
+const PropTypes = require('prop-types');
+const injectIntl = require('react-intl').injectIntl;
+
+const intl = require('../../lib/intl.jsx');
+const Spinner = require('../../components/spinner/spinner.jsx');
+
+const NextStepButton = props => (
+    <button
+        disabled={props.waiting}
+        type="submit"
+        {...omit(props, ['text', 'waiting'])}
+    >
+        {props.waiting ?
+            <Spinner /> :
+            (props.text ?
+                props.text : (
+                    <intl.FormattedMessage id="registration.nextStep" />
+                )
+            )
+        }
+    </button>
+);
+
+NextStepButton.propTypes = {
+    intl: intl.intlShape,
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    waiting: PropTypes.bool
+};
+
+NextStepButton.defaultProps = {
+    waiting: false
+};
+
+module.exports = injectIntl(NextStepButton);

src/components/registration/join-flow-steps.jsx

@@ -1,7 +1,10 @@
 /* eslint-disable react/no-multi-comp */
 const React = require('react');
-const injectIntl = require('react-intl').injectIntl;
-import {Formik, Form} from 'formik';
+const PropTypes = require('prop-types');
+import {Formik} from 'formik';
+const {injectIntl, intlShape} = require('react-intl');
+
+const JoinFlowStep = require('../join-flow/join-flow-step.jsx');
 
 /*
  * Username step
@@ -11,16 +14,22 @@ class UsernameStep extends React.Component {
     constructor (props) {
         super(props);
     }
-
     render () {
         return (
             <Formik
                 initialValues={{
+                    username: '',
+                    password: '',
+                    passwordConfirm: ''
                 }}
                 validateOnBlur={false}
                 validateOnChange={false}
             >
-                <Form className="join-modal-form" />
+                <JoinFlowStep
+                    description={this.props.intl.formatMessage({id: 'registration.usernameStepDescription'})}
+                    title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
+                    waiting={this.props.waiting}
+                />
             </Formik>
         );
     }
@@ -28,11 +37,12 @@ class UsernameStep extends React.Component {
 /* eslint-enable */
 
 UsernameStep.propTypes = {
+    intl: intlShape,
+    waiting: PropTypes.bool
 };
 
 UsernameStep.defaultProps = {
+    waiting: false
 };
 
-const IntlUsernameStep = injectIntl(UsernameStep);
-
-module.exports.UsernameStep = IntlUsernameStep;
+module.exports.UsernameStep = injectIntl(UsernameStep);