1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
16 } from '@material-ui/core';
17 import * as CopyToClipboard from 'react-copy-to-clipboard';
18 import { ArvadosTheme } from '~/common/custom-theme';
19 import { withDialog } from '~/store/dialog/with-dialog';
20 import { WithDialogProps } from '~/store/dialog/with-dialog';
21 import { connect, DispatchProp } from 'react-redux';
26 } from '~/store/token-dialog/token-dialog-actions';
27 import { DefaultCodeSnippet } from '~/components/default-code-snippet/default-code-snippet';
28 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
29 import { getNewExtraToken } from '~/store/auth/auth-action';
31 type CssRules = 'link' | 'paper' | 'button' | 'actionButton';
33 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
35 color: theme.palette.primary.main,
36 textDecoration: 'none',
40 padding: theme.spacing.unit,
41 marginBottom: theme.spacing.unit * 2,
42 backgroundColor: theme.palette.grey["200"],
43 border: `1px solid ${theme.palette.grey["300"]}`
46 fontSize: '0.8125rem',
51 marginTop: theme.spacing.unit * 2,
52 marginBottom: theme.spacing.unit * 2,
53 marginRight: theme.spacing.unit * 2,
57 type TokenDialogProps = TokenDialogData & WithDialogProps<{}> & WithStyles<CssRules> & DispatchProp;
59 export class TokenDialogComponent extends React.Component<TokenDialogProps> {
60 onCopy = (message: string) => {
61 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
64 kind: SnackbarKind.SUCCESS
68 onGetNewToken = async () => {
69 const newToken = await this.props.dispatch<any>(getNewExtraToken());
71 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
72 message: 'New token retrieved',
74 kind: SnackbarKind.SUCCESS
79 getSnippet = ({ apiHost, token }: TokenDialogData) =>
80 `HISTIGNORE=$HISTIGNORE:'export ARVADOS_API_TOKEN=*'
81 export ARVADOS_API_TOKEN=${token}
82 export ARVADOS_API_HOST=${apiHost}
83 unset ARVADOS_API_HOST_INSECURE`
86 const { classes, open, closeDialog, ...data } = this.props;
93 <DialogTitle>Get API Token</DialogTitle>
95 <Typography paragraph={true}>
96 The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
97 <Typography component='span'>
98 For more information see
99 <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
100 Getting an API token.
104 <Typography paragraph={true}>
105 Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your account.
107 <DefaultCodeSnippet lines={[this.getSnippet(data)]} />
108 <CopyToClipboard text={this.getSnippet(data)} onCopy={() => this.onCopy('Token copied to clipboard')}>
113 className={classes.actionButton}
119 onClick={() => this.onGetNewToken()}
123 className={classes.actionButton}
129 <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
130 do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
134 <Button onClick={closeDialog} className={classes.button} color="primary">CLOSE</Button>
140 export const TokenDialog =
142 connect(getTokenDialogData)(
143 withDialog(TOKEN_DIALOG_NAME)(TokenDialogComponent)));