Oops: the file modifications for making it log in.
This commit is contained in:
parent
a3126477bd
commit
add78c6e92
6 changed files with 147 additions and 24 deletions
|
@ -8,6 +8,10 @@ module.exports = {
|
||||||
return matrixClient;
|
return matrixClient;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
replace: function(cli) {
|
||||||
|
matrixClient = cli;
|
||||||
|
},
|
||||||
|
|
||||||
replaceUsingUrl: function(hs_url) {
|
replaceUsingUrl: function(hs_url) {
|
||||||
matrixClient = Matrix.createClient(hs_url);
|
matrixClient = Matrix.createClient(hs_url);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1 +1,2 @@
|
||||||
module.exports = new require("flux").Dispatcher();
|
var flux = require("flux");
|
||||||
|
module.exports = new flux.Dispatcher();
|
||||||
|
|
|
@ -1,30 +1,60 @@
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
|
|
||||||
var MatrixClientPeg = require("../MatrixClientPeg.js");
|
|
||||||
|
|
||||||
module.exports = React.createClass({
|
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() {
|
getDefaultProps: function() {
|
||||||
return {
|
return {
|
||||||
default_url: 'https://matrix.org/'
|
onHsUrlChanged: function() {},
|
||||||
|
onIsUrlChanged: function() {},
|
||||||
|
default_hs_url: 'https://matrix.org/',
|
||||||
|
default_is_url: 'https://matrix.org/'
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
hs_url: this.props.default_url
|
hs_url: this.props.default_hs_url,
|
||||||
|
is_url: this.props.default_is_url,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
hsChanged: function(ev) {
|
hsChanged: function(ev) {
|
||||||
this.state.hs_url = ev.target.value;
|
this.setState({hs_url: ev.target.value});
|
||||||
MatrixClientPeg.replaceUsingUrl(this.state.hs_url);
|
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() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<div className="HomeServerTextBox">
|
<div className="HomeServerTextBox">
|
||||||
Home Server URL:
|
<table className="serverConfig">
|
||||||
<input type="text" value={this.state.hs_url} onChange={this.hsChanged} />
|
<tr>
|
||||||
|
<td>Home Server URL</td>
|
||||||
|
<td><input type="text" value={this.state.hs_url} onChange={this.hsChanged} /></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Identity Server URL</td>
|
||||||
|
<td><input type="text" value={this.state.is_url} onChange={this.isChanged} /></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,15 +9,15 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
var messageItems = this.state.messages.map(function(ev) {
|
/*var messageItems = this.state.messages.map(function(ev) {
|
||||||
return (
|
return (
|
||||||
<Message ev={ev} />
|
<Message ev={ev} />
|
||||||
);
|
);
|
||||||
});
|
});*/
|
||||||
return (
|
return (
|
||||||
|
//{messageItems}
|
||||||
<div>
|
<div>
|
||||||
<ul className="message-list" ref="messageList">
|
<ul className="message-list" ref="messageList">
|
||||||
{messageItems}
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,11 +5,30 @@ var MessageSection = require('../organisms/MessageSection');
|
||||||
|
|
||||||
var Login = require('../templates/Login');
|
var Login = require('../templates/Login');
|
||||||
|
|
||||||
var mxCli = require("../MatrixClientPeg").get();
|
var mxCliPeg = require("../MatrixClientPeg");
|
||||||
|
|
||||||
|
var dis = require("../dispatcher");
|
||||||
|
|
||||||
module.exports = React.createClass({
|
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() {
|
render: function() {
|
||||||
if (mxCli && mxCli.credentials) {
|
if (this.state.logged_in) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ThreadSection />
|
<ThreadSection />
|
||||||
|
|
|
@ -1,38 +1,107 @@
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
var MatrixClientPeg = require("../MatrixClientPeg");
|
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 Loader = require("react-loader");
|
||||||
|
|
||||||
|
var dis = require("../dispatcher");
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
step: 'choose_hs'
|
step: 'choose_hs',
|
||||||
|
busy: false,
|
||||||
|
currentStep: 0,
|
||||||
|
totalSteps: 1
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
setStep: function(step) {
|
setStep: function(step) {
|
||||||
this.setState({ step: step });
|
this.setState({ step: step, errorText: '' });
|
||||||
},
|
},
|
||||||
|
|
||||||
onHSChosen: function(ev) {
|
onHSChosen: function(ev) {
|
||||||
|
MatrixClientPeg.replaceUsingUrl(this.refs.serverConfig.getHsUrl());
|
||||||
this.setStep("fetch_stages");
|
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() {
|
onUserPassEntered: function(ev) {
|
||||||
switch (this.state.step) {
|
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':
|
case 'choose_hs':
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div>Please log in:</div>
|
<form onSubmit={this.onHSChosen}>
|
||||||
<HomeServerTextBox />
|
<ServerConfig ref="serverConfig" />
|
||||||
<button onClick={this.onHSChosen}>Continue</button>
|
<input type="submit" value="Continue" />
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
case 'fetch_stages':
|
// 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 (
|
return (
|
||||||
<Loader />
|
<Loader />
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Please log in:</h1>
|
||||||
|
{this.componentForStep(this.state.step)}
|
||||||
|
<div className="error">{this.state.errorText}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<div className="mx_Login">
|
||||||
|
<ProgressBar value={this.state.currentStep} max={this.state.totalSteps} />
|
||||||
|
{this.loginContent()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue