Split out logic/UI for logging in

- Add 'PasswordLogin' UI component
- Add 'LoginPage' wire component which, along with Signup from react SDK,
  replaces the 'Login' page.
- Move UI code (state/props) from ServerConfig which was lobotomoised in the
  React SDK.

Unfinished.

src/skins/vector/skindex.js

@@ -71,6 +71,7 @@ skin['molecules.voip.CallView'] = require('./views/molecules/voip/CallView');
 skin['molecules.voip.IncomingCallBox'] = require('./views/molecules/voip/IncomingCallBox');
 skin['molecules.voip.VideoView'] = require('./views/molecules/voip/VideoView');
 skin['organisms.CasLogin'] = require('./views/organisms/CasLogin');
+skin['organisms.PasswordLogin'] = require('./views/organisms/PasswordLogin');
 skin['organisms.CreateRoom'] = require('./views/organisms/CreateRoom');
 skin['organisms.ErrorDialog'] = require('./views/organisms/ErrorDialog');
 skin['organisms.LeftPanel'] = require('./views/organisms/LeftPanel');
@@ -87,6 +88,7 @@ skin['organisms.UserSettings'] = require('./views/organisms/UserSettings');
 skin['organisms.ViewSource'] = require('./views/organisms/ViewSource');
 skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage');
 skin['pages.MatrixChat'] = require('./views/pages/MatrixChat');
+skin['pages.LoginPage'] = require('./views/pages/LoginPage');
 skin['templates.Login'] = require('./views/templates/Login');
 skin['templates.Register'] = require('./views/templates/Register');
 

src/skins/vector/views/molecules/ServerConfig.js

@@ -20,36 +20,141 @@ var React = require('react');
 var Modal = require('matrix-react-sdk/lib/Modal');
 var sdk = require('matrix-react-sdk')
 
-var ServerConfigController = require('matrix-react-sdk/lib/controllers/molecules/ServerConfig')
-
+/**
+ * A pure UI component which displays the HS and IS to use.
+ */
 module.exports = React.createClass({
     displayName: 'ServerConfig',
-    mixins: [ServerConfigController],
+
+    propTypes: {
+        onHsUrlChanged: React.PropTypes.func,
+        onIsUrlChanged: React.PropTypes.func,
+        defaultHsUrl: React.PropTypes.string,
+        defaultIsUrl: React.PropTypes.string,
+        withToggleButton: React.PropTypes.bool,
+        delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
+    },
+
+    getDefaultProps: function() {
+        return {
+            onHsUrlChanged: function() {},
+            onIsUrlChanged: function() {},
+            withToggleButton: false,
+            delayTimeMs: 0
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            hs_url: this.props.defaultHsUrl,
+            is_url: this.props.defaultIsUrl,
+            original_hs_url: this.props.defaultHsUrl,
+            original_is_url: this.props.defaultIsUrl,
+            // no toggle button = show, toggle button = hide
+            configVisible: !this.props.withToggleButton
+        }
+    },
+
+    onHomeserverChanged: function(ev) {
+        this.setState({hs_url: ev.target.value}, function() {
+            this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
+                this.props.onHsUrlChanged(this.state.hs_url);
+            });
+        });
+    },
+
+    onIdentityServerChanged: function(ev) {
+        this.setState({is_url: ev.target.value}, function() {
+            this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
+                this.props.onIsUrlChanged(this.state.is_url);
+            });
+        });
+    },
+
+    _waitThenInvoke: function(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    },
+
+    getHsUrl: function() {
+        return this.state.hs_url;
+    },
+
+    getIsUrl: function() {
+        return this.state.is_url;
+    },
+
+    onServerConfigVisibleChange: function(ev) {
+        this.setState({
+            configVisible: ev.target.checked
+        });
+    },
 
     showHelpPopup: function() {
         var ErrorDialog = sdk.getComponent('organisms.ErrorDialog');
         Modal.createDialog(ErrorDialog, {
             title: 'Custom Server Options',
             description: <span>
-                You can use the custom server options to log into other Matrix servers by specifying a different Home server URL.<br/>
-                This allows you to use Vector with an existing Matrix account on a different Home server.<br/>
+                You can use the custom server options to log into other Matrix
+                servers by specifying a different Home server URL.
                 <br/>
-                You can also set a custom Identity server but this will affect people's ability to find you
-                if you use a server in a group other than the main Matrix.org group.
+                This allows you to use Vector with an existing Matrix account on
+                a different Home server.
+                <br/>
+                <br/>
+                You can also set a custom Identity server but this will affect
+                people's ability to find you if you use a server in a group other
+                than the main Matrix.org group.
             </span>,
             button: "Dismiss",
-            focus: true,
+            focus: true
         });
     },
 
     render: function() {
+        var serverConfigStyle = {};
+        serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
+
+        var toggleButton;
+        if (this.props.withToggleButton) {
+            toggleButton = (
+                <div>
+                    <input className="mx_Login_checkbox" id="advanced" type="checkbox"
+                        checked={this.state.configVisible}
+                        onChange={this.onServerConfigVisibleChange} />
+                    <label className="mx_Login_label" htmlFor="advanced">
+                        Use custom server options (advanced)
+                    </label>
+                </div>
+            );
+        }
+
         return (
+        <div>
+            {toggleButton}
+            <div style={serverConfigStyle}>
                 <div className="mx_ServerConfig">
-                <label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">Home server URL</label>
-                <input className="mx_Login_field" id="hsurl" type="text" placeholder={this.state.original_hs_url} value={this.state.hs_url} onChange={this.hsChanged} />
-                <label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">Identity server URL</label>
-                <input className="mx_Login_field" id="isurl" type="text" placeholder={this.state.original_is_url} value={this.state.is_url} onChange={this.isChanged} />
-                <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>What does this mean?</a>
+                    <label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
+                        Home server URL
+                    </label>
+                    <input className="mx_Login_field" id="hsurl" type="text"
+                        placeholder={this.state.original_hs_url}
+                        value={this.state.hs_url}
+                        onChange={this.onHomeserverChanged} />
+                    <label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
+                        Identity server URL
+                    </label>
+                    <input className="mx_Login_field" id="isurl" type="text"
+                        placeholder={this.state.original_is_url}
+                        value={this.state.is_url}
+                        onChange={this.onIdentityServerChanged} />
+                    <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
+                        What does this mean?
+                    </a>
+                </div>
+            </div>
         </div>
         );
     }

