Mobile registration optimizations and tests (#62)

* Mobile registration optimizations

- don't autocaptialize or autocorrect on username field
- show each password field in their own row
- improve position of tooltip on mobile so that it's visible

* Use optional prop rather than default prop.

* Redirect to welcome screen if mobile_registration is requested but not enabled in the config.

* autocorrect value should be "off"

* Add unit tests for mobile registration

* Fix test typo

* Fix typo

src/components/structures/MatrixChat.tsx

@@ -952,18 +952,20 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     private async startRegistration(params: { [key: string]: string }, isMobileRegistration?: boolean): Promise<void> {
-        if (!SettingsStore.getValue(UIFeature.Registration)) {
+        // If registration is disabled or mobile registration is requested but not enabled in settings redirect to the welcome screen
+        if (
+            !SettingsStore.getValue(UIFeature.Registration) ||
+            (isMobileRegistration && !SettingsStore.getValue("Registration.mobileRegistrationHelper"))
+        ) {
             this.showScreen("welcome");
             return;
         }
-        const isMobileRegistrationAllowed =
-            isMobileRegistration && SettingsStore.getValue("Registration.mobileRegistrationHelper");
 
         const newState: Partial<IState> = {
             view: Views.REGISTER,
         };
 
-        if (isMobileRegistrationAllowed && params.hs_url) {
+        if (isMobileRegistration && params.hs_url) {
             try {
                 const config = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(params.hs_url);
                 newState.serverConfig = config;
@@ -992,12 +994,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             newState.register_id_sid = params.sid;
         }
 
-        newState.isMobileRegistration = isMobileRegistrationAllowed;
+        newState.isMobileRegistration = isMobileRegistration;
 
         this.setStateForNewView(newState);
         ThemeController.isLogin = true;
         this.themeWatcher.recheck();
-        this.notifyNewScreen(isMobileRegistrationAllowed ? "mobile_register" : "register");
+        this.notifyNewScreen(isMobileRegistration ? "mobile_register" : "register");
     }
 
     // switch view to the given room

src/components/structures/auth/Registration.tsx

@@ -627,6 +627,7 @@ export default class Registration extends React.Component<IProps, IState> {
                         serverConfig={this.props.serverConfig}
                         canSubmit={!this.state.serverErrorIsFatal}
                         matrixClient={this.state.matrixClient}
+                        mobileRegister={this.props.mobileRegister}
                     />
                 </React.Fragment>
             );
@@ -779,7 +780,11 @@ export default class Registration extends React.Component<IProps, IState> {
             );
         }
         if (this.props.mobileRegister) {
-            return <div className="mx_MobileRegister_body">{body}</div>;
+            return (
+                <div className="mx_MobileRegister_body" data-testid="mobile-register">
+                    {body}
+                </div>
+            );
         }
         return (
             <AuthPage>