- <Typography component='span'>
- Your Arvados API host is: <Typography className={classes.inlineMonospaced} component='span'>{data.apiHost} {<Tooltip title="Copy to clipboard">
- <span className={classes.copyIcon}>
- <CopyToClipboard text={data.apiHost} onCopy={() => this.onCopy("API host copied")}>
- <CopyIcon />
- </CopyToClipboard>
- </span>
- </Tooltip>}
- </Typography>
- </Typography>
- <Typography component='span'>
- Your token is: <Typography className={classes.inlineMonospaced} component='span'>{data.token} {<Tooltip title="Copy to clipboard">
- <span className={classes.copyIcon}>
- <CopyToClipboard text={data.token} onCopy={() => this.onCopy("Token copied")}>
- <CopyIcon />
- </CopyToClipboard>
- </span>
- </Tooltip>}
- </Typography>
- </Typography>
- <Typography component='span'>
- { data.tokenExpiration
- ? `Expires at: ${data.tokenExpiration.toLocaleString()}`
- : `This token does not have an expiration date`
- }
- </Typography>
+ <DetailsAttribute label='API Host' value={data.apiHost} copyValue={data.apiHost} />
+ <DetailsAttribute label='API Token' value={data.token} copyValue={data.token} />
+ <DetailsAttribute label='Token expiration' value={tokenExpiration} />
+ { this.props.canCreateNewTokens && <Button
+ onClick={() => this.onGetNewToken()}
+ color="primary"
+ size="small"
+ variant="contained"
+ className={classes.actionButton}
+ >
+ GET NEW TOKEN
+ </Button> }