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 { UserResource } from "~/models/user";
  18 import { LinkAccountType } from "~/models/link-account";
  19 import { formatDate } from "~/common/formatters";
  20
  21 type CssRules = 'root';// | 'gridItem' | 'label' | 'title' | 'actions';
  22
  23 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  24     root: {
  25         width: '100%',
  26         overflow: 'auto'
  27     }
  28 });
  29
  30 export interface LinkAccountPanelRootDataProps {
  31     user?: UserResource;
  32     userToLink?: UserResource;
  33 }
  34
  35 export interface LinkAccountPanelRootActionProps {
  36     saveAccountLinkData: (type: LinkAccountType) => void;
  37     removeAccountLinkData: () => void;
  38     linkAccount: () => void;
  39 }
  40
  41 function displayUser(user: UserResource, showCreatedAt: boolean = false) {
  42     const disp = [];
  43     disp.push(<span><b>{user.email}</b> ({user.username}, {user.uuid})</span>);
  44     if (showCreatedAt) {
  45         disp.push(<span> created on <b>{formatDate(user.createdAt)}</b></span>);
  46     }
  47     return disp;
  48 }
  49
  50 type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPanelRootActionProps & WithStyles<CssRules>;
  51
  52 export const LinkAccountPanelRoot = withStyles(styles) (
  53     ({classes, user, userToLink, saveAccountLinkData, removeAccountLinkData, linkAccount}: LinkAccountPanelRootProps) => {
  54         return <Card className={classes.root}>
  55             <CardContent>
  56             { user && userToLink===undefined && <Grid container spacing={24}>
  57                 <Grid container item direction="column" spacing={24}>
  58                     <Grid item>
  59                         You are currently logged in as {displayUser(user, true)}
  60                     </Grid>
  61                     <Grid item>
  62                         You can link Arvados accounts. After linking, either login will take you to the same account.
  63                     </Grid>
  64                 </Grid>
  65                 <Grid container item direction="row" spacing={24}>
  66                     <Grid item>
  67                         <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ADD_OTHER_LOGIN)}>
  68                             Add another login to this account
  69                         </Button>
  70                     </Grid>
  71                     <Grid item>
  72                         <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
  73                             Use this login to access another account
  74                         </Button>
  75                     </Grid>
  76                 </Grid>
  77             </Grid>}
  78             { userToLink && user && <Grid container spacing={24}>
  79                 <Grid container item direction="column" spacing={24}>
  80                     <Grid item>
  81                         Clicking 'Link accounts' will link {displayUser(user, true)} to {displayUser(userToLink, true)}.
  82                     </Grid>
  83                     <Grid item>
  84                         After linking, logging in as {displayUser(user)} will log you into the same account as {displayUser(userToLink)}.
  85                     </Grid>
  86                     <Grid item>
  87                        Any object owned by {displayUser(user)} will be transfered to {displayUser(userToLink)}.
  88                     </Grid>
  89                 </Grid>
  90                 <Grid container item direction="row" spacing={24}>
  91                     <Grid item>
  92                         <Button variant="contained" onClick={() => removeAccountLinkData()}>
  93                             Cancel
  94                         </Button>
  95                     </Grid>
  96                     <Grid item>
  97                         <Button color="primary" variant="contained" onClick={() => linkAccount()}>
  98                             Link accounts
  99                         </Button>
 100                     </Grid>
 101                 </Grid>
 102             </Grid> }
 103             </CardContent>
 104         </Card> ;
 105 });