#12 Style user page

webui/src/pages/identity/Identity.tsx

@@ -1,31 +1,128 @@
 import React from 'react';
 
-import { MenuItem, MenuList } from '@material-ui/core';
+import {
+  Checkbox,
+  Divider,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Paper,
+  TextField,
+} from '@material-ui/core';
 import Avatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
 
 import { useCurrentIdentityQuery } from '../../components/CurrentIdentity/CurrentIdentity.generated';
-
-const useStyles = makeStyles((theme) => ({}));
+const useStyles = makeStyles((theme) => ({
+  main: {
+    maxWidth: 1200,
+    margin: 'auto',
+    marginTop: theme.spacing(4),
+  },
+  container: {
+    display: 'flex',
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(2),
+  },
+  leftSidebar: {
+    marginTop: theme.spacing(2),
+    marginRight: theme.spacing(2),
+  },
+  content: {
+    marginTop: theme.spacing(5),
+    marginRight: theme.spacing(4),
+    padding: theme.spacing(3, 2),
+    minWidth: 800,
+    display: 'flex',
+    backgroundColor: theme.palette.background.paper,
+  },
+  rightSidebar: {
+    marginTop: theme.spacing(5),
+    flex: '0 0 200px',
+  },
+  large: {
+    width: theme.spacing(20),
+    height: theme.spacing(20),
+  },
+  control: {
+    paddingBottom: theme.spacing(3),
+  },
+}));
 
 const Identity = () => {
+  // eslint-disable-next-line
   const classes = useStyles();
+  // eslint-disable-next-line
   const { loading, error, data } = useCurrentIdentityQuery();
   const user = data?.repository?.userIdentity;
   console.log(user);
   return (
-    <main>
-      <h1>Profile</h1>
-      <Avatar src={user?.avatarUrl ? user.avatarUrl : undefined}>
-        {user?.displayName.charAt(0).toUpperCase()}
-      </Avatar>
-      <ul>
-        <li>Name: {user?.name ? user?.name : 'none'}</li>
-        <li title={user?.id}>Id: {user?.humanId ? user?.humanId : 'none'}</li>
-        <li>Email: {user?.email ? user?.email : 'none'}</li>
-        <li>Login: {user?.login ? user?.login : 'none'}</li>
-        <li>Protected: {user?.isProtected}</li>
-      </ul>
+    <main className={classes.main}>
+      <div className={classes.container}>
+        <div className={classes.leftSidebar}>
+          <h1>{user?.displayName ? user?.displayName : 'none'}</h1>
+          <Avatar src={user?.avatarUrl ? user.avatarUrl : undefined}>
+            {user?.displayName.charAt(0).toUpperCase()}
+          </Avatar>
+        </div>
+        <Paper className={classes.content}>
+          <Divider variant="fullWidth" />
+          <FormControl component="fieldset">
+            <FormGroup>
+              <FormLabel className={classes.control} component="legend">
+                Your account
+              </FormLabel>
+              <TextField
+                className={classes.control}
+                label="Name"
+                variant="outlined"
+                value={user?.name ? user?.name : '---'}
+              />
+              <TextField
+                className={classes.control}
+                label="Id (truncated)"
+                variant="outlined"
+                value={user?.humanId ? user?.humanId : '---'}
+              />
+              <TextField
+                className={classes.control}
+                label="Id (full)"
+                variant="outlined"
+                value={user?.id ? user?.id : '---'}
+              />
+              <TextField
+                className={classes.control}
+                label="E-Mail"
+                variant="outlined"
+                value={user?.email ? user?.email : '---'}
+              />
+              <TextField
+                className={classes.control}
+                label="Login"
+                variant="outlined"
+                value={user?.login ? user?.login : '---'}
+              />
+              <FormControlLabel
+                className={classes.control}
+                label="Protected"
+                labelPlacement="end"
+                value={user?.isProtected}
+                control={<Checkbox color="secondary" indeterminate />}
+              />
+            </FormGroup>
+          </FormControl>
+        </Paper>
+        <div className={classes.rightSidebar}>
+          <Avatar
+            src={user?.avatarUrl ? user.avatarUrl : undefined}
+            className={classes.large}
+          >
+            {user?.displayName.charAt(0).toUpperCase()}
+          </Avatar>
+        </div>
+      </div>
     </main>
   );
 };