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 { NativeSelectField } from "~/components/select-field/select-field";
   9 import {
  10     StyleRulesCallback,
  11     WithStyles,
  12     withStyles,
  13     Card,
  14     CardContent,
  15     Button,
  16     Typography,
  17     Grid,
  18     InputLabel
  19 } from '@material-ui/core';
  20 import { ArvadosTheme } from '~/common/custom-theme';
  21 import { User } from "~/models/user";
  22 import { MY_ACCOUNT_VALIDATION} from "~/validators/validators";
  23
  24 type CssRules = 'root' | 'gridItem' | 'label' | 'title' | 'actions';
  25
  26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  27     root: {
  28         width: '100%',
  29         overflow: 'auto'
  30     },
  31     gridItem: {
  32         height: 45,
  33         marginBottom: 20
  34     },
  35     label: {
  36         fontSize: '0.675rem'
  37     },
  38     title: {
  39         marginBottom: theme.spacing.unit * 3,
  40         color: theme.palette.grey["600"]
  41     },
  42     actions: {
  43         display: 'flex',
  44         justifyContent: 'flex-end'
  45     }
  46 });
  47
  48 export interface MyAccountPanelRootActionProps {}
  49
  50 export interface MyAccountPanelRootDataProps {
  51     isPristine: boolean;
  52     isValid: boolean;
  53     initialValues?: User;
  54 }
  55
  56 const RoleTypes = [
  57     {key: 'Bio-informatician', value: 'Bio-informatician'},
  58     {key: 'Data Scientist', value: 'Data Scientist'},
  59     {key: 'Analyst', value: 'Analyst'},
  60     {key: 'Researcher', value: 'Researcher'},
  61     {key: 'Software Developer', value: 'Software Developer'},
  62     {key: 'System Administrator', value: 'System Administrator'},
  63     {key: 'Other', value: 'Other'}
  64 ];
  65
  66 type MyAccountPanelRootProps = InjectedFormProps<MyAccountPanelRootActionProps> & MyAccountPanelRootDataProps & WithStyles<CssRules>;
  67
  68 export const MyAccountPanelRoot = withStyles(styles)(
  69     ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting }: MyAccountPanelRootProps) => {
  70         return <Card className={classes.root}>
  71             <CardContent>
  72                 <Typography variant="title" className={classes.title}>User profile</Typography>
  73                 <form onSubmit={handleSubmit}>
  74                     <Grid container direction="row" spacing={24}>
  75                         <Grid item xs={6}>
  76                             <Grid item className={classes.gridItem}>
  77                                 <Field
  78                                     label="E-mail"
  79                                     name="email"
  80                                     component={TextField}
  81                                     disabled
  82                                 />
  83                             </Grid>
  84                             <Grid item className={classes.gridItem}>
  85                                 <Field
  86                                     label="First name"
  87                                     name="firstName"
  88                                     component={TextField}
  89                                     disabled
  90                                 />
  91                             </Grid>
  92                             <Grid item className={classes.gridItem}>
  93                                 <Field
  94                                     label="Identity URL"
  95                                     name="identityUrl"
  96                                     component={TextField}
  97                                     disabled
  98                                 />
  99                             </Grid>
 100                             <Grid item className={classes.gridItem}>
 101                                 <Field
 102                                     label="*Organization"
 103                                     name="prefs.profile.organization"
 104                                     component={TextField}
 105                                     validate={MY_ACCOUNT_VALIDATION}
 106                                 />
 107                             </Grid>
 108                             <Grid item className={classes.gridItem}>
 109                                 <Field
 110                                     label="Website"
 111                                     name="prefs.profile.website_url"
 112                                     component={TextField}
 113                                 />
 114                             </Grid>
 115                             <Grid item className={classes.gridItem}>
 116                                 <InputLabel className={classes.label} htmlFor="prefs.profile.role">Organization</InputLabel>
 117                                 <Field
 118                                     id="prefs.profile.role"
 119                                     name="prefs.profile.role"
 120                                     component={NativeSelectField}
 121                                     items={RoleTypes}
 122                                 />
 123                             </Grid>
 124                         </Grid>
 125                         <Grid item xs={6}>
 126                             <Grid item className={classes.gridItem} />
 127                             <Grid item className={classes.gridItem}>
 128                                 <Field
 129                                     label="Last name"
 130                                     name="lastName"
 131                                     component={TextField}
 132                                     disabled
 133                                 />
 134                             </Grid>
 135                             <Grid item className={classes.gridItem} />
 136                             <Grid item className={classes.gridItem}>
 137                                 <Field
 138                                     label="*E-mail at Organization"
 139                                     name="prefs.profile.organization_email"
 140                                     component={TextField}
 141                                     validate={MY_ACCOUNT_VALIDATION}
 142                                 />
 143                             </Grid>
 144                         </Grid>
 145                         <Grid item xs={12} className={classes.actions}>
 146                             <Button color="primary" onClick={reset} disabled={isPristine}>Discard changes</Button>
 147                             <Button
 148                                 color="primary"
 149                                 variant="contained"
 150                                 type="submit"
 151                                 disabled={isPristine || invalid || submitting}>
 152                                     Save changes
 153                             </Button>
 154                         </Grid>
 155                     </Grid>
 156                 </form>
 157             </CardContent>
 158         </Card>;}
 159 );