Warning when disabling MFA (#232)

* add displayWarning prop and use it on admin side * display alert * add test and option prop * update comment * always display 2fa warning
SpecterOps · Nov 27, 2023 · f4a33f1 · f4a33f1
1 parent be05d0a
commit f4a33f1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.test.tsx b/packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.test.tsx
@@ -92,6 +92,10 @@ describe('Enable2FADialog', () => {
         ).toBeInTheDocument();
     });
 
+    it('displays security warning ', () => {
+        expect(screen.queryByTestId('ReportProblemOutlinedIcon')).toBeInTheDocument();
+    });
+
     describe('user clicks "Cancel" button', () => {
         beforeEach(async () => {
             await user.click(screen.getByRole('button', { name: 'Cancel' }));

diff --git a/packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.tsx b/packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.tsx
@@ -14,7 +14,16 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from '@mui/material';
+import {
+    Alert,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    TextField,
+} from '@mui/material';
 import React from 'react';
 
 const Disable2FADialog: React.FC<{
@@ -37,6 +46,10 @@ const Disable2FADialog: React.FC<{
             <DialogTitle>Disable Multi-Factor Authentication?</DialogTitle>
             <form onSubmit={handleOnSave}>
                 <DialogContent>
+                    <Alert severity='warning' style={{ marginBottom: '10px', alignItems: 'center' }}>
+                        Disabling MFA increases the risk of unauthorized access. For optimal account security, we highly
+                        recommend keeping MFA enabled.
+                    </Alert>
                     <DialogContentText>{contentText}</DialogContentText>
 
                     <TextField