EMS-ESP32/interface/src/security/GenerateToken.tsx

import React, { Fragment } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Box,
  LinearProgress,
  Typography,
  TextField
} from '@material-ui/core';

import { FormButton } from '../components';
import { redirectingAuthorizedFetch } from '../authentication';
import { GENERATE_TOKEN_ENDPOINT } from '../api';
import { withSnackbar, WithSnackbarProps } from 'notistack';

interface GenerateTokenProps extends WithSnackbarProps {
  username: string;
  onClose: () => void;
}

interface GenerateTokenState {
  token?: string;
}

class GenerateToken extends React.Component<
  GenerateTokenProps,
  GenerateTokenState
> {
  state: GenerateTokenState = {};

  componentDidMount() {
    const { username } = this.props;
    redirectingAuthorizedFetch(
      GENERATE_TOKEN_ENDPOINT + '?' + new URLSearchParams({ username }),
      { method: 'GET' }
    )
      .then((response) => {
        if (response.status === 200) {
          return response.json();
        } else {
          throw Error('Error generating token: ' + response.status);
        }
      })
      .then((generatedToken) => {
        this.setState({ token: generatedToken.token });
      })
      .catch((error) => {
        this.props.enqueueSnackbar(
          error.message || 'Problem generating token',
          { variant: 'error' }
        );
      });
  }

  render() {
    const { onClose, username } = this.props;
    const { token } = this.state;
    return (
      <Dialog
        onClose={onClose}
        aria-labelledby="generate-token-dialog-title"
        open
        fullWidth
        maxWidth="sm"
      >
        <DialogTitle id="generate-token-dialog-title">
          Token for: {username}
        </DialogTitle>
        <DialogContent dividers>
          {token ? (
            <Fragment>
              <Box
                bgcolor="primary.main"
                color="primary.contrastText"
                p={2}
                mt={2}
                mb={2}
              >
                <Typography variant="body1">
                  The token below may be used to access the secured APIs, either
                  as a Bearer authentication in the "Authorization" header or
                  using the "access_token" query parameter.
                </Typography>
              </Box>
              <Box mt={2} mb={2}>
                <TextField
                  label="Token"
                  multiline
                  value={token}
                  fullWidth
                  contentEditable={false}
                />
              </Box>
            </Fragment>
          ) : (
            <Box m={4} textAlign="center">
              <LinearProgress />
              <Typography variant="h6">Generating token&hellip;</Typography>
            </Box>
          )}
        </DialogContent>
        <DialogActions>
          <FormButton
            variant="contained"
            color="primary"
            type="submit"
            onClick={onClose}
          >
            Close
          </FormButton>
        </DialogActions>
      </Dialog>
    );
  }
}

export default withSnackbar(GenerateToken);