From 8f5e825cd50ee045cd70532d7938bd2cef5d1765 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 20 Dec 2018 17:26:13 -0700 Subject: [PATCH 1/4] Fix browser navigation not working between /home, /login, /register, etc All of the anchors were pointed at `#` which, when clicked, would trigger a hash change in the browser. This change races the change made by the screen handling where the screen handling ends up losing. Because the hash is then tracked as empty rather than `#/login` (for example), the state machine considers future changes as no-ops and doesn't do anything with them. By using `preventDefault` and `stopPropagation` on the anchor click events, we prevent the browser from automatically going to an empty hash, which then means the screen handling isn't racing the browser, and the hash change state machine doesn't no-op. After applying that fix, going between pages worked great unless you were going from /login to /home. This is because the MatrixChat state machine was now out of sync (a `view` of `LOGIN` but a `page` of `HomePage` - an invalid state). All we have to do here is ensure the right view is used when navigating to the homepage. Fixes https://github.com/vector-im/riot-web/issues/4061 Note: the concerns in 4061 about logging out upon entering the view appear to have been solved. Navigating to the login page doesn't obliterate your session, at least in my testing. --- src/components/structures/HomePage.js | 8 ++++++-- src/components/structures/MatrixChat.js | 3 +++ .../structures/login/ForgotPassword.js | 16 ++++++++++++++-- src/components/structures/login/Login.js | 12 ++++++++++-- src/components/structures/login/Registration.js | 8 +++++++- 5 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/components/structures/HomePage.js b/src/components/structures/HomePage.js index 01aabf6115..8f0c270513 100644 --- a/src/components/structures/HomePage.js +++ b/src/components/structures/HomePage.js @@ -91,11 +91,15 @@ class HomePage extends React.Component { this._unmounted = true; } - onLoginClick() { + onLoginClick(ev) { + ev.preventDefault(); + ev.stopPropagation(); dis.dispatch({ action: 'start_login' }); } - onRegisterClick() { + onRegisterClick(ev) { + ev.preventDefault(); + ev.stopPropagation(); dis.dispatch({ action: 'start_registration' }); } diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index b01174a91c..44689a4d30 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -927,6 +927,9 @@ export default React.createClass({ }, _viewHome: function() { + this.setStateForNewView({ + view: VIEWS.LOGGED_IN, + }); this._setPage(PageTypes.HomePage); this.notifyNewScreen('home'); }, diff --git a/src/components/structures/login/ForgotPassword.js b/src/components/structures/login/ForgotPassword.js index 559136948a..5c0e428339 100644 --- a/src/components/structures/login/ForgotPassword.js +++ b/src/components/structures/login/ForgotPassword.js @@ -162,6 +162,18 @@ module.exports = React.createClass({ this.setState(newState); }, + onLoginClick: function(ev) { + ev.preventDefault(); + ev.stopPropagation(); + this.props.onLoginClick(); + }, + + onRegisterClick: function(ev) { + ev.preventDefault(); + ev.stopPropagation(); + this.props.onRegisterClick(); + }, + showErrorDialog: function(body, title) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, { @@ -253,10 +265,10 @@ module.exports = React.createClass({ { serverConfigSection } { errorText } - + { _t('Return to login screen') } - + { _t('Create an account') } diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js index b94a1759cf..11bd3580e5 100644 --- a/src/components/structures/login/Login.js +++ b/src/components/structures/login/Login.js @@ -214,7 +214,9 @@ module.exports = React.createClass({ }).done(); }, - _onLoginAsGuestClick: function() { + _onLoginAsGuestClick: function(ev) { + ev.preventDefault(); + const self = this; self.setState({ busy: true, @@ -297,6 +299,12 @@ module.exports = React.createClass({ }); }, + onRegisterClick: function(ev) { + ev.preventDefault(); + ev.stopPropagation(); + this.props.onRegisterClick(); + }, + _tryWellKnownDiscovery: async function(serverName) { if (!serverName.trim()) { // Nothing to discover @@ -567,7 +575,7 @@ module.exports = React.createClass({ { errorTextSection } { this.componentForStep(this.state.currentFlow) } { serverConfig } - + { _t('Create an account') } { loginAsGuestJsx } diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js index ad3ea5f19c..fa5a02e881 100644 --- a/src/components/structures/login/Registration.js +++ b/src/components/structures/login/Registration.js @@ -363,6 +363,12 @@ module.exports = React.createClass({ } }, + onLoginClick: function(ev) { + ev.preventDefault(); + ev.stopPropagation(); + this.props.onLoginClick(); + }, + _makeRegisterRequest: function(auth) { // Only send the bind params if we're sending username / pw params // (Since we need to send no params at all to use the ones saved in the @@ -468,7 +474,7 @@ module.exports = React.createClass({ let signIn; if (!this.state.doingUIAuth) { signIn = ( - + { theme === 'status' ? _t('Sign in') : _t('I already have an account') } ); From 2e5b3ec0f1bc55b36379c9416fe3c04cffb17425 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 2 Jan 2019 13:07:10 -0700 Subject: [PATCH 2/4] Use the safer way to set the logged in view state --- src/components/structures/MatrixChat.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 44689a4d30..38f0243444 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -1186,10 +1186,7 @@ export default React.createClass({ * @param {string} teamToken */ _onLoggedIn: async function(teamToken) { - this.setState({ - view: VIEWS.LOGGED_IN, - }); - + this.setStateForNewView({view: VIEWS.LOGGED_IN}); if (teamToken) { // A team member has logged in, not a guest this._teamToken = teamToken; From d8f6a7c684c0e1fd68d02ddc38ccd902387670f9 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 2 Jan 2019 13:07:40 -0700 Subject: [PATCH 3/4] Add missing stopPropagation --- src/components/structures/login/Login.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js index 11bd3580e5..321084389b 100644 --- a/src/components/structures/login/Login.js +++ b/src/components/structures/login/Login.js @@ -216,6 +216,7 @@ module.exports = React.createClass({ _onLoginAsGuestClick: function(ev) { ev.preventDefault(); + ev.stopPropagation(); const self = this; self.setState({ From 643dd5ca471e3e9bc1db07aae50402aa08493d66 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 3 Jan 2019 14:22:16 -0700 Subject: [PATCH 4/4] Add a comment explaining the reason for setting the LOGGED_IN view --- src/components/structures/MatrixChat.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 38f0243444..a03265da1c 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -927,6 +927,7 @@ export default React.createClass({ }, _viewHome: function() { + // The home page requires the "logged in" view, so we'll set that. this.setStateForNewView({ view: VIEWS.LOGGED_IN, });