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 header: {
53 ...theme.typography.h5,
54 },
55}));
56
57const Identity = () => {
58 const classes = useStyles();
59 const { data } = useCurrentIdentityQuery();
60 const user = data?.repository?.userIdentity;
61 console.log(user);
62 return (
63 <main className={classes.main}>
64 <div className={classes.container}>
65 <div className={classes.leftSidebar}>
66 <h1 className={classes.header}>
67 {user?.displayName ? user?.displayName : 'none'}
68 </h1>
69 <Avatar src={user?.avatarUrl ? user.avatarUrl : undefined}>
70 {user?.displayName.charAt(0).toUpperCase()}
71 </Avatar>
72 </div>
73 <Paper className={classes.content}>
74 <Divider variant="fullWidth" />
75 <FormControl component="fieldset">
76 <FormGroup>
77 <FormLabel className={classes.control} component="legend">
78 Your account
79 </FormLabel>
80 <TextField
81 className={classes.control}
82 label="Name"
83 variant="outlined"
84 value={user?.name ? user?.name : '---'}
85 />
86 <TextField
87 className={classes.control}
88 label="Id (truncated)"
89 variant="outlined"
90 value={user?.humanId ? user?.humanId : '---'}
91 />
92 <TextField
93 className={classes.control}
94 label="Id (full)"
95 variant="outlined"
96 value={user?.id ? user?.id : '---'}
97 />
98 <TextField
99 className={classes.control}
100 label="E-Mail"
101 variant="outlined"
102 value={user?.email ? user?.email : '---'}
103 />
104 <TextField
105 className={classes.control}
106 label="Login"
107 variant="outlined"
108 value={user?.login ? user?.login : '---'}
109 />
110 <FormControlLabel
111 className={classes.control}
112 label="Protected"
113 labelPlacement="end"
114 value={user?.isProtected}
115 control={<Checkbox color="secondary" indeterminate />}
116 />
117 </FormGroup>
118 </FormControl>
119 </Paper>
120 <div className={classes.rightSidebar}>
121 <Avatar
122 src={user?.avatarUrl ? user.avatarUrl : undefined}
123 className={classes.large}
124 >
125 {user?.displayName.charAt(0).toUpperCase()}
126 </Avatar>
127 </div>
128 </div>
129 </main>
130 );
131};
132
133export default Identity;