src/skins/vector/views/organisms/PasswordLogin.js

@@ -0,0 +1,64 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+/**
+ * A pure UI component which displays a username/password form.
+ */
+module.exports = React.createClass({displayName: 'PasswordLogin',
+    propTypes: {
+        onSubmit: React.PropTypes.func.isRequired // fn(username, password)
+    },
+
+    getInitialState: function() {
+        return {
+            username: "",
+            password: ""
+        };
+    },
+
+    onSubmitForm: function() {
+        this.props.onSubmit(this.state.username, this.state.password);
+    },
+
+    onUsernameChanged: function(ev) {
+        this.setState({username: ev.target.value});
+    },
+
+    onPasswordChanged: function(ev) {
+        this.setState({password: ev.target.value});
+    },
+
+    render: function() {
+        return (
+            <div>
+                <form onSubmit={this.onSubmitForm}>
+                <input className="mx_Login_field" ref="user" type="text"
+                    value={this.state.username} onChange={this.onUsernameChanged}
+                    placeholder="Email or user name" />
+                <br />
+                <input className="mx_Login_field" ref="pass" type="password"
+                    value={this.state.password} onChange={this.onPasswordChanged}
+                    placeholder="Password" />
+                <br />
+                <input className="mx_Login_submit" type="submit" value="Log in" />
+                </form>
+            </div>
+        );
+    }
+});

src/skins/vector/views/pages/LoginPage.js

