From 8f5e825cd50ee045cd70532d7938bd2cef5d1765 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 20 Dec 2018 17:26:13 -0700 Subject: [PATCH 1/6] 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 01aabf61151..8f0c270513d 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 b01174a91c9..44689a4d305 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 559136948ac..5c0e4283397 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 b94a1759cfe..11bd3580e52 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 ad3ea5f19cd..fa5a02e8815 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/6] 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 44689a4d305..38f02434445 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/6] 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 11bd3580e52..321084389be 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/6] 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 38f02434445..a03265da1c8 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, }); From 1481dcf9d7ce609200a8d8ff47b0b01dc6bdca19 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 3 Jan 2019 13:57:20 -0700 Subject: [PATCH 5/6] Don't re-sort the room list if the user is hovering over it Fixes vector-im/riot-web#5624 --- src/components/views/rooms/RoomList.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index c1cd7e5d574..dbfe95dadf6 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -86,6 +86,7 @@ module.exports = React.createClass({ incomingCallTag: null, incomingCall: null, selectedTags: [], + hover: false, }; }, @@ -294,6 +295,17 @@ module.exports = React.createClass({ this.forceUpdate(); }, + onMouseEnter: function(ev) { + this.setState({hover: true}); + }, + + onMouseLeave: function(ev) { + this.setState({hover: false}); + + // Refresh the room list just in case the user missed something. + this._delayedRefreshRoomList(); + }, + _delayedRefreshRoomList: new rate_limited_func(function() { this.refreshRoomList(); }, 500), @@ -346,6 +358,11 @@ module.exports = React.createClass({ }, refreshRoomList: function() { + if (this.state.hover) { + // Don't re-sort the list if we're hovering over the list + return; + } + // TODO: ideally we'd calculate this once at start, and then maintain // any changes to it incrementally, updating the appropriate sublists // as needed. @@ -693,7 +710,8 @@ module.exports = React.createClass({ const subListComponents = this._mapSubListProps(subLists); return ( -
+
{ subListComponents }
); From ff2faf7996af9790d6c22a73719367596698e206 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 3 Jan 2019 16:32:52 -0700 Subject: [PATCH 6/6] Add missing CSS to dharma theme --- res/themes/dharma/css/_dharma.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 0851762be20..08a287ad718 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -186,6 +186,8 @@ $lightbox-border-color: #ffffff; // unused? $progressbar-color: #000; +$room-warning-bg-color: #fff8e3; + /*** form elements ***/ // .mx_textinput is a container for a text input @@ -320,3 +322,11 @@ input[type=search]::-webkit-search-results-decoration { font-size: 15px; padding: 0px 1.5em 0px 1.5em; } + +@define-mixin mx_DialogButton_secondary { + // flip colours for the secondary ones + font-weight: 600; + border: 1px solid $accent-color ! important; + color: $accent-color; + background-color: $accent-fg-color; +}