src/views/link-account-panel/link-account-panel-root.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 {
   7     StyleRulesCallback,
   8     WithStyles,
   9     withStyles,
  10     Card,
  11     CardContent,
  12     Button,
  13     Typography,
  14     Grid,
  15 } from '@material-ui/core';
  16 import { ArvadosTheme } from '~/common/custom-theme';
  17 import { User } from "~/models/user";
  18 import { formatDate }from "~/common/formatters";
  19
  20 type CssRules = 'root';// | 'gridItem' | 'label' | 'title' | 'actions';
  21
  22 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  23     root: {
  24         width: '100%',
  25         overflow: 'auto'
  26     }
  27 });
  28
  29 export interface LinkAccountPanelRootDataProps {
  30     user?: User;
  31 }
  32
  33 export interface LinkAccountPanelRootActionProps { }
  34
  35 type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPanelRootActionProps & WithStyles<CssRules>;
  36
  37 export const LinkAccountPanelRoot = withStyles(styles) (
  38     ({classes, user}: LinkAccountPanelRootProps) => {
  39         return <Card className={classes.root}>
  40             <CardContent>
  41             <Grid container spacing={24}>
  42             { user && <Grid container item direction="column" spacing={24}>
  43                 <Grid item>
  44                     You are currently logged in as <b>{user.email}</b> ({user.username}, {user.uuid}) created on <b>{formatDate(user.createdAt)}</b>
  45                 </Grid>
  46                 <Grid item>
  47                     You can link Arvados accounts. After linking, either login will take you to the same account.
  48                 </Grid>
  49             </Grid> }
  50             <Grid container item direction="row" spacing={24}>
  51                 <Grid item>
  52                     <Button color="primary" variant="contained">Add another login to this account</Button>
  53                 </Grid>
  54                 <Grid item>
  55                     <Button color="primary" variant="contained">Use this login to access another account</Button>
  56                 </Grid>
  57             </Grid>
  58             </Grid>
  59             </CardContent>
  60         </Card>;
  61 });