From 02b9414e0f0169c99044ad96456290766ffcd585 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Fri, 30 Oct 2015 17:26:39 -0400 Subject: Added handling of keyboard focus to UserSettingsModal and its children --- web/react/components/confirm_modal.jsx | 1 - .../components/user_settings/user_settings.jsx | 3 +++ .../user_settings/user_settings_appearance.jsx | 7 +++++- .../user_settings/user_settings_modal.jsx | 23 +++++++++++++---- .../user_settings/user_settings_security.jsx | 29 ++++++++++++++++++---- 5 files changed, 51 insertions(+), 12 deletions(-) (limited to 'web/react') diff --git a/web/react/components/confirm_modal.jsx b/web/react/components/confirm_modal.jsx index bc3a0b814..cdef1c1ea 100644 --- a/web/react/components/confirm_modal.jsx +++ b/web/react/components/confirm_modal.jsx @@ -20,7 +20,6 @@ export default class ConfirmModal extends React.Component { className='modal-confirm' show={this.props.show} onHide={this.props.onCancel} - enforceFocus={false} > {this.props.title} diff --git a/web/react/components/user_settings/user_settings.jsx b/web/react/components/user_settings/user_settings.jsx index d569b9d6e..cebbbebce 100644 --- a/web/react/components/user_settings/user_settings.jsx +++ b/web/react/components/user_settings/user_settings.jsx @@ -56,6 +56,7 @@ export default class UserSettings extends React.Component { activeSection={this.props.activeSection} updateSection={this.props.updateSection} updateTab={this.props.updateTab} + setEnforceFocus={this.props.setEnforceFocus} /> ); @@ -77,6 +78,7 @@ export default class UserSettings extends React.Component { activeSection={this.props.activeSection} updateSection={this.props.updateSection} updateTab={this.props.updateTab} + setEnforceFocus={this.props.setEnforceFocus} setRequireConfirm={this.props.setRequireConfirm} /> @@ -134,5 +136,6 @@ UserSettings.propTypes = { activeSection: React.PropTypes.string, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func, + setEnforceFocus: React.PropTypes.func.isRequired, setRequireConfirm: React.PropTypes.func.isRequired }; diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx index b3584e992..28fc9018a 100644 --- a/web/react/components/user_settings/user_settings_appearance.jsx +++ b/web/react/components/user_settings/user_settings_appearance.jsx @@ -72,6 +72,8 @@ export default class UserSettingsAppearance extends React.Component { if (!Utils.areStatesEqual(this.state, newState)) { this.setState(newState); } + + this.props.setEnforceFocus(true); } submitTheme(e) { e.preventDefault(); @@ -138,6 +140,8 @@ export default class UserSettingsAppearance extends React.Component { type: ActionTypes.TOGGLE_IMPORT_THEME_MODAL, value: true }); + + this.props.setEnforceFocus(false); } render() { var serverError; @@ -258,5 +262,6 @@ UserSettingsAppearance.defaultProps = { UserSettingsAppearance.propTypes = { activeSection: React.PropTypes.string, updateTab: React.PropTypes.func, - setRequireConfirm: React.PropTypes.func.isRequired + setRequireConfirm: React.PropTypes.func.isRequired, + setEnforceFocus: React.PropTypes.func.isRequired }; diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index 4cfc2b3d4..94b07f3a5 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -13,6 +13,7 @@ export default class UserSettingsModal extends React.Component { this.handleHide = this.handleHide.bind(this); this.handleHidden = this.handleHidden.bind(this); this.handleConfirm = this.handleConfirm.bind(this); + this.handleCancelConfirmation = this.handleCancelConfirmation.bind(this); this.updateTab = this.updateTab.bind(this); this.updateSection = this.updateSection.bind(this); @@ -20,7 +21,8 @@ export default class UserSettingsModal extends React.Component { this.state = { active_tab: 'general', active_section: '', - showConfirmModal: false + showConfirmModal: false, + enforceFocus: true }; this.requireConfirm = false; @@ -78,7 +80,8 @@ export default class UserSettingsModal extends React.Component { handleConfirm() { this.setState({ - showConfirmModal: false + showConfirmModal: false, + enforceFocus: true }); this.requireConfirm = false; @@ -89,9 +92,17 @@ export default class UserSettingsModal extends React.Component { } } + handleCancelConfirmation() { + this.setState({ + showConfirmModal: false, + enforceFocus: true + }); + } + showConfirmModal() { this.setState({ - showConfirmModal: true + showConfirmModal: true, + enforceFocus: false }); } @@ -136,8 +147,9 @@ export default class UserSettingsModal extends React.Component { this.handleHide()} + onHide={this.handleHide} onExited={this.handleHidden} + enforceFocus={this.state.enforceFocus} > {'Account Settings'} @@ -158,6 +170,7 @@ export default class UserSettingsModal extends React.Component { activeSection={this.state.active_section} updateSection={this.updateSection} updateTab={this.updateTab} + setEnforceFocus={(enforceFocus) => this.setState({enforceFocus})} setRequireConfirm={(requireConfirm) => this.requireConfirm = requireConfirm} /> @@ -169,7 +182,7 @@ export default class UserSettingsModal extends React.Component { confirm_button='Yes, Discard' show={this.state.showConfirmModal} onConfirm={this.handleConfirm} - onCancel={() => this.setState({showConfirmModal: false})} + onCancel={this.handleCancelConfirmation} /> ); diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx index d4d6bf035..c2b8a0093 100644 --- a/web/react/components/user_settings/user_settings_security.jsx +++ b/web/react/components/user_settings/user_settings_security.jsx @@ -13,6 +13,9 @@ export default class SecurityTab extends React.Component { constructor(props) { super(props); + this.showAccessHistoryModal = this.showAccessHistoryModal.bind(this); + this.showActivityLogModal = this.showActivityLogModal.bind(this); + this.hideModals = this.hideModals.bind(this); this.submitPassword = this.submitPassword.bind(this); this.updateCurrentPassword = this.updateCurrentPassword.bind(this); this.updateNewPassword = this.updateNewPassword.bind(this); @@ -24,6 +27,21 @@ export default class SecurityTab extends React.Component { state.showActivityLogModal = false; this.state = state; } + showAccessHistoryModal() { + this.props.setEnforceFocus(false); + this.setState({showAccessHistoryModal: true}); + } + showActivityLogModal() { + this.props.setEnforceFocus(false); + this.setState({showActivityLogModal: true}); + } + hideModals() { + this.props.setEnforceFocus(true); + this.setState({ + showAccessHistoryModal: false, + showActivityLogModal: false + }); + } submitPassword(e) { e.preventDefault(); @@ -238,7 +256,7 @@ export default class SecurityTab extends React.Component { this.setState({showAccessHistoryModal: true})} + onClick={this.showAccessHistoryModal} > View Access History @@ -246,18 +264,18 @@ export default class SecurityTab extends React.Component { this.setState({showActivityLogModal: true})} + onClick={this.showActivityLogModal} > View and Logout of Active Sessions this.setState({showAccessHistoryModal: false})} + onModalDismissed={this.hideModals} /> this.setState({showActivityLogModal: false})} + onModalDismissed={this.hideModals} /> ); @@ -272,5 +290,6 @@ SecurityTab.propTypes = { user: React.PropTypes.object, activeSection: React.PropTypes.string, updateSection: React.PropTypes.func, - updateTab: React.PropTypes.func + updateTab: React.PropTypes.func, + setEnforceFocus: React.PropTypes.func.isRequired }; -- cgit v1.2.3-1-g7c22