Move MatrixChat to react-sdk. Move all login stuff to react SDK.
Removed Modulator stuff.
This commit is contained in:
Kegan Dougal
parent
ddc4f30bb6
commit
8f5f71ec80
13 changed files with 16 additions and 1096 deletions
|
|
@ -1,45 +0,0 @@
|
||||||
/*
|
|
||||||
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 days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
||||||
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
formatDate: function(date) {
|
|
||||||
// date.toLocaleTimeString is completely system dependent.
|
|
||||||
// just go 24h for now
|
|
||||||
function pad(n) {
|
|
||||||
return (n < 10 ? '0' : '') + n;
|
|
||||||
}
|
|
||||||
|
|
||||||
var now = new Date();
|
|
||||||
if (date.toDateString() === now.toDateString()) {
|
|
||||||
return pad(date.getHours()) + ':' + pad(date.getMinutes());
|
|
||||||
}
|
|
||||||
else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
|
|
||||||
return days[date.getDay()] + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
|
|
||||||
}
|
|
||||||
else if (now.getFullYear() === date.getFullYear()) {
|
|
||||||
return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + date.getFullYear() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,199 +0,0 @@
|
||||||
/*
|
|
||||||
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");
|
|
||||||
var PasswordLogin = require("matrix-react-sdk/lib/components/views/login/PasswordLogin");
|
|
||||||
var CasLogin = require("matrix-react-sdk/lib/components/views/login/CasLogin");
|
|
||||||
var ServerConfig = require("../../views/login/ServerConfig");
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A wire component which glues together login UI components and Signup logic
|
|
||||||
*/
|
|
||||||
module.exports = React.createClass({displayName: 'Login',
|
|
||||||
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://vector.im'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
busy: false,
|
|
||||||
errorText: null,
|
|
||||||
enteredHomeserverUrl: this.props.homeserverUrl,
|
|
||||||
enteredIdentityServerUrl: this.props.identityServerUrl
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillMount: function() {
|
|
||||||
this._initLoginLogic();
|
|
||||||
},
|
|
||||||
|
|
||||||
onPasswordLogin: function(username, password) {
|
|
||||||
var self = this;
|
|
||||||
self.setState({
|
|
||||||
busy: true
|
|
||||||
});
|
|
||||||
|
|
||||||
this._loginLogic.loginViaPassword(username, password).then(function(data) {
|
|
||||||
self.props.onLoggedIn(data);
|
|
||||||
}, function(error) {
|
|
||||||
self._setErrorTextFromError(error);
|
|
||||||
}).finally(function() {
|
|
||||||
self.setState({
|
|
||||||
busy: false
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onHsUrlChanged: function(newHsUrl) {
|
|
||||||
this._initLoginLogic(newHsUrl);
|
|
||||||
},
|
|
||||||
|
|
||||||
onIsUrlChanged: function(newIsUrl) {
|
|
||||||
this._initLoginLogic(null, newIsUrl);
|
|
||||||
},
|
|
||||||
|
|
||||||
_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) {
|
|
||||||
if (err.friendlyText) {
|
|
||||||
this.setState({
|
|
||||||
errorText: err.friendlyText
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
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':
|
|
||||||
return (
|
|
||||||
<PasswordLogin onSubmit={this.onPasswordLogin} />
|
|
||||||
);
|
|
||||||
case 'm.login.cas':
|
|
||||||
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("elements.Spinner");
|
|
||||||
var loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
|
|
||||||
|
|
||||||
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}
|
|
||||||
onIsUrlChanged={this.onIsUrlChanged}
|
|
||||||
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> ·
|
|
||||||
<a href="https://twitter.com/@VectorCo">twitter</a> ·
|
|
||||||
<a href="https://github.com/vector-im/vector-web">github</a> ·
|
|
||||||
<a href="https://matrix.org">powered by Matrix</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
/*
|
|
||||||
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 sdk = require('matrix-react-sdk');
|
|
||||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
|
||||||
|
|
||||||
module.exports = React.createClass({
|
|
||||||
displayName: 'PostRegistration',
|
|
||||||
|
|
||||||
propTypes: {
|
|
||||||
onComplete: React.PropTypes.func.isRequired
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
avatarUrl: null,
|
|
||||||
errorString: null,
|
|
||||||
busy: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillMount: function() {
|
|
||||||
// There is some assymetry between ChangeDisplayName and ChangeAvatar,
|
|
||||||
// as ChangeDisplayName will auto-get the name but ChangeAvatar expects
|
|
||||||
// the URL to be passed to you (because it's also used for room avatars).
|
|
||||||
var cli = MatrixClientPeg.get();
|
|
||||||
this.setState({busy: true});
|
|
||||||
var self = this;
|
|
||||||
cli.getProfileInfo(cli.credentials.userId).done(function(result) {
|
|
||||||
self.setState({
|
|
||||||
avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
|
|
||||||
busy: false
|
|
||||||
});
|
|
||||||
}, function(error) {
|
|
||||||
self.setState({
|
|
||||||
errorString: "Failed to fetch avatar URL",
|
|
||||||
busy: false
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
|
|
||||||
var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
|
|
||||||
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 className="mx_Login_profile">
|
|
||||||
Set a display name:
|
|
||||||
<ChangeDisplayName />
|
|
||||||
Upload an avatar:
|
|
||||||
<ChangeAvatar
|
|
||||||
initialAvatarUrl={this.state.avatarUrl} />
|
|
||||||
<button onClick={this.props.onComplete}>Continue</button>
|
|
||||||
{this.state.errorString}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -1,247 +0,0 @@
|
||||||
/*
|
|
||||||
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 sdk = require('matrix-react-sdk');
|
|
||||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
|
||||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
|
||||||
var ServerConfig = require("../../views/login/ServerConfig");
|
|
||||||
var RegistrationForm = require("../../views/login/RegistrationForm");
|
|
||||||
var CaptchaForm = require("matrix-react-sdk/lib/components/views/login/CaptchaForm");
|
|
||||||
var Signup = require("matrix-react-sdk/lib/Signup");
|
|
||||||
var MIN_PASSWORD_LENGTH = 6;
|
|
||||||
|
|
||||||
module.exports = React.createClass({
|
|
||||||
displayName: 'Registration',
|
|
||||||
|
|
||||||
propTypes: {
|
|
||||||
onLoggedIn: React.PropTypes.func.isRequired,
|
|
||||||
clientSecret: React.PropTypes.string,
|
|
||||||
sessionId: React.PropTypes.string,
|
|
||||||
registrationUrl: React.PropTypes.string,
|
|
||||||
idSid: React.PropTypes.string,
|
|
||||||
hsUrl: React.PropTypes.string,
|
|
||||||
isUrl: React.PropTypes.string,
|
|
||||||
// registration shouldn't know or care how login is done.
|
|
||||||
onLoginClick: React.PropTypes.func.isRequired
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
busy: false,
|
|
||||||
errorText: null,
|
|
||||||
enteredHomeserverUrl: this.props.hsUrl,
|
|
||||||
enteredIdentityServerUrl: this.props.isUrl
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillMount: function() {
|
|
||||||
this.dispatcherRef = dis.register(this.onAction);
|
|
||||||
// attach this to the instance rather than this.state since it isn't UI
|
|
||||||
this.registerLogic = new Signup.Register(
|
|
||||||
this.props.hsUrl, this.props.isUrl
|
|
||||||
);
|
|
||||||
this.registerLogic.setClientSecret(this.props.clientSecret);
|
|
||||||
this.registerLogic.setSessionId(this.props.sessionId);
|
|
||||||
this.registerLogic.setRegistrationUrl(this.props.registrationUrl);
|
|
||||||
this.registerLogic.setIdSid(this.props.idSid);
|
|
||||||
this.registerLogic.recheckState();
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount: function() {
|
|
||||||
dis.unregister(this.dispatcherRef);
|
|
||||||
},
|
|
||||||
|
|
||||||
componentDidMount: function() {
|
|
||||||
// may have already done an HTTP hit (e.g. redirect from an email) so
|
|
||||||
// check for any pending response
|
|
||||||
var promise = this.registerLogic.getPromise();
|
|
||||||
if (promise) {
|
|
||||||
this.onProcessingRegistration(promise);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onHsUrlChanged: function(newHsUrl) {
|
|
||||||
this.registerLogic.setHomeserverUrl(newHsUrl);
|
|
||||||
},
|
|
||||||
|
|
||||||
onIsUrlChanged: function(newIsUrl) {
|
|
||||||
this.registerLogic.setIdentityServerUrl(newIsUrl);
|
|
||||||
},
|
|
||||||
|
|
||||||
onAction: function(payload) {
|
|
||||||
if (payload.action !== "registration_step_update") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.forceUpdate(); // registration state has changed.
|
|
||||||
},
|
|
||||||
|
|
||||||
onFormSubmit: function(formVals) {
|
|
||||||
var self = this;
|
|
||||||
this.setState({
|
|
||||||
errorText: "",
|
|
||||||
busy: true
|
|
||||||
});
|
|
||||||
this.onProcessingRegistration(this.registerLogic.register(formVals));
|
|
||||||
},
|
|
||||||
|
|
||||||
// Promise is resolved when the registration process is FULLY COMPLETE
|
|
||||||
onProcessingRegistration: function(promise) {
|
|
||||||
var self = this;
|
|
||||||
promise.done(function(response) {
|
|
||||||
if (!response || !response.access_token) {
|
|
||||||
console.warn(
|
|
||||||
"FIXME: Register fulfilled without a final response, " +
|
|
||||||
"did you break the promise chain?"
|
|
||||||
);
|
|
||||||
// no matter, we'll grab it direct
|
|
||||||
response = self.registerLogic.getCredentials();
|
|
||||||
}
|
|
||||||
if (!response || !response.user_id || !response.access_token) {
|
|
||||||
console.error("Final response is missing keys.");
|
|
||||||
self.setState({
|
|
||||||
errorText: "There was a problem processing the response."
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
self.props.onLoggedIn({
|
|
||||||
userId: response.user_id,
|
|
||||||
homeserverUrl: self.registerLogic.getHomeserverUrl(),
|
|
||||||
identityServerUrl: self.registerLogic.getIdentityServerUrl(),
|
|
||||||
accessToken: response.access_token
|
|
||||||
});
|
|
||||||
self.setState({
|
|
||||||
busy: false
|
|
||||||
});
|
|
||||||
}, function(err) {
|
|
||||||
if (err.message) {
|
|
||||||
self.setState({
|
|
||||||
errorText: err.message
|
|
||||||
});
|
|
||||||
}
|
|
||||||
self.setState({
|
|
||||||
busy: false
|
|
||||||
});
|
|
||||||
console.log(err);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onFormValidationFailed: function(errCode) {
|
|
||||||
var errMsg;
|
|
||||||
switch (errCode) {
|
|
||||||
case "RegistrationForm.ERR_PASSWORD_MISSING":
|
|
||||||
errMsg = "Missing password.";
|
|
||||||
break;
|
|
||||||
case "RegistrationForm.ERR_PASSWORD_MISMATCH":
|
|
||||||
errMsg = "Passwords don't match.";
|
|
||||||
break;
|
|
||||||
case "RegistrationForm.ERR_PASSWORD_LENGTH":
|
|
||||||
errMsg = `Password too short (min ${MIN_PASSWORD_LENGTH}).`;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.error("Unknown error code: %s", errCode);
|
|
||||||
errMsg = "An unknown error occurred.";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
errorText: errMsg
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onCaptchaLoaded: function(divIdName) {
|
|
||||||
this.registerLogic.tellStage("m.login.recaptcha", {
|
|
||||||
divId: divIdName
|
|
||||||
});
|
|
||||||
this.setState({
|
|
||||||
busy: false // requires user input
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
_getRegisterContentJsx: function() {
|
|
||||||
var currStep = this.registerLogic.getStep();
|
|
||||||
var registerStep;
|
|
||||||
switch (currStep) {
|
|
||||||
case "Register.COMPLETE":
|
|
||||||
break; // NOP
|
|
||||||
case "Register.START":
|
|
||||||
case "Register.STEP_m.login.dummy":
|
|
||||||
registerStep = (
|
|
||||||
<RegistrationForm
|
|
||||||
showEmail={true}
|
|
||||||
minPasswordLength={MIN_PASSWORD_LENGTH}
|
|
||||||
onError={this.onFormValidationFailed}
|
|
||||||
onRegisterClick={this.onFormSubmit} />
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
case "Register.STEP_m.login.email.identity":
|
|
||||||
registerStep = (
|
|
||||||
<div>
|
|
||||||
Please check your email to continue registration.
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
case "Register.STEP_m.login.recaptcha":
|
|
||||||
registerStep = (
|
|
||||||
<CaptchaForm onCaptchaLoaded={this.onCaptchaLoaded} />
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.error("Unknown register state: %s", currStep);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
var busySpinner;
|
|
||||||
if (this.state.busy) {
|
|
||||||
var Spinner = sdk.getComponent("elements.Spinner");
|
|
||||||
busySpinner = (
|
|
||||||
<Spinner />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>Create an account</h2>
|
|
||||||
{registerStep}
|
|
||||||
<div className="mx_Login_error">{this.state.errorText}</div>
|
|
||||||
{busySpinner}
|
|
||||||
<ServerConfig ref="serverConfig"
|
|
||||||
withToggleButton={true}
|
|
||||||
defaultHsUrl={this.state.enteredHomeserverUrl}
|
|
||||||
defaultIsUrl={this.state.enteredIdentityServerUrl}
|
|
||||||
onHsUrlChanged={this.onHsUrlChanged}
|
|
||||||
onIsUrlChanged={this.onIsUrlChanged}
|
|
||||||
delayTimeMs={1000} />
|
|
||||||
<a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
|
|
||||||
I already have an account
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
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>
|
|
||||||
{this._getRegisterContentJsx()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -20,7 +20,7 @@ var React = require('react');
|
||||||
|
|
||||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
||||||
|
|
||||||
var DateUtils = require('../../../DateUtils');
|
var DateUtils = require('matrix-react-sdk/lib/DateUtils');
|
||||||
var filesize = require('filesize');
|
var filesize = require('filesize');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
|
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
/*
|
|
||||||
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 sdk = require('matrix-react-sdk')
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A pure UI component which displays a registration form.
|
|
||||||
*/
|
|
||||||
module.exports = React.createClass({
|
|
||||||
displayName: 'RegistrationForm',
|
|
||||||
|
|
||||||
propTypes: {
|
|
||||||
defaultEmail: React.PropTypes.string,
|
|
||||||
defaultUsername: React.PropTypes.string,
|
|
||||||
showEmail: React.PropTypes.bool,
|
|
||||||
minPasswordLength: React.PropTypes.number,
|
|
||||||
onError: React.PropTypes.func,
|
|
||||||
onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
|
|
||||||
},
|
|
||||||
|
|
||||||
getDefaultProps: function() {
|
|
||||||
return {
|
|
||||||
showEmail: false,
|
|
||||||
minPasswordLength: 6,
|
|
||||||
onError: function(e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
email: this.props.defaultEmail,
|
|
||||||
username: this.props.defaultUsername,
|
|
||||||
password: null,
|
|
||||||
passwordConfirm: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
onSubmit: function(ev) {
|
|
||||||
ev.preventDefault();
|
|
||||||
|
|
||||||
var pwd1 = this.refs.password.value.trim();
|
|
||||||
var pwd2 = this.refs.passwordConfirm.value.trim()
|
|
||||||
|
|
||||||
var errCode;
|
|
||||||
if (!pwd1 || !pwd2) {
|
|
||||||
errCode = "RegistrationForm.ERR_PASSWORD_MISSING";
|
|
||||||
}
|
|
||||||
else if (pwd1 !== pwd2) {
|
|
||||||
errCode = "RegistrationForm.ERR_PASSWORD_MISMATCH";
|
|
||||||
}
|
|
||||||
else if (pwd1.length < this.props.minPasswordLength) {
|
|
||||||
errCode = "RegistrationForm.ERR_PASSWORD_LENGTH";
|
|
||||||
}
|
|
||||||
if (errCode) {
|
|
||||||
this.props.onError(errCode);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var promise = this.props.onRegisterClick({
|
|
||||||
username: this.refs.username.value.trim(),
|
|
||||||
password: pwd1,
|
|
||||||
email: this.refs.email.value.trim()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (promise) {
|
|
||||||
ev.target.disabled = true;
|
|
||||||
promise.finally(function() {
|
|
||||||
ev.target.disabled = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
var emailSection, registerButton;
|
|
||||||
if (this.props.showEmail) {
|
|
||||||
emailSection = (
|
|
||||||
<input className="mx_Login_field" type="text" ref="email"
|
|
||||||
autoFocus={true} placeholder="Email address"
|
|
||||||
defaultValue={this.state.email} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (this.props.onRegisterClick) {
|
|
||||||
registerButton = (
|
|
||||||
<input className="mx_Login_submit" type="submit" value="Register" />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<form onSubmit={this.onSubmit}>
|
|
||||||
{emailSection}
|
|
||||||
<br />
|
|
||||||
<input className="mx_Login_field" type="text" ref="username"
|
|
||||||
placeholder="User name" defaultValue={this.state.username} />
|
|
||||||
<br />
|
|
||||||
<input className="mx_Login_field" type="password" ref="password"
|
|
||||||
placeholder="Password" defaultValue={this.state.password} />
|
|
||||||
<br />
|
|
||||||
<input className="mx_Login_field" type="password" ref="passwordConfirm"
|
|
||||||
placeholder="Confirm password"
|
|
||||||
defaultValue={this.state.passwordConfirm} />
|
|
||||||
<br />
|
|
||||||
{registerButton}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -1,161 +0,0 @@
|
||||||
/*
|
|
||||||
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 Modal = require('matrix-react-sdk/lib/Modal');
|
|
||||||
var sdk = require('matrix-react-sdk')
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A pure UI component which displays the HS and IS to use.
|
|
||||||
*/
|
|
||||||
module.exports = React.createClass({
|
|
||||||
displayName: 'ServerConfig',
|
|
||||||
|
|
||||||
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('dialogs.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/>
|
|
||||||
<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
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
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.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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
var DateUtils = require('../../../DateUtils');
|
var DateUtils = require('matrix-react-sdk/lib/DateUtils');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'MessageTimestamp',
|
displayName: 'MessageTimestamp',
|
||||||
|
|
|
||||||
|
|
@ -76,8 +76,9 @@ skin['dialogs.LogoutPrompt'] = require('matrix-react-sdk/lib/components/views/di
|
||||||
skin['structures.CreateRoom'] = require('matrix-react-sdk/lib/components/structures/CreateRoom');
|
skin['structures.CreateRoom'] = require('matrix-react-sdk/lib/components/structures/CreateRoom');
|
||||||
skin['structures.UserSettings'] = require('matrix-react-sdk/lib/components/structures/UserSettings');
|
skin['structures.UserSettings'] = require('matrix-react-sdk/lib/components/structures/UserSettings');
|
||||||
skin['structures.RoomView'] = require('matrix-react-sdk/lib/components/structures/RoomView');
|
skin['structures.RoomView'] = require('matrix-react-sdk/lib/components/structures/RoomView');
|
||||||
|
skin['structures.MatrixChat'] = require('matrix-react-sdk/lib/components/structures/MatrixChat');
|
||||||
|
|
||||||
// Old style stuff
|
// Old style stuff - this stuff only exists in VECTOR
|
||||||
skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
|
skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
|
||||||
skin['molecules.BottomLeftMenuTile'] = require('./views/molecules/BottomLeftMenuTile');
|
skin['molecules.BottomLeftMenuTile'] = require('./views/molecules/BottomLeftMenuTile');
|
||||||
skin['molecules.DateSeparator'] = require('./views/molecules/DateSeparator');
|
skin['molecules.DateSeparator'] = require('./views/molecules/DateSeparator');
|
||||||
|
|
@ -94,6 +95,5 @@ skin['organisms.RoomDirectory'] = require('./views/organisms/RoomDirectory');
|
||||||
skin['organisms.RoomSubList'] = require('./views/organisms/RoomSubList');
|
skin['organisms.RoomSubList'] = require('./views/organisms/RoomSubList');
|
||||||
skin['organisms.ViewSource'] = require('./views/organisms/ViewSource');
|
skin['organisms.ViewSource'] = require('./views/organisms/ViewSource');
|
||||||
skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage');
|
skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage');
|
||||||
skin['pages.MatrixChat'] = require('./views/pages/MatrixChat');
|
|
||||||
|
|
||||||
module.exports = skin;
|
module.exports = skin;
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ var HTML5Backend = require('react-dnd-html5-backend');
|
||||||
var sdk = require('matrix-react-sdk')
|
var sdk = require('matrix-react-sdk')
|
||||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
var dis = require('matrix-react-sdk/lib/dispatcher');
|
||||||
|
|
||||||
var VectorConferenceHandler = require('../../../../modules/VectorConferenceHandler');
|
var VectorConferenceHandler = require('../../../../VectorConferenceHandler');
|
||||||
var CallHandler = require("matrix-react-sdk/lib/CallHandler");
|
var CallHandler = require("matrix-react-sdk/lib/CallHandler");
|
||||||
|
|
||||||
var LeftPanel = React.createClass({
|
var LeftPanel = React.createClass({
|
||||||
|
|
|
||||||
|
|
@ -1,229 +0,0 @@
|
||||||
/*
|
|
||||||
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 sdk = require('matrix-react-sdk')
|
|
||||||
|
|
||||||
var VectorConferenceHandler = require('../../../../modules/VectorConferenceHandler');
|
|
||||||
var MatrixChatController = require('matrix-react-sdk/lib/controllers/pages/MatrixChat')
|
|
||||||
|
|
||||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
|
||||||
var Matrix = require("matrix-js-sdk");
|
|
||||||
|
|
||||||
var Notifier = require("matrix-react-sdk/lib/Notifier");
|
|
||||||
var ContextualMenu = require("matrix-react-sdk/lib/ContextualMenu");
|
|
||||||
var Login = require("../../../../components/structures/login/Login");
|
|
||||||
var Registration = require("../../../../components/structures/login/Registration");
|
|
||||||
var PostRegistration = require("../../../../components/structures/login/PostRegistration");
|
|
||||||
var config = require("../../../../../config.json");
|
|
||||||
|
|
||||||
module.exports = React.createClass({
|
|
||||||
displayName: 'MatrixChat',
|
|
||||||
mixins: [MatrixChatController],
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
width: 10000,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
componentDidMount: function() {
|
|
||||||
window.addEventListener('resize', this.handleResize);
|
|
||||||
this.handleResize();
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount: function() {
|
|
||||||
window.removeEventListener('resize', this.handleResize);
|
|
||||||
},
|
|
||||||
|
|
||||||
onAliasClick: function(event, alias) {
|
|
||||||
event.preventDefault();
|
|
||||||
dis.dispatch({action: 'view_room_alias', room_alias: alias});
|
|
||||||
},
|
|
||||||
|
|
||||||
onUserClick: function(event, userId) {
|
|
||||||
event.preventDefault();
|
|
||||||
var MemberInfo = sdk.getComponent('rooms.MemberInfo');
|
|
||||||
var member = new Matrix.RoomMember(null, userId);
|
|
||||||
ContextualMenu.createMenu(MemberInfo, {
|
|
||||||
member: member,
|
|
||||||
right: window.innerWidth - event.pageX,
|
|
||||||
top: event.pageY
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onLogoutClick: function(event) {
|
|
||||||
dis.dispatch({
|
|
||||||
action: 'logout'
|
|
||||||
});
|
|
||||||
event.stopPropagation();
|
|
||||||
event.preventDefault();
|
|
||||||
},
|
|
||||||
|
|
||||||
handleResize: function(e) {
|
|
||||||
var hideLhsThreshold = 1000;
|
|
||||||
var showLhsThreshold = 1000;
|
|
||||||
var hideRhsThreshold = 820;
|
|
||||||
var showRhsThreshold = 820;
|
|
||||||
|
|
||||||
if (this.state.width > hideLhsThreshold && window.innerWidth <= hideLhsThreshold) {
|
|
||||||
dis.dispatch({ action: 'hide_left_panel' });
|
|
||||||
}
|
|
||||||
if (this.state.width <= showLhsThreshold && window.innerWidth > showLhsThreshold) {
|
|
||||||
dis.dispatch({ action: 'show_left_panel' });
|
|
||||||
}
|
|
||||||
if (this.state.width > hideRhsThreshold && window.innerWidth <= hideRhsThreshold) {
|
|
||||||
dis.dispatch({ action: 'hide_right_panel' });
|
|
||||||
}
|
|
||||||
if (this.state.width <= showRhsThreshold && window.innerWidth > showRhsThreshold) {
|
|
||||||
dis.dispatch({ action: 'show_right_panel' });
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({width: window.innerWidth});
|
|
||||||
},
|
|
||||||
|
|
||||||
onRoomCreated: function(room_id) {
|
|
||||||
dis.dispatch({
|
|
||||||
action: "view_room",
|
|
||||||
room_id: room_id,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onRegisterClick: function() {
|
|
||||||
this.showScreen("register");
|
|
||||||
},
|
|
||||||
|
|
||||||
onLoginClick: function() {
|
|
||||||
this.showScreen("login");
|
|
||||||
},
|
|
||||||
|
|
||||||
onRegistered: function(credentials) {
|
|
||||||
this.onLoggedIn(credentials);
|
|
||||||
// do post-registration stuff
|
|
||||||
this.showScreen("post_registration");
|
|
||||||
},
|
|
||||||
|
|
||||||
onFinishPostRegistration: function() {
|
|
||||||
// Don't confuse this with "PageType" which is the middle window to show
|
|
||||||
this.setState({
|
|
||||||
screen: undefined
|
|
||||||
});
|
|
||||||
this.showScreen("settings");
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
var LeftPanel = sdk.getComponent('organisms.LeftPanel');
|
|
||||||
var RoomView = sdk.getComponent('structures.RoomView');
|
|
||||||
var RightPanel = sdk.getComponent('organisms.RightPanel');
|
|
||||||
var UserSettings = sdk.getComponent('structures.UserSettings');
|
|
||||||
var CreateRoom = sdk.getComponent('structures.CreateRoom');
|
|
||||||
var RoomDirectory = sdk.getComponent('organisms.RoomDirectory');
|
|
||||||
var MatrixToolbar = sdk.getComponent('molecules.MatrixToolbar');
|
|
||||||
|
|
||||||
// needs to be before normal PageTypes as you are logged in technically
|
|
||||||
if (this.state.screen == 'post_registration') {
|
|
||||||
return (
|
|
||||||
<PostRegistration
|
|
||||||
onComplete={this.onFinishPostRegistration} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
else if (this.state.logged_in && this.state.ready) {
|
|
||||||
var page_element;
|
|
||||||
var right_panel = "";
|
|
||||||
|
|
||||||
switch (this.state.page_type) {
|
|
||||||
case this.PageTypes.RoomView:
|
|
||||||
page_element = (
|
|
||||||
<RoomView
|
|
||||||
roomId={this.state.currentRoom}
|
|
||||||
key={this.state.currentRoom}
|
|
||||||
ConferenceHandler={VectorConferenceHandler} />
|
|
||||||
);
|
|
||||||
right_panel = <RightPanel roomId={this.state.currentRoom} collapsed={this.state.collapse_rhs} />
|
|
||||||
break;
|
|
||||||
case this.PageTypes.UserSettings:
|
|
||||||
page_element = <UserSettings />
|
|
||||||
right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
|
|
||||||
break;
|
|
||||||
case this.PageTypes.CreateRoom:
|
|
||||||
page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/>
|
|
||||||
right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
|
|
||||||
break;
|
|
||||||
case this.PageTypes.RoomDirectory:
|
|
||||||
page_element = <RoomDirectory />
|
|
||||||
right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Fix duplication here and do conditionals like we do above
|
|
||||||
if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
|
|
||||||
return (
|
|
||||||
<div className="mx_MatrixChat_wrapper">
|
|
||||||
<MatrixToolbar />
|
|
||||||
<div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
|
|
||||||
<LeftPanel selectedRoom={this.state.currentRoom} collapsed={this.state.collapse_lhs} />
|
|
||||||
<main className="mx_MatrixChat_middlePanel">
|
|
||||||
{page_element}
|
|
||||||
</main>
|
|
||||||
{right_panel}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return (
|
|
||||||
<div className="mx_MatrixChat">
|
|
||||||
<LeftPanel selectedRoom={this.state.currentRoom} collapsed={this.state.collapse_lhs} />
|
|
||||||
<main className="mx_MatrixChat_middlePanel">
|
|
||||||
{page_element}
|
|
||||||
</main>
|
|
||||||
{right_panel}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else if (this.state.logged_in) {
|
|
||||||
var Spinner = sdk.getComponent('elements.Spinner');
|
|
||||||
return (
|
|
||||||
<div className="mx_MatrixChat_splash">
|
|
||||||
<Spinner />
|
|
||||||
<a href="#" className="mx_MatrixChat_splashButtons" onClick={ this.onLogoutClick }>Logout</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else if (this.state.screen == 'register') {
|
|
||||||
return (
|
|
||||||
<Registration
|
|
||||||
clientSecret={this.state.register_client_secret}
|
|
||||||
sessionId={this.state.register_session_id}
|
|
||||||
idSid={this.state.register_id_sid}
|
|
||||||
hsUrl={config.default_hs_url}
|
|
||||||
isUrl={config.default_is_url}
|
|
||||||
registrationUrl={this.props.registrationUrl}
|
|
||||||
onLoggedIn={this.onRegistered}
|
|
||||||
onLoginClick={this.onLoginClick} />
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Login
|
|
||||||
onLoggedIn={this.onLoggedIn}
|
|
||||||
onRegisterClick={this.onRegisterClick}
|
|
||||||
homeserverUrl={config.default_hs_url}
|
|
||||||
identityServerUrl={config.default_is_url} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -21,12 +21,16 @@ var React = require("react");
|
||||||
var ReactDOM = require("react-dom");
|
var ReactDOM = require("react-dom");
|
||||||
var sdk = require("matrix-react-sdk");
|
var sdk = require("matrix-react-sdk");
|
||||||
sdk.loadSkin(require('../skins/vector/skindex'));
|
sdk.loadSkin(require('../skins/vector/skindex'));
|
||||||
sdk.loadModule(require('../modules/VectorConferenceHandler'));
|
var VectorConferenceHandler = require('../VectorConferenceHandler');
|
||||||
|
var configJson = require("../../config.json");
|
||||||
|
|
||||||
var qs = require("querystring");
|
var qs = require("querystring");
|
||||||
|
|
||||||
var lastLocationHashSet = null;
|
var lastLocationHashSet = null;
|
||||||
|
|
||||||
|
var CallHandler = require("matrix-react-sdk/lib/CallHandler");
|
||||||
|
CallHandler.setConferenceHandler(VectorConferenceHandler);
|
||||||
|
|
||||||
function checkBrowserFeatures(featureList) {
|
function checkBrowserFeatures(featureList) {
|
||||||
if (!window.Modernizr) {
|
if (!window.Modernizr) {
|
||||||
console.error("Cannot check features - Modernizr global is missing.");
|
console.error("Cannot check features - Modernizr global is missing.");
|
||||||
|
|
@ -136,9 +140,13 @@ window.onload = function() {
|
||||||
|
|
||||||
function loadApp() {
|
function loadApp() {
|
||||||
if (validBrowser) {
|
if (validBrowser) {
|
||||||
var MatrixChat = sdk.getComponent('pages.MatrixChat');
|
var MatrixChat = sdk.getComponent('structures.MatrixChat');
|
||||||
window.matrixChat = ReactDOM.render(
|
window.matrixChat = ReactDOM.render(
|
||||||
<MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
|
<MatrixChat
|
||||||
|
onNewScreen={onNewScreen}
|
||||||
|
registrationUrl={makeRegistrationUrl()}
|
||||||
|
ConferenceHandler={VectorConferenceHandler}
|
||||||
|
config={configJson} />,
|
||||||
document.getElementById('matrixchat')
|
document.getElementById('matrixchat')
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue