Split out render methods into 'views' leaving UI logic in 'controllers'. Hopefully should make it easier to skin / customise.

src/controllers/templates/Login.js

@@ -0,0 +1,101 @@
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var Matrix = require("matrix-js-sdk");
+
+var ComponentBroker = require("../../ComponentBroker");
+
+var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
+
+module.exports = {
+    getInitialState: function() {
+        return {
+            step: 'choose_hs',
+            busy: false,
+            currentStep: 0,
+            totalSteps: 1
+        };
+    },
+
+    setStep: function(step) {
+        this.setState({ step: step, errorText: '', busy: false });
+    },
+
+    onHSChosen: function(ev) {
+        ev.preventDefault();
+        MatrixClientPeg.replaceUsingUrl(this.refs.serverConfig.getHsUrl());
+        this.setState({hs_url: this.refs.serverConfig.getHsUrl()});
+        this.setStep("fetch_stages");
+        var cli = MatrixClientPeg.get();
+        this.setState({busy: true});
+        var that = this;
+        cli.loginFlows().then(function(result) {
+            that.setState({
+                flows: result.flows,
+                currentStep: 1,
+                totalSteps: result.flows.length+1
+            });
+            that.setStep('stage_'+result.flows[0].type);
+        }, function(error) {
+            that.setStep("choose_hs");
+            that.setState({errorText: 'Unable to contact the given Home Server'});
+        });
+    },
+
+    onUserPassEntered: function(ev) {
+        ev.preventDefault();
+        this.setState({busy: true});
+        var that = this;
+        MatrixClientPeg.get().login('m.login.password', {
+            'user': that.refs.user.getDOMNode().value,
+            'password': that.refs.pass.getDOMNode().value
+        }).then(function(data) {
+            // XXX: we assume this means we're logged in, but there could be a next stage
+            MatrixClientPeg.replace(Matrix.createClient({
+                baseUrl: that.state.hs_url,
+                userId: data.user_id,
+                accessToken: data.access_token
+            }));
+            var localStorage = window.localStorage;
+            if (localStorage) {
+                localStorage.setItem("mx_hs_url", that.state.hs_url);
+                localStorage.setItem("mx_user_id", data.user_id);
+                localStorage.setItem("mx_access_token", data.access_token);
+            } else {
+                console.warn("No local storage available: can't persist session!");
+            }
+            if (that.props.onLoggedIn) {
+                that.props.onLoggedIn();
+            }
+            /*dis.dispatch({
+                'action': 'logged_in'
+            });*/
+        }, function(error) {
+            that.setStep("stage_m.login.password");
+            that.setState({errorText: 'Login failed.'});
+        });
+    },
+
+    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>
+                );
+        }
+    },
+};