OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Oops: the file modifications for making it log in.

pull/1/head
David Baker 2015-06-11 18:25:29 +01:00
parent a3126477bd
commit add78c6e92
6 changed files with 147 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/MatrixClientPeg.js
View File

@ -8,6 +8,10 @@ module.exports = {
return matrixClient;
},
replace: function(cli) {
matrixClient = cli;
},
replaceUsingUrl: function(hs_url) {
matrixClient = Matrix.createClient(hs_url);
}

3
src/dispatcher.js
View File

@ -1 +1,2 @@
module.exports = new require("flux").Dispatcher();
var flux = require("flux");
module.exports = new flux.Dispatcher();

46
src/molecules/ServerConfig.js
View File

@ -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 (
<div className="HomeServerTextBox">
Home Server URL:&nbsp;
<input type="text" value={this.state.hs_url} onChange={this.hsChanged} />
<table className="serverConfig">
<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>
);
}

6
src/organisms/MessageSection.js
View File

@ -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 (
<Message ev={ev} />
);
});
});*/
return (
//{messageItems}
<div>
<ul className="message-list" ref="messageList">
{messageItems}
</ul>
</div>
);

23
src/pages/MatrixChat.js
View File

@ -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 (
<div>
<ThreadSection />

89
src/templates/Login.js
View File

@ -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 (
<div>
<div>Please log in:</div>
<HomeServerTextBox />
<button onClick={this.onHSChosen}>Continue</button>
<form onSubmit={this.onHSChosen}>
<ServerConfig ref="serverConfig" />
<input type="submit" value="Continue" />
</form>
</div>
);
case 'fetch_stages':
// XXX: clearly these should be separate organisms
case 'stage_m.login.password':
return (
<Loader />
<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 (
<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>
);
}
});