All files / src/apps/authentication/components UserTokenDetails.tsx

50% Statements 2/4
0% Branches 0/2
0% Functions 0/1
50% Lines 2/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50                  1x                             1x                                                  
import React from "react";
import { Button, Paper, Tooltip, Typography } from "@mui/material";
import CopyToClipboard from "react-copy-to-clipboard";
import { makeStyles } from "@mui/styles";
 
interface Props {
  token?: string;
}
 
const useStyles = makeStyles({
  token: {
    wordBreak: "break-all",
    color: "black",
    textAlign: "center",
    filter: "blur(5px)",
    "&:hover": {
      filter: "none"
    }
  },
  container: {
    minWidth: "0"
  }
});
 
const UserTokenDetails: React.FC<Props> = ({ token }) => {
  const classes = useStyles();
 
  return (
    <Paper className="fieldsetParent">
      <fieldset className={classes.container}>
        <Typography component="legend" variant="h5" gutterBottom>
          API Token
        </Typography>
        <Typography gutterBottom className={classes.token}>
          {token}
        </Typography>
        <CopyToClipboard text={token ? token : ""}>
          <Tooltip title="Copy API Token">
            <Button size="small" variant="text" color="primary" fullWidth>
              Copy API Token
            </Button>
          </Tooltip>
        </CopyToClipboard>
      </fieldset>
    </Paper>
  );
};
 
export default UserTokenDetails;