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

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2023 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 from "react";
    18  import { Box, Button, FormLayout, InputBox, LockIcon } from "mds";
    19  import { useSelector } from "react-redux";
    20  import { setSubnetOTP } from "./registerSlice";
    21  import { AppState, useAppDispatch } from "../../../store";
    22  import { subnetLoginWithMFA } from "./registerThunks";
    23  import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
    24  import RegisterHelpBox from "./RegisterHelpBox";
    25  
    26  const SubnetMFAToken = () => {
    27    const dispatch = useAppDispatch();
    28  
    29    const subnetMFAToken = useSelector(
    30      (state: AppState) => state.register.subnetMFAToken,
    31    );
    32    const subnetOTP = useSelector((state: AppState) => state.register.subnetOTP);
    33    const loading = useSelector((state: AppState) => state.register.loading);
    34  
    35    return (
    36      <FormLayout
    37        title={"Two-Factor Authentication"}
    38        helpBox={<RegisterHelpBox />}
    39        withBorders={false}
    40        containerPadding={false}
    41      >
    42        <Box
    43          sx={{
    44            fontSize: 14,
    45            display: "flex",
    46            flexFlow: "column",
    47            marginBottom: "30px",
    48          }}
    49        >
    50          Please enter the 6-digit verification code that was sent to your email
    51          address. This code will be valid for 5 minutes.
    52        </Box>
    53  
    54        <Box>
    55          <InputBox
    56            overlayIcon={<LockIcon />}
    57            id="subnet-otp"
    58            name="subnet-otp"
    59            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
    60              dispatch(setSubnetOTP(event.target.value))
    61            }
    62            placeholder=""
    63            label=""
    64            value={subnetOTP}
    65          />
    66        </Box>
    67        <Box sx={modalStyleUtils.modalButtonBar}>
    68          <Button
    69            id={"verify"}
    70            onClick={() => dispatch(subnetLoginWithMFA())}
    71            disabled={
    72              loading ||
    73              subnetOTP.trim().length === 0 ||
    74              subnetMFAToken.trim().length === 0
    75            }
    76            variant="callAction"
    77            label={"Verify"}
    78          />
    79        </Box>
    80      </FormLayout>
    81    );
    82  };
    83  export default SubnetMFAToken;