From add78c6e9233484d7e0d4765a83513a6d2dc1f79 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 11 Jun 2015 18:25:29 +0100 Subject: [PATCH] Oops: the file modifications for making it log in. --- src/MatrixClientPeg.js | 4 ++ src/dispatcher.js | 3 +- src/molecules/ServerConfig.js | 46 ++++++++++++++--- src/organisms/MessageSection.js | 6 +-- src/pages/MatrixChat.js | 23 ++++++++- src/templates/Login.js | 89 +++++++++++++++++++++++++++++---- 6 files changed, 147 insertions(+), 24 deletions(-) diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js index 2c22c6b73a..7a14db607a 100644 --- a/src/MatrixClientPeg.js +++ b/src/MatrixClientPeg.js @@ -8,6 +8,10 @@ module.exports = { return matrixClient; }, + replace: function(cli) { + matrixClient = cli; + }, + replaceUsingUrl: function(hs_url) { matrixClient = Matrix.createClient(hs_url); } diff --git a/src/dispatcher.js b/src/dispatcher.js index a8d766f657..3ffefcd11c 100644 --- a/src/dispatcher.js +++ b/src/dispatcher.js @@ -1 +1,2 @@ -module.exports = new require("flux").Dispatcher(); +var flux = require("flux"); +module.exports = new flux.Dispatcher(); diff --git a/src/molecules/ServerConfig.js b/src/molecules/ServerConfig.js index 4b5fbc6493..5a874fa05e 100644 --- a/src/molecules/ServerConfig.js +++ b/src/molecules/ServerConfig.js @@ -1,30 +1,60 @@ var React = require('react'); -var MatrixClientPeg = require("../MatrixClientPeg.js"); - module.exports = React.createClass({ + propTypes: { + onHsUrlChanged: React.PropTypes.func, + onIsUrlChanged: React.PropTypes.func, + default_hs_url: React.PropTypes.string, + default_is_url: React.PropTypes.string + }, + getDefaultProps: function() { return { - default_url: 'https://matrix.org/' + onHsUrlChanged: function() {}, + onIsUrlChanged: function() {}, + default_hs_url: 'https://matrix.org/', + default_is_url: 'https://matrix.org/' }; }, getInitialState: function() { return { - hs_url: this.props.default_url + hs_url: this.props.default_hs_url, + is_url: this.props.default_is_url, } }, hsChanged: function(ev) { - this.state.hs_url = ev.target.value; - MatrixClientPeg.replaceUsingUrl(this.state.hs_url); + this.setState({hs_url: ev.target.value}); + this.props.onHsUrlChanged(this.state.hs_url); + }, + + isChanged: function(ev) { + this.setState({is_url: ev.target.value}); + this.props.onIsUrlChanged(this.state.is_url); + }, + + getHsUrl: function() { + return this.state.hs_url; + }, + + getIsUrl: function() { + return this.state.is_url; }, render: function() { return (
- Home Server URL:  - + + + + + + + + + +
Home Server URL
Identity Server URL
); } diff --git a/src/organisms/MessageSection.js b/src/organisms/MessageSection.js index 10d85167b6..ee29a3debf 100644 --- a/src/organisms/MessageSection.js +++ b/src/organisms/MessageSection.js @@ -9,15 +9,15 @@ module.exports = React.createClass({ }, render: function() { - var messageItems = this.state.messages.map(function(ev) { + /*var messageItems = this.state.messages.map(function(ev) { return ( ); - }); + });*/ return ( + //{messageItems}
    - {messageItems}
); diff --git a/src/pages/MatrixChat.js b/src/pages/MatrixChat.js index 6de89ab9af..04ea1fd22e 100644 --- a/src/pages/MatrixChat.js +++ b/src/pages/MatrixChat.js @@ -5,11 +5,30 @@ var MessageSection = require('../organisms/MessageSection'); var Login = require('../templates/Login'); -var mxCli = require("../MatrixClientPeg").get(); +var mxCliPeg = require("../MatrixClientPeg"); + +var dis = require("../dispatcher"); module.exports = React.createClass({ + getInitialState: function() { + return { + logged_in: false + }; + }, + + componentWillMount: function() { + var that = this; + this.dispatcherRef = dis.register(function(payload) { + switch(payload.action) { + case 'logged_in': + that.setState({logged_in: true}); + break; + } + }); + }, + render: function() { - if (mxCli && mxCli.credentials) { + if (this.state.logged_in) { return (
diff --git a/src/templates/Login.js b/src/templates/Login.js index 32069f1246..b4bbc0a579 100644 --- a/src/templates/Login.js +++ b/src/templates/Login.js @@ -1,38 +1,107 @@ var React = require('react'); var MatrixClientPeg = require("../MatrixClientPeg"); +var Matrix = require("matrix-js-sdk"); -var HomeServerTextBox = require("../molecules/HomeServerTextBox"); +var ServerConfig = require("../molecules/ServerConfig"); +var ProgressBar = require("../molecules/ProgressBar"); var Loader = require("react-loader"); +var dis = require("../dispatcher"); + module.exports = React.createClass({ getInitialState: function() { return { - step: 'choose_hs' + step: 'choose_hs', + busy: false, + currentStep: 0, + totalSteps: 1 }; }, setStep: function(step) { - this.setState({ step: step }); + this.setState({ step: step, errorText: '' }); }, onHSChosen: function(ev) { + MatrixClientPeg.replaceUsingUrl(this.refs.serverConfig.getHsUrl()); this.setStep("fetch_stages"); + var cli = MatrixClientPeg.get(); + 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'}); + }); }, - render: function() { - switch (this.state.step) { + onUserPassEntered: function(ev) { + var that = this; + MatrixClientPeg.get().login('m.login.password', { + 'user': that.refs.user.getDOMNode().value, + 'password': that.refs.pass.getDOMNode().value + }).then(function(data) { + 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 (
-
Please log in:
- - +
+ + +
); - case 'fetch_stages': + // XXX: clearly these should be separate organisms + case 'stage_m.login.password': return ( - +
+
+
+
+ +
+
); } + }, + + loginContent: function() { + if (this.state.busy) { + return ( + + ); + } else { + return ( +
+

Please log in:

+ {this.componentForStep(this.state.step)} +
{this.state.errorText}
+
+ ); + } + }, + + render: function() { + return ( +
+ + {this.loginContent()} +
+ ); } });