diff --git a/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx b/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx
index 312b4dbf96..f72b12b794 100644
--- a/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx
+++ b/awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx
@@ -264,6 +264,8 @@ function MiscSystemEdit() {
/>
);
};
-const BooleanField = ({ ariaLabel = '', name, config, disabled = false }) => {
+const BooleanField = ({
+ ariaLabel = '',
+ name,
+ config,
+ disabled = false,
+ needsConfirmationModal,
+ modalTitle,
+}) => {
const [field, meta, helpers] = useField(name);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ if (isModalOpen) {
+ return (
+ {
+ helpers.setValue(false);
+ }}
+ actions={[
+ ,
+ ,
+ ]}
+ >{t`Are you sure you want to disable local authentication? Doing so could impact users' ability to log in and the system administrator's ability to reverse this change.`}
+ );
+ }
return config ? (
{
isDisabled={disabled}
label={t`On`}
labelOff={t`Off`}
- onChange={() => helpers.setValue(!field.value)}
+ onChange={() =>
+ needsConfirmationModal
+ ? setIsModalOpen(true)
+ : helpers.setValue(!field.value)
+ }
aria-label={ariaLabel || config.label}
/>
diff --git a/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx b/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx
index 3ac561e3d2..35c494fe83 100644
--- a/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx
+++ b/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx
@@ -265,4 +265,96 @@ describe('Setting form fields', () => {
wrapper.update();
expect(wrapper.find('input#mock_file-filename').prop('value')).toEqual('');
});
+ test('should render confirmation modal when toggle on for disable local auth', async () => {
+ const wrapper = mountWithContexts(
+
+ {() => (
+
+ )}
+
+ );
+ expect(wrapper.find('Switch')).toHaveLength(1);
+ expect(wrapper.find('Switch').prop('isChecked')).toBe(false);
+ expect(wrapper.find('Switch').prop('isDisabled')).toBe(false);
+ await act(async () => {
+ wrapper.find('Switch').invoke('onChange')();
+ });
+ wrapper.update();
+
+ expect(wrapper.find('AlertModal')).toHaveLength(1);
+ await act(async () =>
+ wrapper
+ .find('Button[ouiaId="confirm-misc-settings-modal"]')
+ .prop('onClick')()
+ );
+ wrapper.update();
+ expect(wrapper.find('AlertModal')).toHaveLength(0);
+ expect(wrapper.find('Switch').prop('isChecked')).toBe(true);
+ });
+
+ test('shold not toggle disable local auth', async () => {
+ const wrapper = mountWithContexts(
+
+ {() => (
+
+ )}
+
+ );
+ expect(wrapper.find('Switch')).toHaveLength(1);
+ expect(wrapper.find('Switch').prop('isChecked')).toBe(false);
+ expect(wrapper.find('Switch').prop('isDisabled')).toBe(false);
+ await act(async () => {
+ wrapper.find('Switch').invoke('onChange')();
+ });
+ wrapper.update();
+
+ expect(wrapper.find('AlertModal')).toHaveLength(1);
+ await act(async () =>
+ wrapper
+ .find('Button[ouiaId="cancel-misc-settings-modal"]')
+ .prop('onClick')()
+ );
+ wrapper.update();
+
+ expect(wrapper.find('AlertModal')).toHaveLength(0);
+ expect(wrapper.find('Switch').prop('isChecked')).toBe(false);
+ });
});