@@ -0,0 +1,176 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var sdk = require('matrix-react-sdk');
+var Signup = require("matrix-react-sdk/lib/Signup");
+
+/**
+ * A wire component which glues together login UI components and Signup logic
+ */
+module.exports = React.createClass({displayName: 'LoginPage',
+    propTypes: {
+        onLoggedIn: React.PropTypes.func.isRequired,
+        homeserverUrl: React.PropTypes.string,
+        identityServerUrl: React.PropTypes.string,
+        // login shouldn't know or care how registration is done.
+        onRegisterClick: React.PropTypes.func.isRequired
+    },
+
+    getDefaultProps: function() {
+        return {
+            homeserverUrl: 'https://matrix.org/',
+            identityServerUrl: 'https://matrix.org/'
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            busy: false,
+            errorText: null,
+            enteredHomeserverUrl: this.props.homeserverUrl,
+            enteredIdentityServerUrl: this.props.identityServerUrl
+        };
+    },
+
+    componentWillMount: function() {
+        this._initLoginLogic();
+    },
+
+    onPasswordLogin: function(username, password) {
+        // TODO
+        console.log("onPasswordLogin %s %s", username, password);
+    },
+
+    onHsUrlChanged: function(newHsUrl) {
+        console.log("onHsUrlChanged %s", newHsUrl);
+        this._initLoginLogic(newHsUrl);
+    },
+
+    _initLoginLogic: function(hsUrl, isUrl) {
+        var self = this;
+        hsUrl = hsUrl || this.state.enteredHomeserverUrl;
+        isUrl = isUrl || this.state.enteredIdentityServerUrl;
+
+        var loginLogic = new Signup.Login(hsUrl, isUrl);
+        this._loginLogic = loginLogic;
+
+        loginLogic.getFlows().then(function(flows) {
+            // old behaviour was to always use the first flow without presenting
+            // options. This works in most cases (we don't have a UI for multiple
+            // logins so let's skip that for now).
+            loginLogic.chooseFlow(0);
+        }, function(err) {
+            self._setErrorTextFromError(err);
+        }).finally(function() {
+            self.setState({
+                busy: false
+            });
+        });
+
+        this.setState({
+            enteredHomeserverUrl: hsUrl,
+            enteredIdentityServerUrl: isUrl,
+            busy: true,
+            errorText: null // reset err messages
+        });
+    },
+
+    _getCurrentFlowStep: function() {
+        return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null
+    },
+
+    _setErrorTextFromError: function(err) {
+        var errCode = err.errcode;
+        if (!errCode && err.httpStatus) {
+            errCode = "HTTP " + err.httpStatus;
+        }
+        this.setState({
+            errorText: (
+                "Error: Problem communicating with the given homeserver " +
+                (errCode ? "(" + errCode + ")" : "")
+            )
+        });
+    },
+
+    componentForStep: function(step) {
+        switch (step) {
+            case 'm.login.password':
+                var PasswordLogin = sdk.getComponent('organisms.PasswordLogin');
+                return (
+                    <PasswordLogin onSubmit={this.onPasswordLogin} />
+                );
+            case 'm.login.cas':
+                var CasLogin = sdk.getComponent('organisms.CasLogin');
+                return (
+                    <CasLogin />
+                );
+            default:
+                if (!step) {
+                    return;
+                }
+                return (
+                    <div>
+                    Sorry, this homeserver is using a login which is not
+                    recognised by Vector ({step})
+                    </div>
+                );
+        }
+    },
+
+    render: function() {
+        var Loader = sdk.getComponent("atoms.Spinner");
+        var loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
+        var ServerConfig = sdk.getComponent("molecules.ServerConfig");
+
+        return (
+            <div className="mx_Login">
+                <div className="mx_Login_box">
+                    <div className="mx_Login_logo">
+                        <img  src="img/logo.png" width="249" height="78" alt="vector"/>
+                    </div>
+                    <div>
+                        <h2>Sign in</h2>
+                        {this.componentForStep(this._getCurrentFlowStep())}
+                        <ServerConfig ref="serverConfig"
+                            withToggleButton={true}
+                            defaultHsUrl={this.props.homeserverUrl}
+                            defaultIsUrl={this.props.identityServerUrl}
+                            onHsUrlChanged={this.onHsUrlChanged}
+                            delayTimeMs={1000}/>
+                        <div className="mx_Login_error">
+                                { loader }
+                                {this.state.errorText}
+                        </div>
+                        <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
+                            Create a new account
+                        </a>
+                        <br/>
+                        <div className="mx_Login_links">
+                            <a href="https://medium.com/@Vector">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                            <a href="https://twitter.com/@VectorCo">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                            <a href="https://github.com/vector-im/vector-web">github</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                            <a href="https://matrix.org">powered by Matrix</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});

src/skins/vector/views/pages/MatrixChat.js

@@ -89,6 +89,10 @@ module.exports = React.createClass({
         });
     },
 
+    onRegisterClick: function() {
+        this.showScreen("register");
+    },
+
     render: function() {
         var LeftPanel = sdk.getComponent('organisms.LeftPanel');
         var RoomView = sdk.getComponent('organisms.RoomView');
@@ -164,8 +168,9 @@ module.exports = React.createClass({
                 />
             );
         } else {
+            var LoginPage = sdk.getComponent("pages.LoginPage");
             return (
-                <Login onLoggedIn={this.onLoggedIn} />
+                <LoginPage onLoggedIn={this.onLoggedIn} onRegisterClick={this.onRegisterClick} />
             );
         }
     }