From df4352ee0a484f9f28808bb7073f8f51150eea86 Mon Sep 17 00:00:00 2001
From: Akarsh Jain <72064462+akarsh-jain-790@users.noreply.github.com>
Date: Wed, 2 Nov 2022 09:16:58 +0530
Subject: [PATCH] fix: Added a modal with warning message on disabling password
 (#4552)

---
 frontend/src/ManageSSO/Form.jsx      | 17 +++++++++++++++--
 frontend/src/ManageSSO/ManageSSO.jsx |  8 +++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ManageSSO/Form.jsx b/frontend/src/ManageSSO/Form.jsx
index f4b6a88c4a..c40b060a40 100644
--- a/frontend/src/ManageSSO/Form.jsx
+++ b/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>
diff --git a/frontend/src/ManageSSO/ManageSSO.jsx b/frontend/src/ManageSSO/ManageSSO.jsx
index d1b3e61de5..8e33066674 100644
--- a/frontend/src/ManageSSO/ManageSSO.jsx
+++ b/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 />;
     }