Iterate registration to simplify it based on usertesting

Author: t3chguy

res/css/views/auth/_InteractiveAuthEntryComponents.scss

@@ -14,6 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_InteractiveAuthEntryComponents_emailWrapper {
+    padding-right: 60px;
+    position: relative;
+    margin-top: 32px;
+    margin-bottom: 32px;
+
+    &::before, &::after {
+        position: absolute;
+        width: 116px;
+        height: 116px;
+        content: "";
+        right: -10px;
+    }
+
+    &::before {
+        background-color: rgba(244, 246, 250, 0.91);
+        border-radius: 50%;
+        top: -20px;
+    }
+
+    &::after {
+        background-image: url('$(res)/img/element-icons/email-prompt.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        top: -25px;
+    }
+}
+
 .mx_InteractiveAuthEntryComponents_msisdnWrapper {
     text-align: center;
 }

res/img/element-icons/email-prompt.svg

@@ -502,17 +502,9 @@ export default class Registration extends React.Component {
             return null;
         }
 
-        // If we're on a different phase, we only show the server type selector,
-        // which is always shown if we allow custom URLs at all.
-        // (if there's a fatal server error, we need to show the full server
-        // config as the user may need to change servers to resolve the error).
-        if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS && !this.state.serverErrorIsFatal) {
-            return <div>
-                <ServerTypeSelector
-                    selected={this.state.serverType}
-                    onChange={this.onServerTypeChange}
-                />
-            </div>;
+        // Hide the server picker once the user is doing UI Auth unless encountered a fatal server error
+        if (this.state.phase !== PHASE_SERVER_DETAILS && this.state.doingUIAuth && !this.state.serverErrorIsFatal) {
+            return null;
         }
 
         const serverDetailsProps = {};
@@ -582,25 +574,13 @@ export default class Registration extends React.Component {
                 <Spinner />
             </div>;
         } else if (this.state.flows.length) {
-            let onEditServerDetailsClick = null;
-            // If custom URLs are allowed and we haven't selected the Free server type, wire
-            // up the server details edit link.
-            if (
-                PHASES_ENABLED &&
-                !SdkConfig.get()['disable_custom_urls'] &&
-                this.state.serverType !== ServerType.FREE
-            ) {
-                onEditServerDetailsClick = this.onEditServerDetailsClick;
-            }
-
             return <RegistrationForm
                 defaultUsername={this.state.formVals.username}
                 defaultEmail={this.state.formVals.email}
                 defaultPhoneCountry={this.state.formVals.phoneCountry}
                 defaultPhoneNumber={this.state.formVals.phoneNumber}
                 defaultPassword={this.state.formVals.password}
                 onRegisterClick={this.onFormSubmit}
-                onEditServerDetailsClick={onEditServerDetailsClick}
                 flows={this.state.flows}
                 serverConfig={this.props.serverConfig}
                 canSubmit={!this.state.serverErrorIsFatal}
@@ -686,11 +666,48 @@ export default class Registration extends React.Component {
                 { regDoneText }
             </div>;
         } else {
+            let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
+                serverName: this.props.serverConfig.hsName,
+            });
+            if (this.props.serverConfig.hsNameIsDifferent) {
+                const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
+
+                yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
+                    'underlinedServerName': () => {
+                        return <TextWithTooltip
+                            class="mx_Login_underlinedServerName"
+                            tooltip={this.props.serverConfig.hsUrl}
+                        >
+                            {this.props.serverConfig.hsName}
+                        </TextWithTooltip>;
+                    },
+                });
+            }
+
+            // If custom URLs are allowed, user is not doing UIA flows and they haven't selected the Free server type,
+            // wire up the server details edit link.
+            let editLink = null;
+            if (PHASES_ENABLED &&
+                !SdkConfig.get()['disable_custom_urls'] &&
+                this.state.serverType !== ServerType.FREE &&
+                !this.state.doingUIAuth
+            ) {
+                editLink = (
+                    <a className="mx_AuthBody_editServerDetails" href="#" onClick={this.onEditServerDetailsClick}>
+                        {_t('Change')}
+                    </a>
+                );
+            }
+
             body = <div>
                 <h2>{ _t('Create your account') }</h2>
                 { errorText }
                 { serverDeadSection }
                 { this.renderServerComponent() }
+                <h3>
+                    {yourMatrixAccountText}
+                    {editLink}
+                </h3>
                 { this.renderRegisterComponent() }
                 { goBack }
                 { signIn }

src/components/structures/auth/Registration.js

@@ -421,12 +421,12 @@ export class EmailIdentityAuthEntry extends React.Component {
             return <Spinner />;
         } else {
             return (
-                <div>
-                    <p>{ _t("An email has been sent to %(emailAddress)s",
-                        { emailAddress: (sub) => <i>{ this.props.inputs.emailAddress }</i> },
+                <div className="mx_InteractiveAuthEntryComponents_emailWrapper">
+                    <p>{ _t("A confirmation email has been sent to %(emailAddress)s",
+                        { emailAddress: (sub) => <b>{ this.props.inputs.emailAddress }</b> },
                     ) }
                     </p>
-                    <p>{ _t("Please check your email to continue registration.") }</p>
+                    <p>{ _t("Open the link in the email to continue registration.") }</p>
                 </div>
             );
         }

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -51,7 +51,6 @@ export default class RegistrationForm extends React.Component {
         defaultUsername: PropTypes.string,
         defaultPassword: PropTypes.string,
         onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
-        onEditServerDetailsClick: PropTypes.func,
         flows: PropTypes.arrayOf(PropTypes.object).isRequired,
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
         canSubmit: PropTypes.bool,
@@ -513,33 +512,6 @@ export default class RegistrationForm extends React.Component {
     }
 
     render() {
-        let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
-            serverName: this.props.serverConfig.hsName,
-        });
-        if (this.props.serverConfig.hsNameIsDifferent) {
-            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
-
-            yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => {
-                    return <TextWithTooltip
-                        class="mx_Login_underlinedServerName"
-                        tooltip={this.props.serverConfig.hsUrl}
-                    >
-                        {this.props.serverConfig.hsName}
-                    </TextWithTooltip>;
-                },
-            });
-        }
-
-        let editLink = null;
-        if (this.props.onEditServerDetailsClick) {
-            editLink = <a className="mx_AuthBody_editServerDetails"
-                href="#" onClick={this.props.onEditServerDetailsClick}
-            >
-                {_t('Change')}
-            </a>;
-        }
-
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} disabled={!this.props.canSubmit} />
         );
@@ -575,10 +547,6 @@ export default class RegistrationForm extends React.Component {
 
         return (
             <div>
-                <h3>
-                    {yourMatrixAccountText}
-                    {editLink}
-                </h3>
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_AuthBody_fieldRow">
                         {this.renderUsername()}