X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/825ea4fce4ba3568f6105c17e83f4769a9323759..b2fcdb2fac8ba49fecca5c30fc56e63b71746cf3:/src/views-components/token-dialog/token-dialog.tsx

diff --git a/src/views-components/token-dialog/token-dialog.tsx b/src/views-components/token-dialog/token-dialog.tsx
index 2a77ea34..b9d195f5 100644
--- a/src/views-components/token-dialog/token-dialog.tsx
+++ b/src/views-components/token-dialog/token-dialog.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import {
     Dialog,
     DialogActions,
@@ -14,20 +14,21 @@ import {
     Button,
     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 { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+} 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' | 'codeBlock';
 
@@ -95,7 +96,7 @@ unset ARVADOS_API_HOST_INSECURE`
     render() {
         const { classes, open, closeDialog, ...data } = this.props;
         const tokenExpiration = data.tokenExpiration
-            ? data.tokenExpiration.toLocaleString()
+            ? `${data.tokenExpiration.toLocaleString()} (${moment(data.tokenExpiration).fromNow()})`
             : `This token does not have an expiration date`;
 
         return <Dialog
@@ -114,20 +115,20 @@ unset ARVADOS_API_HOST_INSECURE`
                         </a>
                     </Typography>
                 </Typography>
-                <Typography  paragraph={true}>
-                    <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> }
-                </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"
+                    size="small"
+                    variant="contained"
+                    className={classes.actionButton}
+                >
+                    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>