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