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 { require } from "~/validators/require";
  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 export const MY_ACCOUNT_FORM = 'myAccountForm';
  57
  58 const FILES_FIELD_VALIDATION = [require];
  59
  60 type MyAccountPanelRootProps = InjectedFormProps<MyAccountPanelRootActionProps> & MyAccountPanelRootDataProps & WithStyles<CssRules>;
  61
  62 export const MyAccountPanelRoot = withStyles(styles)(
  63     ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting }: MyAccountPanelRootProps) => {
  64         return <Card className={classes.root}>
  65             <CardContent>
  66                 <Typography variant="title" className={classes.title}>User profile</Typography>
  67                 <form onSubmit={handleSubmit}>
  68                     <Grid container direction="row" spacing={24}>
  69                         <Grid item xs={6}>
  70                             <Grid item className={classes.gridItem}>
  71                                 <Field
  72                                     label="E-mail"
  73                                     name="email"
  74                                     component={TextField}
  75                                     disabled
  76                                 />
  77                             </Grid>
  78                             <Grid item className={classes.gridItem}>
  79                                 <Field
  80                                     label="First name"
  81                                     name="firstName"
  82                                     component={TextField}
  83                                     disabled
  84                                 />
  85                             </Grid>
  86                             <Grid item className={classes.gridItem}>
  87                                 <Field
  88                                     label="Identity URL"
  89                                     name="identityUrl"
  90                                     component={TextField}
  91                                     disabled
  92                                 />
  93                             </Grid>
  94                             <Grid item className={classes.gridItem}>
  95                                 <Field
  96                                     label="*Organization"
  97                                     name="prefs.profile.organization"
  98                                     component={TextField}
  99                                     validate={FILES_FIELD_VALIDATION}
 100                                 />
 101                             </Grid>
 102                             <Grid item className={classes.gridItem}>
 103                                 <Field
 104                                     label="Website"
 105                                     name="prefs.profile.website_url"
 106                                     component={TextField}
 107                                 />
 108                             </Grid>
 109                             <Grid item className={classes.gridItem}>
 110                                 <InputLabel className={classes.label} htmlFor="prefs.profile.role">Organization</InputLabel>
 111                                 <Field
 112                                     id="prefs.profile.role"
 113                                     name="prefs.profile.role"
 114                                     component={NativeSelectField}
 115                                     items={[
 116                                         {key: 'Bio-informatician', value: 'Bio-informatician'},
 117                                         {key: 'Data Scientist', value: 'Data Scientist'},
 118                                         {key: 'Analyst', value: 'Analyst'},
 119                                         {key: 'Researcher', value: 'Researcher'},
 120                                         {key: 'Software Developer', value: 'Software Developer'},
 121                                         {key: 'System Administrator', value: 'System Administrator'},
 122                                         {key: 'Other', value: 'Other'}
 123                                     ]}
 124                                 />
 125                             </Grid>
 126                         </Grid>
 127                         <Grid item xs={6}>
 128                             <Grid item className={classes.gridItem} />
 129                             <Grid item className={classes.gridItem}>
 130                                 <Field
 131                                     label="Last name"
 132                                     name="lastName"
 133                                     component={TextField}
 134                                     disabled
 135                                 />
 136                             </Grid>
 137                             <Grid item className={classes.gridItem} />
 138                             <Grid item className={classes.gridItem}>
 139                                 <Field
 140                                     label="*E-mail at Organization"
 141                                     name="prefs.profile.organization_email"
 142                                     component={TextField}
 143                                     validate={FILES_FIELD_VALIDATION}
 144                                 />
 145                             </Grid>
 146                         </Grid>
 147                         <Grid item xs={12} className={classes.actions}>
 148                             <Button color="primary" onClick={reset} disabled={isPristine}>Discard changes</Button>
 149                             <Button color="primary" variant="contained" type="submit" disabled={isPristine || invalid || submitting}>Save changes</Button>
 150                         </Grid>
 151                     </Grid>
 152                 </form>
 153             </CardContent>
 154         </Card>;}
 155 );