From 451f23ae24d789eda8dea4005657778c235a9045 Mon Sep 17 00:00:00 2001
From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com>
Date: Sat, 23 Sep 2023 01:21:03 +0530
Subject: [PATCH] Improve change password  user experience (#3058)

---
 .../Console/Account/ChangePasswordModal.tsx   | 34 ++++++++++++++++---
 .../Account/ChangeUserPasswordModal.tsx       | 18 +++++++---
 .../src/screens/Console/Users/UserDetails.tsx |  1 +
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
index 93f91f5d5..4444efbcf 100644
--- a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
@@ -26,11 +26,16 @@ import {
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
-import { setModalErrorSnackMessage } from "../../../systemSlice";
+import {
+  setErrorSnackMessage,
+  setModalErrorSnackMessage,
+  setSnackBarMessage,
+} from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import { api } from "api";
-import { AccountChangePasswordRequest } from "api/consoleApi";
+import { AccountChangePasswordRequest, ApiError } from "api/consoleApi";
 import { errorToHandler } from "api/errors";
+import WarningMessage from "../Common/WarningMessage/WarningMessage";
 
 interface IChangePasswordProps {
   open: boolean;
@@ -86,14 +91,16 @@ const ChangePassword = ({ open, closeModal }: IChangePasswordProps) => {
         setNewPassword("");
         setReNewPassword("");
         setCurrentPassword("");
+        dispatch(setSnackBarMessage("Successfully updated the password."));
         closeModal();
       })
-      .catch((err) => {
+      .catch(async (res) => {
         setLoading(false);
         setNewPassword("");
         setReNewPassword("");
         setCurrentPassword("");
-        dispatch(setModalErrorSnackMessage(errorToHandler(err)));
+        const err = (await res.json()) as ApiError;
+        dispatch(setErrorSnackMessage(errorToHandler(err)));
       });
   };
 
@@ -113,6 +120,25 @@ const ChangePassword = ({ open, closeModal }: IChangePasswordProps) => {
         This will change your Console password. Please note your new password
         down, as it will be required to log into Console after this session.
       </div>
+      <WarningMessage
+        title={""}
+        label={
+          <div>
+            <div>
+              If you are looking to change MINIO_ROOT_USER credentials, Please
+              refer to{" "}
+              <a
+                target="_blank"
+                rel="noopener"
+                href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html#id4?ref=con"
+              >
+                rotating
+              </a>{" "}
+              credentials .
+            </div>
+          </div>
+        }
+      />
       <form
         noValidate
         autoComplete="off"
diff --git a/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx b/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
index 64df0b80b..6a81f4c98 100644
--- a/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
@@ -24,10 +24,14 @@ import {
   ProgressBar,
 } from "mds";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
-import { setModalErrorSnackMessage } from "../../../systemSlice";
+import {
+  setErrorSnackMessage,
+  setModalErrorSnackMessage,
+  setSnackBarMessage,
+} from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import { api } from "api";
-import { ChangeUserPasswordRequest } from "api/consoleApi";
+import { ApiError, ChangeUserPasswordRequest } from "api/consoleApi";
 import { errorToHandler } from "api/errors";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 
@@ -77,13 +81,19 @@ const ChangeUserPassword = ({
         setLoading(false);
         setNewPassword("");
         setReNewPassword("");
+        dispatch(
+          setSnackBarMessage(
+            `Successfully updated the password for the user ${userName}.`,
+          ),
+        );
         closeModal();
       })
-      .catch((err) => {
+      .catch(async (res) => {
         setLoading(false);
         setNewPassword("");
         setReNewPassword("");
-        dispatch(setModalErrorSnackMessage(errorToHandler(err)));
+        const err = (await res.json()) as ApiError;
+        dispatch(setErrorSnackMessage(errorToHandler(err)));
       });
   };
 
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index dc3ab8f4f..739dbe1e7 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -351,6 +351,7 @@ const UserDetails = () => {
                       onClick={changeUserPassword}
                       icon={<PasswordKeyIcon />}
                       variant={"regular"}
+                      disabled={userLoggedIn === userName}
                     />
                   </TooltipWrapper>
                 </Fragment>