github.com/minio/console@v1.4.1/web-app/src/screens/Console/Tools/KeyRevealer.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 { Button, CopyIcon, InputBox, Box, breakPoints } from "mds";
    19  
    20  const KeyRevealer = ({ value }: { value: string }) => {
    21    const [shown, setShown] = useState<boolean>(false);
    22  
    23    return (
    24      <Box
    25        sx={{
    26          display: "flex",
    27          alignItems: "center",
    28          flexFlow: "row",
    29          [`@media (max-width: ${breakPoints.sm}px)`]: {
    30            flexFlow: "column",
    31          },
    32        }}
    33      >
    34        <InputBox
    35          id="inspect-dec-key"
    36          name="inspect-dec-key"
    37          placeholder=""
    38          label=""
    39          type={shown ? "text" : "password"}
    40          onChange={() => {}}
    41          value={value}
    42          overlayIcon={<CopyIcon />}
    43          readOnly={true}
    44          overlayAction={() => navigator.clipboard.writeText(value)}
    45        />
    46  
    47        <Button
    48          id={"show-hide-key"}
    49          style={{
    50            marginLeft: "10px",
    51          }}
    52          variant="callAction"
    53          onClick={() => setShown(!shown)}
    54          label={"Show/Hide"}
    55        />
    56      </Box>
    57    );
    58  };
    59  
    60  export default KeyRevealer;