Improve change password user experience (#3058)

Author: prakashsvmx

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"

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)));
       });
   };
 

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>