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

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2022 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    AddAccessRuleIcon,
    20    Button,
    21    FormLayout,
    22    PageLayout,
    23    Grid,
    24    InputBox,
    25  } from "mds";
    26  import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
    27  import KMSHelpBox from "./KMSHelpbox";
    28  import { api } from "api";
    29  import { useAppDispatch } from "store";
    30  import { useNavigate } from "react-router-dom";
    31  import { ApiError, HttpResponse } from "api/consoleApi";
    32  import { setErrorSnackMessage } from "systemSlice";
    33  import { errorToHandler } from "api/errors";
    34  import { IAM_PAGES } from "common/SecureComponent/permissions";
    35  
    36  const AddKeyForm = () => {
    37    const dispatch = useAppDispatch();
    38    const navigate = useNavigate();
    39  
    40    const [keyName, setKeyName] = useState<string>("");
    41    const [loadingCreate, setLoadingCreate] = useState<boolean>(false);
    42  
    43    const addRecord = (event: React.FormEvent) => {
    44      event.preventDefault();
    45      setLoadingCreate(true);
    46      api.kms
    47        .kmsCreateKey({ key: keyName })
    48        .then((_) => {
    49          navigate(`${IAM_PAGES.KMS_KEYS}`);
    50        })
    51        .catch(async (res: HttpResponse<void, ApiError>) => {
    52          const err = (await res.json()) as ApiError;
    53          dispatch(setErrorSnackMessage(errorToHandler(err)));
    54        })
    55        .finally(() => setLoadingCreate(false));
    56    };
    57  
    58    const resetForm = () => {
    59      setKeyName("");
    60    };
    61  
    62    const validateKeyName = (keyName: string) => {
    63      if (keyName.indexOf(" ") !== -1) {
    64        return "Key name cannot contain spaces";
    65      } else return "";
    66    };
    67  
    68    const validSave = keyName.trim() !== "" && keyName.indexOf(" ") === -1;
    69  
    70    return (
    71      <PageLayout>
    72        <FormLayout
    73          title={"Create Key"}
    74          icon={<AddAccessRuleIcon />}
    75          helpBox={
    76            <KMSHelpBox
    77              helpText={"Encryption Key"}
    78              contents={[
    79                "Create a new cryptographic key in the Key Management Service server connected to MINIO.",
    80              ]}
    81            />
    82          }
    83        >
    84          <form
    85            noValidate
    86            autoComplete="off"
    87            onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
    88              addRecord(e);
    89            }}
    90          >
    91            <Grid container>
    92              <Grid item xs={12}>
    93                <InputBox
    94                  id="key-name"
    95                  name="key-name"
    96                  label="Key Name"
    97                  autoFocus={true}
    98                  value={keyName}
    99                  error={validateKeyName(keyName)}
   100                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
   101                    setKeyName(e.target.value);
   102                  }}
   103                />
   104              </Grid>
   105              <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
   106                <Button
   107                  id={"clear"}
   108                  type="button"
   109                  variant="regular"
   110                  onClick={resetForm}
   111                  label={"Clear"}
   112                />
   113  
   114                <Button
   115                  id={"save-key"}
   116                  type="submit"
   117                  variant="callAction"
   118                  color="primary"
   119                  disabled={loadingCreate || !validSave}
   120                  label={"Save"}
   121                />
   122              </Grid>
   123            </Grid>
   124          </form>
   125        </FormLayout>
   126      </PageLayout>
   127    );
   128  };
   129  
   130  export default AddKeyForm;