fix: Added a modal with warning message on disabling password (#4552)

frontend/src/ManageSSO/Form.jsx

@@ -2,9 +2,11 @@ import React, { useState } from 'react';
 import { organizationService } from '@/_services';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
+import { ConfirmDialog } from '@/_components';
 
-export function Form({ settings, updateData }) {
+export function Form({ settings, updateData, darkMode }) {
   const [enabled, setEnabled] = useState(settings?.enabled || false);
+  const [showDisablingPasswordConfirmation, setShowDisablingPasswordConfirmation] = useState(false);
   const { t } = useTranslation();
 
   const changeStatus = () => {
@@ -14,6 +16,7 @@ export function Form({ settings, updateData }) {
         setEnabled(enabled_tmp);
         updateData('form', { id: data.id, enabled: enabled_tmp });
         toast.success(`${enabled_tmp ? 'Enabled' : 'Disabled'} Password login`, { position: 'top-center' });
+        setShowDisablingPasswordConfirmation(false);
       },
       () => {
         toast.error('Error while saving SSO configurations', {
@@ -25,6 +28,16 @@ export function Form({ settings, updateData }) {
 
   return (
     <div className="card">
+      <ConfirmDialog
+        show={showDisablingPasswordConfirmation}
+        message={t(
+          'manageSSO.DisablingPasswordConfirmation',
+          'Users won’t be able to login via username and password if password login is disabled. Please make sure that you have setup other authentication methods before disabling password login, do you want to continue?'
+        )}
+        onConfirm={() => changeStatus()}
+        onCancel={() => setShowDisablingPasswordConfirmation(false)}
+        darkMode={darkMode}
+      />
       <div className="card-header">
         <div className="d-flex justify-content-between title-with-toggle">
           <div className="card-title" data-cy="card-title">
@@ -39,7 +52,7 @@ export function Form({ settings, updateData }) {
                 className="form-check-input"
                 type="checkbox"
                 checked={enabled}
-                onChange={changeStatus}
+                onChange={() => (enabled ? setShowDisablingPasswordConfirmation(true) : changeStatus())}
                 data-cy="form-check-input"
               />
             </label>

frontend/src/ManageSSO/ManageSSO.jsx

@@ -36,7 +36,13 @@ export function ManageSSO({ switchDarkMode, darkMode }) {
       case 'git':
         return <Git updateData={updateData} settings={ssoData?.sso_configs?.find((obj) => obj.sso === 'git')} />;
       case 'form':
-        return <Form updateData={updateData} settings={ssoData?.sso_configs?.find((obj) => obj.sso === 'form')} />;
+        return (
+          <Form
+            updateData={updateData}
+            settings={ssoData?.sso_configs?.find((obj) => obj.sso === 'form')}
+            darkMode={darkMode}
+          />
+        );
       default:
         return <Loader />;
     }