From e921f608236fe991e7a9580ba32a9b81360ecee2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 20 Dec 2018 17:26:13 -0700 Subject: [PATCH] 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 01aabf611513..8f0c270513d9 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 fd9527644544..bedfd8242782 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -923,6 +923,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 559136948ac6..5c0e42833971 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 b94a1759cfe9..11bd3580e529 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 ad3ea5f19cdb..fa5a02e8815e 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') } );