src/views-components/current-token-dialog/current-token-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Dialog, DialogActions, DialogTitle, DialogContent, WithStyles, withStyles, StyleRulesCallback, Button, Typography, Paper } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8
   9 type CssRules = 'link' | 'paper' | 'button';
  10
  11 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  12     link: {
  13         color: theme.palette.primary.main,
  14         textDecoration: 'none',
  15         margin: '0px 4px'
  16     },
  17     paper: {
  18         padding: theme.spacing.unit,
  19         marginBottom: theme.spacing.unit * 2,
  20         backgroundColor: theme.palette.grey["200"],
  21         border: `1px solid ${theme.palette.grey["300"]}`
  22     },
  23     button: {
  24         fontSize: '0.8125rem',
  25         fontWeight: 600
  26     }
  27 });
  28
  29 interface CurrentTokenDataProps {
  30     currentToken?: string;
  31     open: boolean;
  32 }
  33
  34 interface CurrentTokenActionProps {
  35     handleClose: () => void;
  36 }
  37
  38 type CurrentTokenProps = CurrentTokenDataProps & CurrentTokenActionProps & WithStyles<CssRules>;
  39
  40 export const CurrentTokenDialog = withStyles(styles)(
  41     class extends React.Component<CurrentTokenProps> {
  42
  43         render() {
  44             const { classes, open, handleClose, currentToken } = this.props;
  45             return (
  46                 <Dialog open={open} onClose={handleClose} fullWidth={true} maxWidth='md'>
  47                     <DialogTitle>Current Token</DialogTitle>
  48                     <DialogContent>
  49                         <Typography variant='body1' paragraph={true}>
  50                             The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
  51                             <Typography component='p'>
  52                                 For more information see
  53                                 <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
  54                                     Getting an API token.
  55                                 </a>
  56                             </Typography>
  57                         </Typography>
  58
  59                         <Typography variant='body1' paragraph={true}>
  60                             Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your klingenc account.
  61                         </Typography>
  62
  63                         <Paper className={classes.paper} elevation={0}>
  64                             <Typography variant='body1'>
  65                                 HISTIGNORE=$HISTIGNORE:'export ARVADOS_API_TOKEN=*'
  66                             </Typography>
  67                             <Typography variant='body1'>
  68                                 export ARVADOS_API_TOKEN={currentToken}
  69                             </Typography>
  70                             <Typography variant='body1'>
  71                                 export ARVADOS_API_HOST=api.ardev.roche.com
  72                             </Typography>
  73                             <Typography variant='body1'>
  74                                 unset ARVADOS_API_HOST_INSECURE
  75                             </Typography>
  76                         </Paper>
  77                         <Typography variant='body1'>
  78                             Arvados
  79                             <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
  80                             do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
  81                         </Typography>
  82                     </DialogContent>
  83                     <DialogActions>
  84                         <Button onClick={handleClose} className={classes.button} color="primary">CLOSE</Button>
  85                     </DialogActions>
  86                 </Dialog>
  87             );
  88         }
  89     }
  90 );