1import React from 'react';
2
3import {
4 Checkbox,
5 Divider,
6 FormControl,
7 FormControlLabel,
8 FormGroup,
9 FormLabel,
10 Paper,
11 TextField,
12} from '@material-ui/core';
13import Avatar from '@material-ui/core/Avatar';
14import { makeStyles } from '@material-ui/core/styles';
15
16import { useCurrentIdentityQuery } from '../../components/CurrentIdentity/CurrentIdentity.generated';
17const useStyles = makeStyles((theme) => ({
18 main: {
19 maxWidth: 1200,
20 margin: 'auto',
21 marginTop: theme.spacing(4),
22 },
23 container: {
24 display: 'flex',
25 marginBottom: theme.spacing(1),
26 marginRight: theme.spacing(2),
27 marginLeft: theme.spacing(2),
28 },
29 leftSidebar: {
30 marginTop: theme.spacing(2),
31 marginRight: theme.spacing(2),
32 },
33 content: {
34 marginTop: theme.spacing(5),
35 marginRight: theme.spacing(4),
36 padding: theme.spacing(3, 2),
37 minWidth: 800,
38 display: 'flex',
39 backgroundColor: theme.palette.background.paper,
40 },
41 rightSidebar: {
42 marginTop: theme.spacing(5),
43 flex: '0 0 200px',
44 },
45 large: {
46 width: theme.spacing(20),
47 height: theme.spacing(20),
48 },
49 control: {
50 paddingBottom: theme.spacing(3),
51 },
52}));
53
54const Identity = () => {
55 // eslint-disable-next-line
56 const classes = useStyles();
57 // eslint-disable-next-line
58 const { loading, error, data } = useCurrentIdentityQuery();
59 const user = data?.repository?.userIdentity;
60 console.log(user);
61 return (
62 <main className={classes.main}>
63 <div className={classes.container}>
64 <div className={classes.leftSidebar}>
65 <h1>{user?.displayName ? user?.displayName : 'none'}</h1>
66 <Avatar src={user?.avatarUrl ? user.avatarUrl : undefined}>
67 {user?.displayName.charAt(0).toUpperCase()}
68 </Avatar>
69 </div>
70 <Paper className={classes.content}>
71 <Divider variant="fullWidth" />
72 <FormControl component="fieldset">
73 <FormGroup>
74 <FormLabel className={classes.control} component="legend">
75 Your account
76 </FormLabel>
77 <TextField
78 className={classes.control}
79 label="Name"
80 variant="outlined"
81 value={user?.name ? user?.name : '---'}
82 />
83 <TextField
84 className={classes.control}
85 label="Id (truncated)"
86 variant="outlined"
87 value={user?.humanId ? user?.humanId : '---'}
88 />
89 <TextField
90 className={classes.control}
91 label="Id (full)"
92 variant="outlined"
93 value={user?.id ? user?.id : '---'}
94 />
95 <TextField
96 className={classes.control}
97 label="E-Mail"
98 variant="outlined"
99 value={user?.email ? user?.email : '---'}
100 />
101 <TextField
102 className={classes.control}
103 label="Login"
104 variant="outlined"
105 value={user?.login ? user?.login : '---'}
106 />
107 <FormControlLabel
108 className={classes.control}
109 label="Protected"
110 labelPlacement="end"
111 value={user?.isProtected}
112 control={<Checkbox color="secondary" indeterminate />}
113 />
114 </FormGroup>
115 </FormControl>
116 </Paper>
117 <div className={classes.rightSidebar}>
118 <Avatar
119 src={user?.avatarUrl ? user.avatarUrl : undefined}
120 className={classes.large}
121 >
122 {user?.displayName.charAt(0).toUpperCase()}
123 </Avatar>
124 </div>
125 </div>
126 </main>
127 );
128};
129
130export default Identity;