Refactor view/controller logic between files, fix syntax & silly bugs.

skins/base/views/templates/Login.js

@@ -25,10 +25,37 @@ var Loader = require("react-loader");
 
 var LoginController = require("../../../../src/controllers/templates/Login");
 
+var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
+
 module.exports = React.createClass({
     displayName: 'Login',
     mixins: [LoginController],
 
+    componentForStep: function(step) {
+        switch (step) {
+            case 'choose_hs':
+                return (
+                    <div>
+                        <form onSubmit={this.onHSChosen}>
+                        <ServerConfig ref="serverConfig" />
+                        <input type="submit" value="Continue" />
+                        </form>
+                    </div>
+                );
+            // XXX: clearly these should be separate organisms
+            case 'stage_m.login.password':
+                return (
+                    <div>
+                        <form onSubmit={this.onUserPassEntered}>
+                        <input ref="user" type="text" placeholder="username" /><br />
+                        <input ref="pass" type="password" placeholder="password" /><br />
+                        <input type="submit" value="Log in" />
+                        </form>
+                    </div>
+                );
+        }
+    },
+
     loginContent: function() {
         if (this.state.busy) {
             return (

skins/base/views/templates/Register.js

@@ -24,10 +24,61 @@ var Loader = require("react-loader");
 
 var RegisterController = require("../../../../src/controllers/templates/Register");
 
+var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
+
 module.exports = React.createClass({
     displayName: 'Register',
     mixins: [RegisterController],
 
+    getRegFormVals: function() {
+        return {
+            email: this.refs.email.getDOMNode().value,
+            username: this.refs.username.getDOMNode().value,
+            password: this.refs.password.getDOMNode().value,
+            confirmPassword: this.refs.confirmPassword.getDOMNode().value
+        };
+    },
+
+    getHsUrl: function() {
+        return this.refs.serverConfig.getHsUrl();
+    },
+
+    getIsUrl: function() {
+        return this.refs.serverConfig.getIsUrl();
+    },
+
+    componentForStep: function(step) {
+        switch (step) {
+            case 'initial':
+                return (
+                    <div>
+                        <form onSubmit={this.onInitialStageSubmit}>
+                        Email: <input type="text" ref="email" /><br />
+                        Username: <input type="text" ref="username" /><br />
+                        Password: <input type="password" ref="password" /><br />
+                        Confirm Password: <input type="password" ref="confirmPassword" /><br />
+                        <ServerConfig ref="serverConfig" />
+                        <input type="submit" value="Continue" />
+                        </form>
+                    </div>
+                );
+            // XXX: clearly these should be separate organisms
+            case 'stage_m.login.email.identity':
+                return (
+                    <div>
+                        Please check your email to continue registration.
+                    </div>
+                );
+            case 'stage_m.login.recaptcha':
+                return (
+                    <div ref="recaptchaContainer">
+                        This Home Server would like to make sure you're not a robot
+                        <div id="mx_recaptcha"></div>
+                    </div>
+                );
+        }
+    },
+
     registerContent: function() {
         if (this.state.busy) {
             return (
@@ -45,6 +96,22 @@ module.exports = React.createClass({
         }
     },
 
+    onBadFields: function(bad) {
+        var keys = Object.keys(bad);
+        var strings = [];
+        for (var i = 0; i < keys.length; ++i) {
+            switch (bad[keys[i]]) {
+                case this.FieldErrors.PasswordMismatch:
+                    strings.push("Passwords don't match");
+                    break;
+            }
+        }
+        var errtxt = strings.join(', ');
+        this.setState({
+            errorText: errtxt
+        });
+    },
+
     render: function() {
         return (
             <div className="mx_Register">

src/controllers/pages/MatrixChat.js

@@ -179,7 +179,7 @@ module.exports = {
         dis.dispatch({action: 'focus_composer'});
     },
 
-    showScreen(screen, params) {
+    showScreen: function(screen, params) {
         if (screen == 'register') {
             dis.dispatch({
                 action: 'start_registration',

src/controllers/templates/Login.js

@@ -24,8 +24,6 @@ var dis = require("../../dispatcher");
 
 var ComponentBroker = require("../../ComponentBroker");
 
-var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
-
 module.exports = {
     getInitialState: function() {
         return {
@@ -100,31 +98,6 @@ module.exports = {
         });
     },
 
-    componentForStep: function(step) {
-        switch (step) {
-            case 'choose_hs':
-                return (
-                    <div>
-                        <form onSubmit={this.onHSChosen}>
-                        <ServerConfig ref="serverConfig" />
-                        <input type="submit" value="Continue" />
-                        </form>
-                    </div>
-                );
-            // XXX: clearly these should be separate organisms
-            case 'stage_m.login.password':
-                return (
-                    <div>
-                        <form onSubmit={this.onUserPassEntered}>
-                        <input ref="user" type="text" placeholder="username" /><br />
-                        <input ref="pass" type="password" placeholder="password" /><br />
-                        <input type="submit" value="Log in" />
-                        </form>
-                    </div>
-                );
-        }
-    },
-
     showRegister: function(ev) {
         ev.preventDefault();
         dis.dispatch({

src/controllers/templates/Register.js

@@ -24,9 +24,12 @@ var dis = require("../../dispatcher");
 
 var ComponentBroker = require("../../ComponentBroker");
 
-var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
-
 module.exports = {
+    FieldErrors: {
+        PasswordMismatch: 'PasswordMismatch',
+        PasswordLength: 'PasswordLength'
+    },
+
     getInitialState: function() {
         return {
             step: 'initial',
@@ -126,7 +129,7 @@ module.exports = {
 
         if (
             this.savedParams.email != '' ||
-            this.completedStages.indexOf('m.login.email.identity' > -1)
+            this.completedStages.indexOf('m.login.email.identity') > -1
         ) {
             return emailFlow;
         } else {
@@ -156,22 +159,34 @@ module.exports = {
 
     onInitialStageSubmit: function(ev) {
         ev.preventDefault();
+
+        var formVals = this.getRegFormVals();
+
+        var badFields = {};
+        if (formVals.password != formVals.confirmPassword) {
+            badFields.confirmPassword = this.FieldErrors.PasswordMismatch;
+        }
+        if (formVals.password.length < 6) {
+            badFields.password = this.FieldErrors.PasswordLength;
+        }
+        this.onBadFields(badFields);
+
         MatrixClientPeg.replaceUsingUrls(
-            this.refs.serverConfig.getHsUrl(),
+            this.getHsUrl(),
-            this.refs.serverConfig.getIsUrl()
+            this.getIsUrl()
         );
         this.setState({
-            hs_url: this.refs.serverConfig.getHsUrl(),
+            hs_url: this.getHsUrl(),
-            is_url: this.refs.serverConfig.getIsUrl()
+            is_url: this.getIsUrl()
         });
         var cli = MatrixClientPeg.get();
         this.setState({busy: true});
         var self = this;
 
         this.savedParams = {
-            email: this.refs.email.getDOMNode().value,
+            email: formVals.email,
-            username: this.refs.username.getDOMNode().value,
+            username: formVals.username,
-            password: this.refs.password.getDOMNode().value
+            password: formVals.password
         };
 
         this.tryRegister();
@@ -246,37 +261,6 @@ module.exports = {
         }
     },
 
-    componentForStep: function(step) {
-        switch (step) {
-            case 'initial':
-                return (
-                    <div>
-                        <form onSubmit={this.onInitialStageSubmit}>
-                        Email: <input type="text" ref="email" /><br />
-                        Username: <input type="text" ref="username" /><br />
-                        Password: <input type="password" ref="password" /><br />
-                        <ServerConfig ref="serverConfig" />
-                        <input type="submit" value="Continue" />
-                        </form>
-                    </div>
-                );
-            // XXX: clearly these should be separate organisms
-            case 'stage_m.login.email.identity':
-                return (
-                    <div>
-                        Please check your email to continue registration.
-                    </div>
-                );
-            case 'stage_m.login.recaptcha':
-                return (
-                    <div ref="recaptchaContainer">
-                        This Home Server would like to make sure you're not a robot
-                        <div id="mx_recaptcha"></div>
-                    </div>
-                );
-        }
-    },
-
     onCaptchaLoaded: function() {
         if (this.refs.recaptchaContainer) {
             var sitekey = this.authParams['m.login.recaptcha'].public_key;
@@ -308,7 +292,7 @@ module.exports = {
                 self.authParams = error.data.params;
                 self.authSessionId = error.data.session;
 
-                self.completedStages = error.data.completed;
+                self.completedStages = error.data.completed || [];
 
                 var flow = self.chooseFlow(error.data.flows);