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