#41: integrate change-email with router

src/components/profile/changeEmail/ChangeEmail.jsx

@@ -22,21 +22,34 @@ export default class ChangeEmail extends Component {
     static displayName = 'ChangeEmail';
 
     static propTypes = {
+        onChangeStep: PropTypes.func,
         email: PropTypes.string.isRequired,
         form: PropTypes.instanceOf(FormModel),
-        onSubmit: PropTypes.func.isRequired
+        onSubmit: PropTypes.func.isRequired,
+        step: PropTypes.oneOf([0, 1, 2]),
+        code: PropTypes.string
     };
 
     static get defaultProps() {
         return {
-            form: new FormModel()
+            form: new FormModel(),
+            onChangeStep() {},
+            step: 0
         };
     }
 
     state = {
-        activeStep: 0
+        activeStep: this.props.step,
+        code: this.props.code || ''
     };
 
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            activeStep: nextProps.step || this.state.activeStep,
+            code: nextProps.code || ''
+        });
+    }
+
     render() {
         const {form} = this.props;
         const {activeStep} = this.state;
@@ -100,7 +113,8 @@ export default class ChangeEmail extends Component {
 
     renderStepForms() {
         const {form, email} = this.props;
-        const {activeStep} = this.state;
+        const {activeStep, code} = this.state;
+        const isCodeEntered = !!this.props.code;
 
         const activeStepHeight = this.state[`step${activeStep}Height`] || 0;
 
@@ -159,6 +173,9 @@ export default class ChangeEmail extends Component {
                                     <div className={styles.formRow}>
                                         <Input {...form.bindField('initializationCode')}
                                             required
+                                            disabled={isCodeEntered}
+                                            value={code}
+                                            onChange={this.onCodeInput}
                                             skin="light"
                                             color="violet"
                                             placeholder={messages.codePlaceholder}
@@ -195,6 +212,9 @@ export default class ChangeEmail extends Component {
                                     <div className={styles.formRow}>
                                         <Input {...form.bindField('finalizationCode')}
                                             required
+                                            disabled={isCodeEntered}
+                                            value={code}
+                                            onChange={this.onCodeInput}
                                             skin="light"
                                             color="violet"
                                             placeholder={messages.codePlaceholder}
@@ -225,9 +245,19 @@ export default class ChangeEmail extends Component {
             this.setState({
                 activeStep: nextStep
             });
+
+            this.props.onChangeStep(nextStep);
         }
     };
 
+    onCodeInput = (event) => {
+        const {value} = event.target;
+
+        this.setState({
+            code: this.props.code || value
+        });
+    };
+
     isLastStep() {
         return this.state.activeStep + 1 === STEPS_TOTAL;
     }

src/pages/profile/ProfileChangeEmailPage.jsx

@@ -7,20 +7,49 @@ class ProfileChangeEmailPage extends Component {
     static displayName = 'ProfileChangeEmailPage';
 
     static propTypes = {
-        email: PropTypes.string.isRequired
+        email: PropTypes.string.isRequired,
+        params: PropTypes.shape({
+            step: PropTypes.oneOf(['step1', 'step2', 'step3']),
+            code: PropTypes.string
+        })
+    };
+
+    static contextTypes = {
+        router: PropTypes.shape({
+            push: PropTypes.func
+        }).isRequired
     };
 
     form = new FormModel();
 
+    componentWillMount() {
+        const step = this.props.params.step;
+
+        if (step && !/^step\d$/.test(step)) {
+            // wrong param value
+            // TODO: probably we should decide with something better here
+            this.context.router.push('/');
+        }
+    }
+
     render() {
+        const {params: {step, code}} = this.props;
+
         return (
             <ChangeEmail form={this.form}
                 onSubmit={this.onSubmit}
                 email={this.props.email}
+                step={step ? step.slice(-1) * 1 - 1 : step}
+                onChangeStep={this.onChangeStep}
+                code={code}
             />
         );
     }
 
+    onChangeStep = (step) => {
+        this.context.router.push(`/profile/change-email/step${++step}`);
+    };
+
     onSubmit = () => {
     };
 }

src/routes.js

@@ -61,7 +61,7 @@ export default function routesFactory(store) {
             <Route path="profile" component={ProfilePage} {...userOnly}>
                 <Route path="change-password" component={ProfileChangePasswordPage} />
                 <Route path="change-username" component={ProfileChangeUsernamePage} />
-                <Route path="change-email" component={ProfileChangeEmailPage} />
+                <Route path="change-email(/:step)(/:code)" component={ProfileChangeEmailPage} />
             </Route>
         </Route>
     );