mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

brings back the functionality in login/register/screens that got lost in @kegsay's refactor. specifically:

Browse source 
1) custom HS/IS urls are now persisted in HTML5 local storage.  As a result, all the login components now distinguish between default HS/IS URLs and custom specified ones again. (
2) custom HS/IS urls are synchronised between the instances of ServerConfig found in the Login, Registration and Forgot Password screens.
3) username are persisted over changing homeserver (but not password, to stop accidentally leaking passwords to the wrong server)
4) correctly interpret a blank URL field as meaning the placeholder text
5) when toggling custom URLs on and off, remember what the custom values were, and use the default URLs if custom mode is not engaged

also, guest access now upholds custom HS/IS URLs found in local storage rather than being limited to the server config ()

also adds assorted comments and improved console debug and a few minor cosmetic changes to the login components.

this commit sponsored by VS27...
This commit is contained in:
Matthew Hodgson 2016-03-06 14:33:36 -05:00
parent b66ca74ede
commit 0bb58dd60c
8 changed files with 177 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/MatrixClientPeg.js
View file

@ -25,6 +25,7 @@ var matrixClient = null;
var localStorage = window.localStorage;
function deviceId() {
// XXX: is Math.random()'s deterministicity a problem here?
var id = Math.floor(Math.random()*16777215).toString(16);
id = "W" + "000000".substring(id.length) + id;
if (localStorage) {
@ -101,10 +102,12 @@ class MatrixClient {
// -matthew
replaceUsingUrls(hs_url, is_url) {
// ...not to be confused with MatrixClientPeg's createClient...
matrixClient = Matrix.createClient({
baseUrl: hs_url,
idBaseUrl: is_url
});
// XXX: factor this out with the localStorage setting in replaceUsingAccessToken
if (localStorage) {
try {
@ -115,7 +118,7 @@ class MatrixClient {
}
} else {
console.warn("No local storage available: can't persist HS/IS URLs!");
}
}
}
replaceUsingAccessToken(hs_url, is_url, user_id, access_token, isGuest) {
@ -123,10 +126,11 @@ class MatrixClient {
try {
localStorage.clear();
} catch (e) {
console.warn("Error using local storage");
console.warn("Error clearing local storage", e);
}
}
this.guestAccess.markAsGuest(Boolean(isGuest));
// ...not to be confused with Matrix.createClient()...
createClient(hs_url, is_url, user_id, access_token, this.guestAccess);
if (localStorage) {
try {
@ -136,7 +140,7 @@ class MatrixClient {
localStorage.setItem("mx_access_token", access_token);
console.log("Session persisted for %s", user_id);
} catch (e) {
console.warn("Error using local storage: can't persist session!");
console.warn("Error using local storage: can't persist session!", e);
}
} else {
console.warn("No local storage available: can't persist session!");

73
src/components/structures/MatrixChat.js
View file

@ -85,6 +85,32 @@ module.exports = React.createClass({
};
},
getCurrentHsUrl: function() {
if (MatrixClientPeg.get()) {
return MatrixClientPeg.get().getHomeserverUrl();
}
else if (window.localStorage && window.localStorage.getItem("mx_hs_url")) {
return window.localStorage.getItem("mx_hs_url");
}
else if (this.props.config) {
return this.props.config.default_hs_url
}
return "https://matrix.org";
},
getCurrentIsUrl: function() {
if (MatrixClientPeg.get()) {
return MatrixClientPeg.get().getIdentityServerUrl();
}
else if (window.localStorage && window.localStorage.getItem("mx_is_url")) {
return window.localStorage.getItem("mx_is_url");
}
else if (this.props.config) {
return this.props.config.default_is_url
}
return "https://matrix.org";
},
componentWillMount: function() {
this.favicon = new Favico({animation: 'none'});
},
@ -92,8 +118,8 @@ module.exports = React.createClass({
componentDidMount: function() {
this._autoRegisterAsGuest = false;
if (this.props.enableGuest) {
if (!this.props.config || !this.props.config.default_hs_url) {
console.error("Cannot enable guest access: No supplied config prop for HS/IS URLs");
if (!this.getCurrentHsUrl() || !this.getCurrentIsUrl()) {
console.error("Cannot enable guest access: can't determine HS/IS URLs to use");
}
else if (this.props.startingQueryParams.client_secret && this.props.startingQueryParams.sid) {
console.log("Not registering as guest; registration.");
@ -155,10 +181,10 @@ module.exports = React.createClass({
_registerAsGuest: function() {
var self = this;
var config = this.props.config;
console.log("Doing guest login on %s", config.default_hs_url);
console.log("Doing guest login on %s", this.getCurrentHsUrl());
MatrixClientPeg.replaceUsingUrls(
config.default_hs_url, config.default_is_url
this.getCurrentHsUrl(),
this.getCurrentIsUrl()
);
MatrixClientPeg.get().registerGuest().done(function(creds) {
console.log("Registered as guest: %s", creds.user_id);
@ -166,8 +192,8 @@ module.exports = React.createClass({
self.onLoggedIn({
userId: creds.user_id,
accessToken: creds.access_token,
homeserverUrl: config.default_hs_url,
identityServerUrl: config.default_is_url,
homeserverUrl: self.getCurrentHsUrl(),
identityServerUrl: self.getCurrentIsUrl(),
guest: true
});
}, function(err) {
@ -188,7 +214,12 @@ module.exports = React.createClass({
switch (payload.action) {
case 'logout':
if (window.localStorage) {
// preserve our HS & IS URLs for convenience
var hsUrl = this.getCurrentHsUrl();
var isUrl = this.getCurrentIsUrl();
window.localStorage.clear();
window.localStorage.setItem("mx_hs_url", hsUrl);
window.localStorage.setItem("mx_is_url", isUrl);
}
Notifier.stop();
UserActivity.stop();
@ -711,7 +742,7 @@ module.exports = React.createClass({
}
}
else {
console.error("Unknown screen : %s", screen);
console.info("Ignoring showScreen for '%s'", screen);
}
},
@ -875,6 +906,8 @@ module.exports = React.createClass({
var NewVersionBar = sdk.getComponent('globals.NewVersionBar');
var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
// work out the HS URL prompts we should show for
// needs to be before normal PageTypes as you are logged in technically
if (this.state.screen == 'post_registration') {
return (
@ -970,26 +1003,34 @@ module.exports = React.createClass({
username={this.state.upgradeUsername}
disableUsernameChanges={Boolean(this.state.upgradeUsername)}
guestAccessToken={this.state.guestAccessToken}
hsUrl={this.props.config.default_hs_url}
isUrl={this.props.config.default_is_url}
defaultHsUrl={this.props.config.default_hs_url}
defaultIsUrl={this.props.config.default_is_url}
initialHsUrl={this.getCurrentHsUrl()}
initialIsUrl={this.getCurrentIsUrl()}
registrationUrl={this.props.registrationUrl}
onLoggedIn={this.onRegistered}
onLoginClick={this.onLoginClick} />
onLoginClick={this.onLoginClick}
onRegisterClick={this.onRegisterClick} />
);
} else if (this.state.screen == 'forgot_password') {
return (
<ForgotPassword
homeserverUrl={this.props.config.default_hs_url}
identityServerUrl={this.props.config.default_is_url}
onComplete={this.onLoginClick} />
defaultHsUrl={this.props.config.default_hs_url}
defaultIsUrl={this.props.config.default_is_url}
initialHsUrl={this.getCurrentHsUrl()}
initialIsUrl={this.getCurrentIsUrl()}
onComplete={this.onLoginClick}
onLoginClick={this.onLoginClick} />
);
} else {
return (
<Login
onLoggedIn={this.onLoggedIn}
onRegisterClick={this.onRegisterClick}
homeserverUrl={this.props.config.default_hs_url}
identityServerUrl={this.props.config.default_is_url}
defaultHsUrl={this.props.config.default_hs_url}
defaultIsUrl={this.props.config.default_is_url}
initialHsUrl={this.getCurrentHsUrl()}
initialIsUrl={this.getCurrentIsUrl()}
onForgotPasswordClick={this.onForgotPasswordClick}
onLoginAsGuestClick={this.props.enableGuest && this.props.config && this.props.config.default_hs_url ? this._registerAsGuest: undefined}
/>

27
src/components/structures/login/ForgotPassword.js
View file

@ -27,8 +27,12 @@ module.exports = React.createClass({
displayName: 'ForgotPassword',
propTypes: {
homeserverUrl: React.PropTypes.string,
identityServerUrl: React.PropTypes.string,
defaultHsUrl: React.PropTypes.string,
defaultIsUrl: React.PropTypes.string,
initialHsUrl: React.PropTypes.string,
initialIsUrl: React.PropTypes.string,
onLoginClick: React.PropTypes.func,
onRegisterClick: React.PropTypes.func,
onComplete: React.PropTypes.func.isRequired
},
@ -152,8 +156,9 @@ module.exports = React.createClass({
else {
resetPasswordJsx = (
<div>
To reset your password, enter the email address linked to your account:
<br />
<div className="mx_Login_prompt">
To reset your password, enter the email address linked to your account:
</div>
<div>
<form onSubmit={this.onSubmitForm}>
<input className="mx_Login_field" ref="user" type="text"
@ -175,11 +180,21 @@ module.exports = React.createClass({
</form>
<ServerConfig ref="serverConfig"
withToggleButton={true}
defaultHsUrl={this.props.homeserverUrl}
defaultIsUrl={this.props.identityServerUrl}
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
initialHsUrl={this.props.initialHsUrl}
initialIsUrl={this.props.initialIsUrl}
onHsUrlChanged={this.onHsUrlChanged}
onIsUrlChanged={this.onIsUrlChanged}
delayTimeMs={0}/>
<div className="mx_Login_error">
</div>
<a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
Return to login
</a>
<a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
Create a new account
</a>
<LoginFooter />
</div>
</div>

50
src/components/structures/login/Login.js
View file

@ -30,28 +30,29 @@ var ServerConfig = require("../../views/login/ServerConfig");
module.exports = React.createClass({displayName: 'Login',
propTypes: {
onLoggedIn: React.PropTypes.func.isRequired,
homeserverUrl: React.PropTypes.string,
identityServerUrl: React.PropTypes.string,
initialHsUrl: React.PropTypes.string,
initialIsUrl: React.PropTypes.string,
defaultHsUrl: React.PropTypes.string,
defaultIsUrl: React.PropTypes.string,
// login shouldn't know or care how registration is done.
onRegisterClick: React.PropTypes.func.isRequired,
// login shouldn't care how password recovery is done.
onForgotPasswordClick: React.PropTypes.func,
onLoginAsGuestClick: React.PropTypes.func,
},
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
enteredHomeserverUrl: this.props.initialHsUrl || this.props.defaultHsUrl,
enteredIdentityServerUrl: this.props.initialIsUrl || this.props.defaultIsUrl,
// used for preserving username when changing homeserver
username: "",
};
},
@ -76,12 +77,26 @@ module.exports = React.createClass({displayName: 'Login',
});
},
onUsernameChanged: function(username) {
this.setState({ username: username });
},
onHsUrlChanged: function(newHsUrl) {
this._initLoginLogic(newHsUrl);
var self = this;
this.setState({
enteredHomeserverUrl: newHsUrl
}, function() {
self._initLoginLogic(newHsUrl);
});
},
onIsUrlChanged: function(newIsUrl) {
this._initLoginLogic(null, newIsUrl);
var self = this;
this.setState({
enteredIdentityServerUrl: newIsUrl
}, function() {
self._initLoginLogic(null, newIsUrl);
});
},
_initLoginLogic: function(hsUrl, isUrl) {
@ -162,6 +177,8 @@ module.exports = React.createClass({displayName: 'Login',
return (
<PasswordLogin
onSubmit={this.onPasswordLogin}
initialUsername={this.state.username}
onUsernameChanged={this.onUsernameChanged}
onForgotPasswordClick={this.props.onForgotPasswordClick} />
);
case 'm.login.cas':
@ -203,8 +220,10 @@ module.exports = React.createClass({displayName: 'Login',
{ this.componentForStep(this._getCurrentFlowStep()) }
<ServerConfig ref="serverConfig"
withToggleButton={true}
defaultHsUrl={this.props.homeserverUrl}
defaultIsUrl={this.props.identityServerUrl}
initialHsUrl={this.props.initialHsUrl}
initialIsUrl={this.props.initialIsUrl}
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onHsUrlChanged={this.onHsUrlChanged}
onIsUrlChanged={this.onIsUrlChanged}
delayTimeMs={1000}/>
@ -216,7 +235,6 @@ module.exports = React.createClass({displayName: 'Login',
Create a new account
</a>
{ loginAsGuestJsx }
<br/>
<LoginFooter />
</div>
</div>

20
src/components/structures/login/Registration.js
View file

@ -36,8 +36,10 @@ module.exports = React.createClass({
sessionId: React.PropTypes.string,
registrationUrl: React.PropTypes.string,
idSid: React.PropTypes.string,
hsUrl: React.PropTypes.string,
isUrl: React.PropTypes.string,
initialHsUrl: React.PropTypes.string,
initialIsUrl: React.PropTypes.string,
defaultHsUrl: React.PropTypes.string,
defaultIsUrl: React.PropTypes.string,
email: React.PropTypes.string,
username: React.PropTypes.string,
guestAccessToken: React.PropTypes.string,
@ -50,8 +52,6 @@ module.exports = React.createClass({
return {
busy: false,
errorText: null,
enteredHomeserverUrl: this.props.hsUrl,
enteredIdentityServerUrl: this.props.isUrl
};
},
@ -59,7 +59,7 @@ module.exports = React.createClass({
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.props.initialHsUrl, this.props.initialIsUrl
);
this.registerLogic.setClientSecret(this.props.clientSecret);
this.registerLogic.setSessionId(this.props.sessionId);
@ -242,11 +242,15 @@ module.exports = React.createClass({
{busySpinner}
<ServerConfig ref="serverConfig"
withToggleButton={true}
defaultHsUrl={this.state.enteredHomeserverUrl}
defaultIsUrl={this.state.enteredIdentityServerUrl}
initialHsUrl={this.props.initialHsUrl}
initialIsUrl={this.props.initialIsUrl}
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onHsUrlChanged={this.onHsUrlChanged}
onIsUrlChanged={this.onIsUrlChanged}
delayTimeMs={1000} />
<div className="mx_Login_error">
</div>
<a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
I already have an account
</a>
@ -256,11 +260,13 @@ module.exports = React.createClass({
render: function() {
var LoginHeader = sdk.getComponent('login.LoginHeader');
var LoginFooter = sdk.getComponent('login.LoginFooter');
return (
<div className="mx_Login">
<div className="mx_Login_box">
<LoginHeader />
{this._getRegisterContentJsx()}
<LoginFooter />
</div>
</div>
);

7
src/components/views/login/CustomServerDialog.js
View file

@ -31,12 +31,11 @@ module.exports = React.createClass({
servers by specifying a different Home server URL.
<br/>
This allows you to use this app with an existing Matrix account on
a different Home server.
a different home server.
<br/>
<br/>
You can also set a custom Identity server but this will affect
people&#39;s ability to find you if you use a server in a group other
than the main Matrix.org group.
You can also set a custom identity server but this will typically prevent
interaction with users based on email address.
</span>
</div>
<div className="mx_Dialog_buttons">

19
src/components/views/login/PasswordLogin.js
View file

@ -23,13 +23,24 @@ var ReactDOM = require('react-dom');
module.exports = React.createClass({displayName: 'PasswordLogin',
propTypes: {
onSubmit: React.PropTypes.func.isRequired, // fn(username, password)
onForgotPasswordClick: React.PropTypes.func // fn()
onForgotPasswordClick: React.PropTypes.func, // fn()
initialUsername: React.PropTypes.string,
initialPassword: React.PropTypes.string,
onUsernameChanged: React.PropTypes.func,
onPasswordChanged: React.PropTypes.func,
},
getDefaultProps: function() {
return {
onUsernameChanged: function() {},
onPasswordChanged: function() {},
};
},
getInitialState: function() {
return {
username: "",
password: ""
username: this.props.initialUsername,
password: this.props.initialPassword,
};
},
@ -40,10 +51,12 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
onUsernameChanged: function(ev) {
this.setState({username: ev.target.value});
this.props.onUsernameChanged(ev.target.value);
},
onPasswordChanged: function(ev) {
this.setState({password: ev.target.value});
this.props.onPasswordChanged(ev.target.value);
},
render: function() {

46
src/components/views/login/ServerConfig.js
View file

@ -29,8 +29,10 @@ module.exports = React.createClass({
propTypes: {
onHsUrlChanged: React.PropTypes.func,
onIsUrlChanged: React.PropTypes.func,
defaultHsUrl: React.PropTypes.string,
defaultIsUrl: React.PropTypes.string,
initialHsUrl: React.PropTypes.string, // whatever the current value is when we create the component
initialIsUrl: React.PropTypes.string, // whatever the current value is when we create the component
defaultHsUrl: React.PropTypes.string, // e.g. https://matrix.org
defaultIsUrl: React.PropTypes.string, // e.g. https://vector.im
withToggleButton: React.PropTypes.bool,
delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
},
@ -46,19 +48,21 @@ module.exports = React.createClass({
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
hs_url: this.props.initialHsUrl,
is_url: this.props.initialIsUrl,
// if withToggleButton is false, then show the config all the time given we have no way otherwise of making it visible
configVisible: !this.props.withToggleButton ||
(this.props.initialHsUrl !== this.props.defaultHsUrl) ||
(this.props.initialIsUrl !== this.props.defaultIsUrl)
}
},
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.replace(/\/$/, ""));
var hsUrl = this.state.hs_url.trim().replace(/\/$/, "");
if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
this.props.onHsUrlChanged(hsUrl);
});
});
},
@ -66,7 +70,9 @@ module.exports = React.createClass({
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.replace(/\/$/, ""));
var isUrl = this.state.is_url.trim().replace(/\/$/, "");
if (isUrl === "") isUrl = this.props.defaultIsUrl;
this.props.onIsUrlChanged(isUrl);
});
});
},
@ -78,18 +84,18 @@ module.exports = React.createClass({
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
});
if (!ev.target.checked) {
this.props.onHsUrlChanged(this.props.defaultHsUrl);
this.props.onIsUrlChanged(this.props.defaultIsUrl);
}
else {
this.props.onHsUrlChanged(this.state.hs_url);
this.props.onIsUrlChanged(this.state.is_url);
}
},
showHelpPopup: function() {
@ -124,14 +130,14 @@ module.exports = React.createClass({
Home server URL
</label>
<input className="mx_Login_field" id="hsurl" type="text"
placeholder={this.state.original_hs_url}
placeholder={this.props.defaultHsUrl}
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}
placeholder={this.props.defaultIsUrl}
value={this.state.is_url}
onChange={this.onIdentityServerChanged} />
<a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>