X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/a1e2b8ba77e4a7273940a3fc542bc42e282618a7..0e86ce9638f17cf801b6dbf08e6dfd91edf89153:/src/views/my-account-panel/my-account-panel-root.tsx

diff --git a/src/views/my-account-panel/my-account-panel-root.tsx b/src/views/my-account-panel/my-account-panel-root.tsx
index 994a7819..283b9acc 100644
--- a/src/views/my-account-panel/my-account-panel-root.tsx
+++ b/src/views/my-account-panel/my-account-panel-root.tsx
@@ -2,10 +2,10 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import { Field, InjectedFormProps } from "redux-form";
-import { TextField } from "~/components/text-field/text-field";
-import { NativeSelectField } from "~/components/select-field/select-field";
+import React from 'react';
+import { Field, InjectedFormProps, WrappedFieldProps } from "redux-form";
+import { TextField } from "components/text-field/text-field";
+import { NativeSelectField } from "components/select-field/select-field";
 import {
     StyleRulesCallback,
     WithStyles,
@@ -17,9 +17,9 @@ import {
     Grid,
     InputLabel
 } from '@material-ui/core';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { User } from "~/models/user";
-import { require } from "~/validators/require";
+import { ArvadosTheme } from 'common/custom-theme';
+import { User } from "models/user";
+import { MY_ACCOUNT_VALIDATION } from "validators/validators";
 
 type CssRules = 'root' | 'gridItem' | 'label' | 'title' | 'actions';
 
@@ -45,111 +45,120 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-export interface MyAccountPanelRootActionProps {}
+export interface MyAccountPanelRootActionProps { }
 
 export interface MyAccountPanelRootDataProps {
     isPristine: boolean;
     isValid: boolean;
     initialValues?: User;
+    localCluster: string;
 }
 
-export const MY_ACCOUNT_FORM = 'myAccountForm';
-
-const FILES_FIELD_VALIDATION = [require];
+const RoleTypes = [
+    { key: 'Bio-informatician', value: 'Bio-informatician' },
+    { key: 'Data Scientist', value: 'Data Scientist' },
+    { key: 'Analyst', value: 'Analyst' },
+    { key: 'Researcher', value: 'Researcher' },
+    { key: 'Software Developer', value: 'Software Developer' },
+    { key: 'System Administrator', value: 'System Administrator' },
+    { key: 'Other', value: 'Other' }
+];
 
 type MyAccountPanelRootProps = InjectedFormProps<MyAccountPanelRootActionProps> & MyAccountPanelRootDataProps & WithStyles<CssRules>;
 
+type LocalClusterProp = { localCluster: string };
+const renderField: React.ComponentType<WrappedFieldProps & LocalClusterProp> = ({ input, localCluster }) => (
+    <span>{localCluster === input.value.substring(0, 5) ? "" : "federated"} user {input.value}</span>
+);
+
 export const MyAccountPanelRoot = withStyles(styles)(
-    ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting }: MyAccountPanelRootProps) => {
+    ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting, localCluster }: MyAccountPanelRootProps) => {
         return <Card className={classes.root}>
             <CardContent>
-                <Typography variant="title" className={classes.title}>User profile</Typography>
+                <Typography variant="title" className={classes.title}>
+                    Logged in as <Field name="uuid" component={renderField} localCluster={localCluster} />
+                </Typography>
                 <form onSubmit={handleSubmit}>
-                    <Grid container direction="row" spacing={24}>
-                        <Grid item xs={6}>
-                            <Grid item className={classes.gridItem}>
-                                <Field
-                                    label="E-mail"
-                                    name="email"
-                                    component={TextField}
-                                    disabled
-                                />
-                            </Grid>
-                            <Grid item className={classes.gridItem}>
-                                <Field
-                                    label="First name"
-                                    name="firstName"
-                                    component={TextField}
-                                    disabled
-                                />
-                            </Grid>
-                            <Grid item className={classes.gridItem}>
-                                <Field
-                                    label="Identity URL"
-                                    name="identityUrl"
-                                    component={TextField}
-                                    disabled
-                                />
-                            </Grid>
-                            <Grid item className={classes.gridItem}>
-                                <Field
-                                    label="*Organization"
-                                    name="prefs.profile.organization"
-                                    component={TextField}
-                                    validate={FILES_FIELD_VALIDATION}
-                                />
-                            </Grid>
-                            <Grid item className={classes.gridItem}>
-                                <Field
-                                    label="Website"
-                                    name="prefs.profile.website_url"
-                                    component={TextField}
-                                />
-                            </Grid>
-                            <Grid item className={classes.gridItem}>
-                                <InputLabel className={classes.label} htmlFor="prefs.profile.role">Organization</InputLabel>
-                                <Field
-                                    id="prefs.profile.role"
-                                    name="prefs.profile.role"
-                                    component={NativeSelectField}
-                                    items={[
-                                        {key: 'Bio-informatician', value: 'Bio-informatician'},
-                                        {key: 'Data Scientist', value: 'Data Scientist'},
-                                        {key: 'Analyst', value: 'Analyst'},
-                                        {key: 'Researcher', value: 'Researcher'},
-                                        {key: 'Software Developer', value: 'Software Developer'},
-                                        {key: 'System Administrator', value: 'System Administrator'},
-                                        {key: 'Other', value: 'Other'}
-                                    ]}
-                                />
-                            </Grid>
+                    <Grid container spacing={24}>
+                        <Grid item className={classes.gridItem} sm={6} xs={12}>
+                            <Field
+                                label="First name"
+                                name="firstName"
+                                component={TextField as any}
+                                disabled
+                            />
+                        </Grid>
+                        <Grid item className={classes.gridItem} sm={6} xs={12}>
+                            <Field
+                                label="Last name"
+                                name="lastName"
+                                component={TextField as any}
+                                disabled
+                            />
+                        </Grid>
+                        <Grid item className={classes.gridItem} sm={6} xs={12}>
+                            <Field
+                                label="E-mail"
+                                name="email"
+                                component={TextField as any}
+                                disabled
+                            />
+                        </Grid>
+                        <Grid item className={classes.gridItem} sm={6} xs={12}>
+                            <Field
+                                label="Username"
+                                name="username"
+                                component={TextField as any}
+                                disabled
+                            />
                         </Grid>
-                        <Grid item xs={6}>
-                            <Grid item className={classes.gridItem} />
-                            <Grid item className={classes.gridItem}>
-                                <Field
-                                    label="Last name"
-                                    name="lastName"
-                                    component={TextField}
-                                    disabled
-                                />
-                            </Grid>
-                            <Grid item className={classes.gridItem} />
-                            <Grid item className={classes.gridItem}>
-                                <Field
-                                    label="*E-mail at Organization"
-                                    name="prefs.profile.organization_email"
-                                    component={TextField}
-                                    validate={FILES_FIELD_VALIDATION}
-                                />
-                            </Grid>
+                        <Grid item className={classes.gridItem} sm={6} xs={12}>
+                            <Field
+                                label="Organization"
+                                name="prefs.profile.organization"
+                                component={TextField as any}
+                                validate={MY_ACCOUNT_VALIDATION}
+                                required
+                            />
                         </Grid>
-                        <Grid item xs={12} className={classes.actions}>
+                        <Grid item className={classes.gridItem} sm={6} xs={12}>
+                            <Field
+                                label="E-mail at Organization"
+                                name="prefs.profile.organization_email"
+                                component={TextField as any}
+                                validate={MY_ACCOUNT_VALIDATION}
+                                required
+                            />
+                        </Grid>
+                        <Grid item className={classes.gridItem} sm={6} xs={12}>
+                            <InputLabel className={classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
+                            <Field
+                                id="prefs.profile.role"
+                                name="prefs.profile.role"
+                                component={NativeSelectField as any}
+                                items={RoleTypes}
+                            />
+                        </Grid>
+                        <Grid item className={classes.gridItem} sm={6} xs={12}>
+                            <Field
+                                label="Website"
+                                name="prefs.profile.website_url"
+                                component={TextField as any}
+                            />
+                        </Grid>
+                        <Grid container direction="row" justify="flex-end" >
                             <Button color="primary" onClick={reset} disabled={isPristine}>Discard changes</Button>
-                            <Button color="primary" variant="contained" type="submit" disabled={isPristine || invalid || submitting}>Save changes</Button>
+                            <Button
+                                color="primary"
+                                variant="contained"
+                                type="submit"
+                                disabled={isPristine || invalid || submitting}>
+                                Save changes
+                            </Button>
                         </Grid>
                     </Grid>
-                </form>
-            </CardContent>
-        </Card>;}
-);
\ No newline at end of file
+                </form >
+            </CardContent >
+        </Card >;
+    }
+);