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={() => (
+
)}
/>