github.com/minio/console@v1.4.1/web-app/src/screens/Console/Account/ChangeUserPasswordModal.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { useState } from "react";
    18  import {
    19    Box,
    20    Button,
    21    ChangePasswordIcon,
    22    FormLayout,
    23    InputBox,
    24    ProgressBar,
    25  } from "mds";
    26  import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
    27  import {
    28    setErrorSnackMessage,
    29    setModalErrorSnackMessage,
    30    setSnackBarMessage,
    31  } from "../../../systemSlice";
    32  import { useAppDispatch } from "../../../store";
    33  import { api } from "api";
    34  import { ApiError, ChangeUserPasswordRequest } from "api/consoleApi";
    35  import { errorToHandler } from "api/errors";
    36  import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
    37  
    38  interface IChangeUserPasswordProps {
    39    open: boolean;
    40    userName: string;
    41    closeModal: () => void;
    42  }
    43  
    44  const ChangeUserPassword = ({
    45    open,
    46    userName,
    47    closeModal,
    48  }: IChangeUserPasswordProps) => {
    49    const dispatch = useAppDispatch();
    50    const [newPassword, setNewPassword] = useState<string>("");
    51    const [reNewPassword, setReNewPassword] = useState<string>("");
    52    const [loading, setLoading] = useState<boolean>(false);
    53  
    54    const changeUserPassword = (event: React.FormEvent) => {
    55      event.preventDefault();
    56  
    57      if (loading) {
    58        return;
    59      }
    60      setLoading(true);
    61  
    62      if (newPassword.length < 8) {
    63        dispatch(
    64          setModalErrorSnackMessage({
    65            errorMessage: "Passwords must be at least 8 characters long",
    66            detailedError: "",
    67          }),
    68        );
    69        setLoading(false);
    70        return;
    71      }
    72  
    73      let request: ChangeUserPasswordRequest = {
    74        selectedUser: userName,
    75        newSecretKey: newPassword,
    76      };
    77  
    78      api.account
    79        .changeUserPassword(request)
    80        .then((res) => {
    81          setLoading(false);
    82          setNewPassword("");
    83          setReNewPassword("");
    84          dispatch(
    85            setSnackBarMessage(
    86              `Successfully updated the password for the user ${userName}.`,
    87            ),
    88          );
    89          closeModal();
    90        })
    91        .catch(async (res) => {
    92          setLoading(false);
    93          setNewPassword("");
    94          setReNewPassword("");
    95          const err = (await res.json()) as ApiError;
    96          dispatch(setErrorSnackMessage(errorToHandler(err)));
    97        });
    98    };
    99  
   100    return open ? (
   101      <ModalWrapper
   102        title="Change User Password"
   103        modalOpen={open}
   104        onClose={() => {
   105          setNewPassword("");
   106          setReNewPassword("");
   107          closeModal();
   108        }}
   109        titleIcon={<ChangePasswordIcon />}
   110      >
   111        <form
   112          noValidate
   113          autoComplete="off"
   114          onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
   115            changeUserPassword(e);
   116          }}
   117        >
   118          <FormLayout withBorders={false} containerPadding={false}>
   119            <Box sx={{ margin: "10px 0 20px" }}>
   120              Change password for: <strong>{userName}</strong>
   121            </Box>
   122            <InputBox
   123              id="new-password"
   124              name="new-password"
   125              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
   126                setNewPassword(event.target.value);
   127              }}
   128              label="New Password"
   129              type="password"
   130              value={newPassword}
   131            />
   132            <InputBox
   133              id="re-new-password"
   134              name="re-new-password"
   135              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
   136                setReNewPassword(event.target.value);
   137              }}
   138              label="Type New Password Again"
   139              type="password"
   140              value={reNewPassword}
   141            />
   142            <Box sx={modalStyleUtils.modalButtonBar}>
   143              <Button
   144                id={"save-user-password"}
   145                type="submit"
   146                variant="callAction"
   147                color="primary"
   148                disabled={
   149                  loading ||
   150                  !(reNewPassword.length > 0 && newPassword === reNewPassword)
   151                }
   152                label={"Save"}
   153              />
   154            </Box>
   155            {loading && (
   156              <Box>
   157                <ProgressBar />
   158              </Box>
   159            )}
   160          </FormLayout>
   161        </form>
   162      </ModalWrapper>
   163    ) : null;
   164  };
   165  
   166  export default ChangeUserPassword;