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';
30 import { DetailsAttributeComponent } from '~/components/details-attribute/details-attribute';
32 type CssRules = 'link' | 'paper' | 'button' | 'actionButton' | 'codeBlock';
34 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
36 color: theme.palette.primary.main,
37 textDecoration: 'none',
41 padding: theme.spacing.unit,
42 marginBottom: theme.spacing.unit * 2,
43 backgroundColor: theme.palette.grey["200"],
44 border: `1px solid ${theme.palette.grey["300"]}`
47 fontSize: '0.8125rem',
52 marginTop: theme.spacing.unit * 2,
53 marginBottom: theme.spacing.unit * 2,
54 marginRight: theme.spacing.unit * 2,
57 fontSize: '0.8125rem',
61 type TokenDialogProps = TokenDialogData & WithDialogProps<{}> & WithStyles<CssRules> & DispatchProp;
63 export class TokenDialogComponent extends React.Component<TokenDialogProps> {
64 onCopy = (message: string) => {
65 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
68 kind: SnackbarKind.SUCCESS
72 onGetNewToken = async () => {
73 const newToken = await this.props.dispatch<any>(getNewExtraToken());
75 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
76 message: 'New token retrieved',
78 kind: SnackbarKind.SUCCESS
81 this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
82 message: 'Creating new tokens is not allowed',
84 kind: SnackbarKind.WARNING
89 getSnippet = ({ apiHost, token }: TokenDialogData) =>
90 `HISTIGNORE=$HISTIGNORE:'export ARVADOS_API_TOKEN=*'
91 export ARVADOS_API_TOKEN=${token}
92 export ARVADOS_API_HOST=${apiHost}
93 unset ARVADOS_API_HOST_INSECURE`
96 const { classes, open, closeDialog, ...data } = this.props;
97 const tokenExpiration = data.tokenExpiration
98 ? data.tokenExpiration.toLocaleString()
99 : `This token does not have an expiration date`;
103 onClose={closeDialog}
106 <DialogTitle>Get API Token</DialogTitle>
108 <Typography paragraph={true}>
109 The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
110 <Typography component='span'>
111 For more information see
112 <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
113 Getting an API token.
118 <DetailsAttributeComponent label='API Host' value={data.apiHost} copyValue={data.apiHost} onCopy={this.onCopy} />
119 <DetailsAttributeComponent label='API Token' value={data.token} copyValue={data.token} onCopy={this.onCopy} />
120 <DetailsAttributeComponent label='Token expiration' value={tokenExpiration} />
121 { this.props.canCreateNewTokens && <Button
122 onClick={() => this.onGetNewToken()}
126 className={classes.actionButton}
131 <Typography paragraph={true}>
132 Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your account.
134 <DefaultCodeSnippet className={classes.codeBlock} lines={[this.getSnippet(data)]} />
135 <CopyToClipboard text={this.getSnippet(data)} onCopy={() => this.onCopy('Shell code block copied')}>
140 className={classes.actionButton}
147 <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
148 do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
152 <Button onClick={closeDialog} className={classes.button} color="primary">CLOSE</Button>
158 export const TokenDialog =
160 connect(getTokenDialogData)(
161 withDialog(TOKEN_DIALOG_NAME)(TokenDialogComponent)));