Extract each phase to a separate function

src/components/structures/auth/ForgotPassword.js

@@ -61,7 +61,7 @@ module.exports = React.createClass({
         return {
             enteredHsUrl: this.props.customHsUrl || this.props.defaultHsUrl,
             enteredIsUrl: this.props.customIsUrl || this.props.defaultIsUrl,
-            phase: null,
+            phase: PHASE_FORGOT,
             password: null,
             password2: null,
             errorText: null,
@@ -187,38 +187,13 @@ module.exports = React.createClass({
         });
     },
 
-    render: function() {
+    renderServerDetails() {
-        const AuthPage = sdk.getComponent("auth.AuthPage");
+        return null;
-        const AuthHeader = sdk.getComponent("auth.AuthHeader");
+    },
-        const AuthBody = sdk.getComponent("auth.AuthBody");
+
+    renderForgot() {
         const ServerConfig = sdk.getComponent("auth.ServerConfig");
-        const Spinner = sdk.getComponent("elements.Spinner");
 
-        let resetPasswordJsx;
-
-        if (this.state.phase === PHASE_SENDING_EMAIL) {
-            resetPasswordJsx = <Spinner />;
-        } else if (this.state.phase === PHASE_EMAIL_SENT) {
-            resetPasswordJsx = (
-                <div>
-                    { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, " +
-                        "click below.", { emailAddress: this.state.email }) }
-                    <br />
-                    <input className="mx_Login_submit" type="button" onClick={this.onVerify}
-                        value={_t('I have verified my email address')} />
-                </div>
-            );
-        } else if (this.state.phase === PHASE_DONE) {
-            resetPasswordJsx = (
-                <div>
-                    <p>{ _t('Your password has been reset') }.</p>
-                    <p>{ _t('You have been logged out of all devices and will no longer receive push notifications. ' +
-                        'To re-enable notifications, sign in again on each device') }.</p>
-                    <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
-                        value={_t('Return to login screen')} />
-                </div>
-            );
-        } else {
         let serverConfigSection;
         if (!SdkConfig.get()['disable_custom_urls']) {
             serverConfigSection = (
@@ -248,7 +223,7 @@ module.exports = React.createClass({
             // ignore
         }
 
-            resetPasswordJsx = <div>
+        return <div>
             <h3>
                 {yourMatrixAccountText}
             </h3>
@@ -284,6 +259,55 @@ module.exports = React.createClass({
                 {_t('Sign in instead')}
             </a>
         </div>;
+    },
+
+    renderSendingEmail() {
+        const Spinner = sdk.getComponent("elements.Spinner");
+        return <Spinner />;
+    },
+
+    renderEmailSent() {
+        return <div>
+            {_t("An email has been sent to %(emailAddress)s. Once you've followed the " +
+                "link it contains, click below.", { emailAddress: this.state.email })}
+            <br />
+            <input className="mx_Login_submit" type="button" onClick={this.onVerify}
+                value={_t('I have verified my email address')} />
+        </div>;
+    },
+
+    renderDone() {
+        return <div>
+            <p>{_t('Your password has been reset')}.</p>
+            <p>{_t('You have been logged out of all devices and will no longer receive push notifications. ' +
+                'To re-enable notifications, sign in again on each device')}.</p>
+            <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
+                value={_t('Return to login screen')} />
+        </div>;
+    },
+
+    render: function() {
+        const AuthPage = sdk.getComponent("auth.AuthPage");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
+        const AuthBody = sdk.getComponent("auth.AuthBody");
+
+        let resetPasswordJsx;
+        switch (this.state.phase) {
+            case PHASE_SERVER_DETAILS:
+                resetPasswordJsx = this.renderServerDetails();
+                break;
+            case PHASE_FORGOT:
+                resetPasswordJsx = this.renderForgot();
+                break;
+            case PHASE_SENDING_EMAIL:
+                resetPasswordJsx = this.renderSendingEmail();
+                break;
+            case PHASE_EMAIL_SENT:
+                resetPasswordJsx = this.renderEmailSent();
+                break;
+            case PHASE_DONE:
+                resetPasswordJsx = this.renderDone();
+                break;
         }
 
         return (