src/views/my-account-panel/my-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 { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, TextField, Button, Typography, Grid, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import { User } from "~/models/user";
   9
  10 type CssRules = 'root' | 'gridItem' | 'title';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     root: {
  14         width: '100%',
  15         overflow: 'auto'
  16     },
  17     gridItem: {
  18         minHeight: 45,
  19         marginBottom: 20
  20     },
  21     title: {
  22         marginBottom: theme.spacing.unit * 3,
  23         color: theme.palette.grey["600"]
  24     }
  25 });
  26
  27 export interface MyAccountPanelRootActionProps {}
  28
  29 export interface MyAccountPanelRootDataProps {
  30     user?: User;
  31 }
  32
  33 type MyAccountPanelRootProps = MyAccountPanelRootActionProps & MyAccountPanelRootDataProps & WithStyles<CssRules>;
  34
  35 export const MyAccountPanelRoot = withStyles(styles)(
  36     ({ classes, user }: MyAccountPanelRootProps) => {
  37         console.log(user);
  38         return <Card className={classes.root}>
  39             <CardContent>
  40                 <Typography variant="title" className={classes.title}>User profile</Typography>
  41                 <Grid container direction="row" spacing={24}>
  42                     <Grid item xs={6}>
  43                         <Grid item className={classes.gridItem}>
  44                             <TextField
  45                                 label="E-mail"
  46                                 name="email"
  47                                 fullWidth
  48                                 value={user!.email}
  49                                 disabled
  50                             />
  51                         </Grid>
  52                         <Grid item className={classes.gridItem}>
  53                             <TextField
  54                                 label="First name"
  55                                 name="firstName"
  56                                 fullWidth
  57                                 value={user!.firstName}
  58                                 disabled
  59                             />
  60                         </Grid>
  61                         <Grid item className={classes.gridItem}>
  62                             <TextField
  63                                 label="Identity URL"
  64                                 name="identityUrl"
  65                                 fullWidth
  66                                 value={user!.identityUrl}
  67                                 disabled
  68                             />
  69                         </Grid>
  70                         <Grid item className={classes.gridItem}>
  71                             <TextField
  72                                 label="Organization"
  73                                 name="organization"
  74                                 value={user!.prefs.profile!.organization}
  75                                 fullWidth
  76                             />
  77                         </Grid>
  78                         <Grid item className={classes.gridItem}>
  79                             <TextField
  80                                 label="Website"
  81                                 name="website"
  82                                 value={user!.prefs.profile!.website_url}
  83                                 fullWidth
  84                             />
  85                         </Grid>
  86                         <Grid item className={classes.gridItem}>
  87                             <TextField
  88                                 label="Role"
  89                                 name="role"
  90                                 value={user!.prefs.profile!.role}
  91                                 fullWidth
  92                             />
  93                         </Grid>
  94                     </Grid>
  95                     <Grid item xs={6}>
  96                         <Grid item className={classes.gridItem} />
  97                         <Grid item className={classes.gridItem}>
  98                             <TextField
  99                                 label="Last name"
 100                                 name="lastName"
 101                                 fullWidth
 102                                 value={user!.lastName}
 103                                 disabled
 104                             />
 105                         </Grid>
 106                         <Grid item className={classes.gridItem} />
 107                         <Grid item className={classes.gridItem}>
 108                             <TextField
 109                                 label="E-mail at Organization"
 110                                 name="organizationEmail"
 111                                 value={user!.prefs.profile!.organization_email}
 112                                 fullWidth
 113                             />
 114                         </Grid>
 115                     </Grid>
 116                 </Grid>
 117             </CardContent>
 118         </Card>;}
 119 );