diff --git a/webapp/channels/src/components/mfa/__snapshots__/confirm.test.tsx.snap b/webapp/channels/src/components/mfa/__snapshots__/confirm.test.tsx.snap index 13ac871824..734b2144b5 100644 --- a/webapp/channels/src/components/mfa/__snapshots__/confirm.test.tsx.snap +++ b/webapp/channels/src/components/mfa/__snapshots__/confirm.test.tsx.snap @@ -8,7 +8,7 @@ exports[`components/mfa/components/Confirm should match snapshot 1`] = ` onSubmit={[Function]} >

- diff --git a/webapp/channels/src/components/mfa/confirm.test.tsx b/webapp/channels/src/components/mfa/confirm.test.tsx index 5d422a8f90..885b1ac146 100644 --- a/webapp/channels/src/components/mfa/confirm.test.tsx +++ b/webapp/channels/src/components/mfa/confirm.test.tsx @@ -18,24 +18,17 @@ jest.mock('actions/global_actions', () => ({ describe('components/mfa/components/Confirm', () => { const originalAddEventListener = document.body.addEventListener; - const defaultProps = { - updateParent: jest.fn(), - state: { - enforceMultifactorAuthentication: true, - }, - }; - afterAll(() => { document.body.addEventListener = originalAddEventListener; }); test('should match snapshot', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); test('should submit on form submit', () => { - const wrapper = mountWithIntl(); + const wrapper = mountWithIntl(); wrapper.find('form').simulate('submit'); expect(redirectUserToDefaultTeam).toHaveBeenCalled(); @@ -49,7 +42,7 @@ describe('components/mfa/components/Confirm', () => { map[event] = callback; }); - mountWithIntl(); + mountWithIntl(); const event = { preventDefault: jest.fn(), diff --git a/webapp/channels/src/components/mfa/confirm.tsx b/webapp/channels/src/components/mfa/confirm.tsx index e44a9f5e41..ca8e8b2777 100644 --- a/webapp/channels/src/components/mfa/confirm.tsx +++ b/webapp/channels/src/components/mfa/confirm.tsx @@ -1,86 +1,65 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; +import React, {useEffect} from 'react'; import {FormattedMessage} from 'react-intl'; import {redirectUserToDefaultTeam} from 'actions/global_actions'; -import FormattedMarkdownMessage from 'components/formatted_markdown_message'; - import Constants from 'utils/constants'; import {isKeyPressed} from 'utils/keyboard'; const KeyCodes = Constants.KeyCodes; -type MFAControllerState = { - enforceMultifactorAuthentication: boolean; +const submit = (e: KeyboardEvent | React.FormEvent): void => { + e.preventDefault(); + redirectUserToDefaultTeam(); }; -type Props = { - - /* - * Object containing enforceMultifactorAuthentication - */ - state: MFAControllerState; - - /* - * Function that updates parent component with state props - */ - updateParent: (state: MFAControllerState) => void; -} - -export default class Confirm extends React.PureComponent { - public componentDidMount(): void { - document.body.addEventListener('keydown', this.onKeyPress); +const onKeyPress = (e: React.KeyboardEvent| KeyboardEvent) => { + if (isKeyPressed(e as KeyboardEvent, KeyCodes.ENTER)) { + submit(e); } +}; - public componentWillUnmount(): void { - document.body.removeEventListener('keydown', this.onKeyPress); - } +export default function Confirm() { + useEffect(() => { + document.body.addEventListener('keydown', onKeyPress); - submit = (e: KeyboardEvent | React.FormEvent): void => { - e.preventDefault(); - redirectUserToDefaultTeam(); - }; + return () => { + document.body.removeEventListener('keydown', onKeyPress); + }; + }, []); - onKeyPress = (e: KeyboardEvent | React.FormEvent): void => { - if (isKeyPressed(e as KeyboardEvent, KeyCodes.ENTER)) { - this.submit(e); - } - }; - - public render(): JSX.Element { - return ( -

-
+ +

+ +

+

+ +

+ -
-
- ); - } + + + + + ); } diff --git a/webapp/channels/src/components/mfa/mfa_controller/mfa_controller.tsx b/webapp/channels/src/components/mfa/mfa_controller/mfa_controller.tsx index d06ab7b827..68f3330088 100644 --- a/webapp/channels/src/components/mfa/mfa_controller/mfa_controller.tsx +++ b/webapp/channels/src/components/mfa/mfa_controller/mfa_controller.tsx @@ -122,12 +122,8 @@ export default class MFAController extends React.PureComponent ( - + render={() => ( + )} />