github.com/minio/console@v1.4.1/web-app/src/screens/Console/Support/ApiKeyRegister.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, { useCallback, useEffect, useState } from "react";
    18  import { Box, Button, FormLayout, InputBox, OnlineRegistrationIcon } from "mds";
    19  import { useNavigate } from "react-router-dom";
    20  import { SubnetLoginRequest, SubnetLoginResponse } from "../License/types";
    21  import { useAppDispatch } from "../../../store";
    22  import {
    23    setErrorSnackMessage,
    24    setServerNeedsRestart,
    25  } from "../../../systemSlice";
    26  import { ErrorResponseHandler } from "../../../common/types";
    27  import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
    28  import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
    29  import GetApiKeyModal from "./GetApiKeyModal";
    30  import RegisterHelpBox from "./RegisterHelpBox";
    31  import api from "../../../common/api";
    32  
    33  interface IApiKeyRegister {
    34    registerEndpoint: string;
    35  }
    36  
    37  const ApiKeyRegister = ({ registerEndpoint }: IApiKeyRegister) => {
    38    const navigate = useNavigate();
    39  
    40    const [showApiKeyModal, setShowApiKeyModal] = useState(false);
    41    const [apiKey, setApiKey] = useState("");
    42    const [loading, setLoading] = useState(false);
    43    const [fromModal, setFromModal] = useState(false);
    44    const dispatch = useAppDispatch();
    45  
    46    const onRegister = useCallback(() => {
    47      if (loading) {
    48        return;
    49      }
    50      setLoading(true);
    51      let request: SubnetLoginRequest = { apiKey };
    52      api
    53        .invoke("POST", registerEndpoint, request)
    54        .then((resp: SubnetLoginResponse) => {
    55          setLoading(false);
    56          if (resp && resp.registered) {
    57            dispatch(setServerNeedsRestart(true));
    58            navigate(IAM_PAGES.LICENSE);
    59          }
    60        })
    61        .catch((err: ErrorResponseHandler) => {
    62          dispatch(setErrorSnackMessage(err));
    63          setLoading(false);
    64          reset();
    65        });
    66    }, [apiKey, dispatch, loading, registerEndpoint, navigate]);
    67  
    68    useEffect(() => {
    69      if (fromModal) {
    70        onRegister();
    71      }
    72    }, [fromModal, onRegister]);
    73  
    74    const reset = () => {
    75      setApiKey("");
    76      setFromModal(false);
    77    };
    78  
    79    return (
    80      <FormLayout
    81        title={"Register cluster with API key"}
    82        icon={<OnlineRegistrationIcon />}
    83        containerPadding={false}
    84        withBorders={false}
    85        helpBox={<RegisterHelpBox />}
    86      >
    87        <Box
    88          sx={{
    89            fontSize: 14,
    90            display: "flex",
    91            flexFlow: "column",
    92            marginBottom: "30px",
    93          }}
    94        >
    95          Use your MinIO Subscription Network API Key to register this cluster.
    96        </Box>
    97        <Box
    98          sx={{
    99            flex: "1",
   100          }}
   101        >
   102          <InputBox
   103            id="api-key"
   104            name="api-key"
   105            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
   106              setApiKey(event.target.value)
   107            }
   108            label="API Key"
   109            value={apiKey}
   110          />
   111  
   112          <Box sx={modalStyleUtils.modalButtonBar}>
   113            <Button
   114              id={"get-from-subnet"}
   115              variant="regular"
   116              disabled={loading}
   117              onClick={() => setShowApiKeyModal(true)}
   118              label={"Get from SUBNET"}
   119            />
   120            <Button
   121              id={"register"}
   122              type="submit"
   123              variant="callAction"
   124              disabled={loading || apiKey.trim().length === 0}
   125              onClick={() => onRegister()}
   126              label={"Register"}
   127            />
   128          </Box>
   129        </Box>
   130        <GetApiKeyModal
   131          open={showApiKeyModal}
   132          closeModal={() => setShowApiKeyModal(false)}
   133          onSet={(value) => {
   134            setApiKey(value);
   135            setFromModal(true);
   136          }}
   137        />
   138      </FormLayout>
   139    );
   140  };
   141  
   142  export default ApiKeyRegister;