From 3afc455f3caaaebc4d54359d308acd50bab9145b Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 6 Feb 2019 16:46:49 +0000
Subject: [PATCH] Extract each phase to a separate function

---
 .../structures/auth/ForgotPassword.js         | 208 ++++++++++--------
 1 file changed, 116 insertions(+), 92 deletions(-)

diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js
index 1fbcd8dfd4..2db13624c3 100644
--- a/src/components/structures/auth/ForgotPassword.js
+++ b/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,103 +187,127 @@ module.exports = React.createClass({
         });
     },
 
+    renderServerDetails() {
+        return null;
+    },
+
+    renderForgot() {
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
+
+        let serverConfigSection;
+        if (!SdkConfig.get()['disable_custom_urls']) {
+            serverConfigSection = (
+                <ServerConfig ref="serverConfig"
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    customHsUrl={this.props.customHsUrl}
+                    customIsUrl={this.props.customIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={0} />
+            );
+        }
+
+        let errorText = null;
+        const err = this.state.errorText || this.props.defaultServerDiscoveryError;
+        if (err) {
+            errorText = <div className="mx_Login_error">{ err }</div>;
+        }
+
+        let yourMatrixAccountText = _t('Your account');
+        try {
+            const parsedHsUrl = new URL(this.state.enteredHsUrl);
+            yourMatrixAccountText = _t('Your account on %(serverName)s', {
+                serverName: parsedHsUrl.hostname,
+            });
+        } catch (e) {
+            // ignore
+        }
+
+        return <div>
+            <h3>
+                {yourMatrixAccountText}
+            </h3>
+            <form onSubmit={this.onSubmitForm}>
+                <div className="mx_AuthBody_fieldRow">
+                    <input className="mx_Login_field" ref="user" type="text"
+                        name="reset_email" // define a name so browser's password autofill gets less confused
+                        value={this.state.email}
+                        onChange={this.onInputChanged.bind(this, "email")}
+                        placeholder={_t('Email')} autoFocus />
+                </div>
+                <div className="mx_AuthBody_fieldRow">
+                    <input className="mx_Login_field" ref="pass" type="password"
+                        name="reset_password"
+                        value={this.state.password}
+                        onChange={this.onInputChanged.bind(this, "password")}
+                        placeholder={_t('Password')} />
+                    <input className="mx_Login_field" ref="pass" type="password"
+                        name="reset_password_confirm"
+                        value={this.state.password2}
+                        onChange={this.onInputChanged.bind(this, "password2")}
+                        placeholder={_t('Confirm')} />
+                </div>
+                <span>{_t(
+                    'A verification email will be sent to your inbox to confirm ' +
+                    'setting your new password.',
+                )}</span>
+                <input className="mx_Login_submit" type="submit" value={_t('Send Reset Email')} />
+            </form>
+            {serverConfigSection}
+            {errorText}
+            <a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
+                {_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");
-        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 = (
-                    <ServerConfig ref="serverConfig"
-                        defaultHsUrl={this.props.defaultHsUrl}
-                        defaultIsUrl={this.props.defaultIsUrl}
-                        customHsUrl={this.props.customHsUrl}
-                        customIsUrl={this.props.customIsUrl}
-                        onServerConfigChange={this.onServerConfigChange}
-                        delayTimeMs={0} />
-                );
-            }
-
-            let errorText = null;
-            const err = this.state.errorText || this.props.defaultServerDiscoveryError;
-            if (err) {
-                errorText = <div className="mx_Login_error">{ err }</div>;
-            }
-
-            let yourMatrixAccountText = _t('Your account');
-            try {
-                const parsedHsUrl = new URL(this.state.enteredHsUrl);
-                yourMatrixAccountText = _t('Your account on %(serverName)s', {
-                    serverName: parsedHsUrl.hostname,
-                });
-            } catch (e) {
-                // ignore
-            }
-
-            resetPasswordJsx = <div>
-                <h3>
-                    {yourMatrixAccountText}
-                </h3>
-                <form onSubmit={this.onSubmitForm}>
-                    <div className="mx_AuthBody_fieldRow">
-                        <input className="mx_Login_field" ref="user" type="text"
-                            name="reset_email" // define a name so browser's password autofill gets less confused
-                            value={this.state.email}
-                            onChange={this.onInputChanged.bind(this, "email")}
-                            placeholder={_t('Email')} autoFocus />
-                    </div>
-                    <div className="mx_AuthBody_fieldRow">
-                        <input className="mx_Login_field" ref="pass" type="password"
-                            name="reset_password"
-                            value={this.state.password}
-                            onChange={this.onInputChanged.bind(this, "password")}
-                            placeholder={_t('Password')} />
-                        <input className="mx_Login_field" ref="pass" type="password"
-                            name="reset_password_confirm"
-                            value={this.state.password2}
-                            onChange={this.onInputChanged.bind(this, "password2")}
-                            placeholder={_t('Confirm')} />
-                    </div>
-                    <span>{_t(
-                        'A verification email will be sent to your inbox to confirm ' +
-                        'setting your new password.',
-                    )}</span>
-                    <input className="mx_Login_submit" type="submit" value={_t('Send Reset Email')} />
-                </form>
-                {serverConfigSection}
-                {errorText}
-                <a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
-                    {_t('Sign in instead')}
-                </a>
-            </div>;
+        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 (