1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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 { DetailsAttribute } from '~/components/details-attribute/details-attribute';
20 } from '@material-ui/core';
21 import { ArvadosTheme } from '~/common/custom-theme';
22 import { User } from "~/models/user";
23 import { MY_ACCOUNT_VALIDATION } from "~/validators/validators";
25 type CssRules = 'root' | 'gridItem' | 'label' | 'title' | 'actions' | 'link';
27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
40 marginBottom: theme.spacing.unit * 3,
41 color: theme.palette.grey["600"]
47 color: theme.palette.primary.main,
54 justifyContent: 'flex-end'
58 export interface MyAccountPanelRootActionProps {
59 openLinkAccount: () => void;
62 export interface MyAccountPanelRootDataProps {
70 { key: 'Bio-informatician', value: 'Bio-informatician' },
71 { key: 'Data Scientist', value: 'Data Scientist' },
72 { key: 'Analyst', value: 'Analyst' },
73 { key: 'Researcher', value: 'Researcher' },
74 { key: 'Software Developer', value: 'Software Developer' },
75 { key: 'System Administrator', value: 'System Administrator' },
76 { key: 'Other', value: 'Other' }
79 type MyAccountPanelRootProps = InjectedFormProps & MyAccountPanelRootActionProps & MyAccountPanelRootDataProps & WithStyles<CssRules>;
81 type LocalClusterProp = { localCluster: string };
82 const renderField: React.ComponentType<WrappedFieldProps & LocalClusterProp> = ({ input, localCluster }) => (
83 <span>{localCluster === input.value.substr(0, 5) ? "" : "federated"} user {input.value}</span>
86 export const MyAccountPanelRoot = withStyles(styles)(
87 ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting, localCluster, openLinkAccount}: MyAccountPanelRootProps) => {
88 return <Card className={classes.root}>
90 <Grid container spacing={24}>
91 <Grid item className={classes.gridItem}>
92 <Typography variant="title" className={classes.title}>
93 Logged in as <Field name="uuid" component={renderField} localCluster={localCluster} />
96 <Grid item className={classes.gridItem}>
97 <span onClick={() => openLinkAccount()}>
98 <DetailsAttribute classLabel={classes.link} label='Link account' />
102 <form onSubmit={handleSubmit}>
103 <Grid container spacing={24}>
104 <Grid item className={classes.gridItem} sm={6} xs={12}>
108 component={TextField}
112 <Grid item className={classes.gridItem} sm={6} xs={12}>
116 component={TextField}
120 <Grid item className={classes.gridItem} sm={6} xs={12}>
124 component={TextField}
128 <Grid item className={classes.gridItem} sm={6} xs={12}>
132 component={TextField}
136 <Grid item className={classes.gridItem} sm={6} xs={12}>
139 name="prefs.profile.organization"
140 component={TextField}
141 validate={MY_ACCOUNT_VALIDATION}
145 <Grid item className={classes.gridItem} sm={6} xs={12}>
147 label="E-mail at Organization"
148 name="prefs.profile.organization_email"
149 component={TextField}
150 validate={MY_ACCOUNT_VALIDATION}
154 <Grid item className={classes.gridItem} sm={6} xs={12}>
155 <InputLabel className={classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
157 id="prefs.profile.role"
158 name="prefs.profile.role"
159 component={NativeSelectField}
163 <Grid item className={classes.gridItem} sm={6} xs={12}>
166 name="prefs.profile.website_url"
167 component={TextField}
170 <Grid container direction="row" justify="flex-end" >
171 <Button color="primary" onClick={reset} disabled={isPristine}>Discard changes</Button>
176 disabled={isPristine || invalid || submitting}>