diff --git a/client/src/app/main/main-home/main-home-page-login-widget.js b/client/src/app/main/main-home/main-home-page-login-widget.js index 9b5f90ee..e6a72c43 100644 --- a/client/src/app/main/main-home/main-home-page-login-widget.js +++ b/client/src/app/main/main-home/main-home-page-login-widget.js @@ -1,10 +1,12 @@ const React = require('react'); +const ReactDOM = require('react-dom'); const Reflux = require('reflux'); const _ = require('lodash'); const classNames = require('classnames'); const UserActions = require('actions/user-actions'); const UserStore = require('stores/user-store'); +const focus = require('lib-core/focus'); const Button = require('core-components/button'); const Form = require('core-components/form'); @@ -35,7 +37,7 @@ let MainHomePageLoginWidget = React.createClass({ renderLogin() { return ( - +
@@ -46,7 +48,7 @@ let MainHomePageLoginWidget = React.createClass({
-
@@ -55,7 +57,7 @@ let MainHomePageLoginWidget = React.createClass({ renderPasswordRecovery() { return ( - +
@@ -64,7 +66,7 @@ let MainHomePageLoginWidget = React.createClass({
-
@@ -88,13 +90,13 @@ let MainHomePageLoginWidget = React.createClass({ handleForgotPasswordClick() { this.setState({ sideToShow: 'back' - }); + }, this.moveFocusToCurrentSide); }, handleBackToLoginClick() { this.setState({ sideToShow: 'front' - }); + }, this.moveFocusToCurrentSide); }, onUserStoreChanged(event) { @@ -107,6 +109,23 @@ let MainHomePageLoginWidget = React.createClass({ this.refs.loginForm.refs.password.focus() }.bind(this)); } + }, + + moveFocusToCurrentSide() { + let currentWidget; + let previousWidget; + + if (this.state.sideToShow === 'front') { + currentWidget = ReactDOM.findDOMNode(this.refs.loginWidget); + previousWidget = ReactDOM.findDOMNode(this.refs.recoverWidget); + } else { + currentWidget = ReactDOM.findDOMNode(this.refs.recoverWidget); + previousWidget = ReactDOM.findDOMNode(this.refs.loginWidget); + } + + if (focus.isActiveElementInsideDOMTree(previousWidget)) { + focus.focusFirstInput(currentWidget); + } } }); diff --git a/client/src/lib-core/focus.js b/client/src/lib-core/focus.js new file mode 100644 index 00000000..2cfc1b57 --- /dev/null +++ b/client/src/lib-core/focus.js @@ -0,0 +1,18 @@ +const _ = require('lodash'); + +export default { + isActiveElementInsideDOMTree(domTree = document) { + let activeElement = document.activeElement; + let elements = domTree.querySelectorAll('*'); + + return (_.findIndex(elements, activeElement) !== -1); + }, + + focusFirstInput(domTree) { + let firstFocusableElement = domTree.querySelector('input'); + + if (firstFocusableElement) { + firstFocusableElement.focus(); + } + } +}; \ No newline at end of file