//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
+import React from 'react';
import {
Dialog,
DialogActions,
withStyles,
StyleRulesCallback,
Button,
- Typography,
- Tooltip
+ Typography
} from '@material-ui/core';
-import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { withDialog } from '~/store/dialog/with-dialog';
-import { WithDialogProps } from '~/store/dialog/with-dialog';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { ArvadosTheme } from 'common/custom-theme';
+import { withDialog } from 'store/dialog/with-dialog';
+import { WithDialogProps } from 'store/dialog/with-dialog';
import { connect, DispatchProp } from 'react-redux';
import {
TokenDialogData,
getTokenDialogData,
TOKEN_DIALOG_NAME,
-} from '~/store/token-dialog/token-dialog-actions';
-import { DefaultCodeSnippet } from '~/components/default-code-snippet/default-code-snippet';
-import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
-import { getNewExtraToken } from '~/store/auth/auth-action';
-import { CopyIcon } from '~/components/icon/icon';
+} from 'store/token-dialog/token-dialog-actions';
+import { DefaultCodeSnippet } from 'components/default-code-snippet/default-code-snippet';
+import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
+import { getNewExtraToken } from 'store/auth/auth-action';
+import { DetailsAttributeComponent } from 'components/details-attribute/details-attribute';
+import moment from 'moment';
-type CssRules = 'link' | 'paper' | 'button' | 'actionButton' | 'copyIcon' | 'inlineMonospaced';
+type CssRules = 'link' | 'paper' | 'button' | 'actionButton' | 'codeBlock';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
link: {
marginBottom: theme.spacing.unit * 2,
marginRight: theme.spacing.unit * 2,
},
- copyIcon: {
- marginLeft: theme.spacing.unit,
- color: theme.palette.grey["500"],
- cursor: 'pointer',
- display: 'inline',
- '& svg': {
- fontSize: '1rem'
- }
+ codeBlock: {
+ fontSize: '0.8125rem',
},
- inlineMonospaced: {
- fontFamily: 'Monospace',
- fontSize: '1rem',
- display: 'inline-block',
- }
});
type TokenDialogProps = TokenDialogData & WithDialogProps<{}> & WithStyles<CssRules> & DispatchProp;
render() {
const { classes, open, closeDialog, ...data } = this.props;
+ const tokenExpiration = data.tokenExpiration
+ ? `${data.tokenExpiration.toLocaleString()} (${moment(data.tokenExpiration).fromNow()})`
+ : `This token does not have an expiration date`;
return <Dialog
open={open}
</a>
</Typography>
</Typography>
- <Typography paragraph={true}>
- <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>
- </Typography>
+
+ <DetailsAttributeComponent label='API Host' value={data.apiHost} copyValue={data.apiHost} onCopy={this.onCopy} />
+ <DetailsAttributeComponent label='API Token' value={data.token} copyValue={data.token} onCopy={this.onCopy} />
+ <DetailsAttributeComponent label='Token expiration' value={tokenExpiration} />
{ this.props.canCreateNewTokens && <Button
onClick={() => this.onGetNewToken()}
color="primary"
>
GET NEW TOKEN
</Button> }
+
<Typography paragraph={true}>
Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your account.
</Typography>
- <DefaultCodeSnippet lines={[this.getSnippet(data)]} />
+ <DefaultCodeSnippet className={classes.codeBlock} lines={[this.getSnippet(data)]} />
<CopyToClipboard text={this.getSnippet(data)} onCopy={() => this.onCopy('Shell code block copied')}>
<Button
color="primary"
COPY TO CLIPBOARD
</Button>
</CopyToClipboard>
- <Typography >
+ <Typography>
Arvados
<a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).