Skip to content

Commit 6aef9d9

Browse files
romanetarromanetar
authored
UI tweaks (#32)
Signed-off-by: romanetar <roman_ag@hotmail.com>
1 parent f8d619f commit 6aef9d9

File tree

7 files changed

+351
-126
lines changed

7 files changed

+351
-126
lines changed

‎resources/js/admin/edit_user/edit_user.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import Divider from "@material-ui/core/Divider";
2727
import Link from "@material-ui/core/Link";
2828
import PasswordChangePanel from "./components/password_change_panel";
2929
import LoadingIndicator from "../../components/loading_indicator";
30+
import TopLogo from "../../components/top_logo/top_logo";
3031

3132
import styles from "./edit_user.module.scss";
3233
import {handleErrorResponse} from "../../utils";
@@ -92,11 +93,7 @@ const EditUserPage = ({
9293
return (
9394
<Container component="main" maxWidth="xs" className={styles.main_container}>
9495
<CssBaseline/>
95-
<div className={styles.title_container}>
96-
<a href="/" target='_self'>
97-
<img className={styles.app_logo} alt="appLogo" src={appLogo}/>
98-
</a>
99-
</div>
96+
<TopLogo appLogo={appLogo}/>
10097
<Navbar menuConfig={menuConfig}/>
10198
<form
10299
onSubmit={formik.handleSubmit}

‎resources/js/components/drawer/drawer.js‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
import React, {useState} from 'react';
2+
import {
3+
Button,
4+
Divider,
5+
Drawer,
6+
IconButton,
7+
List,
8+
ListItem,
9+
Menu,
10+
MenuItem,
11+
makeStyles,
12+
Typography
13+
} from '@material-ui/core';
14+
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
15+
import MenuIcon from '@material-ui/icons/Menu';
16+
17+
const useStyles = makeStyles(() => ({
18+
link: {
19+
textDecoration: "none",
20+
color: "blue",
21+
fontSize: "20px",
22+
},
23+
icon: {
24+
color: "white"
25+
},
26+
menuSectionTitle: {
27+
marginLeft: '10px',
28+
}
29+
}));
30+
31+
function DrawerComponent() {
32+
const classes = useStyles();
33+
const [openDrawer, setOpenDrawer] = useState(false);
34+
const [oauthMenuEl, setOauthMenuEl] = useState(null);
35+
const [serverAdminEl, setServerAdminEl] = useState(null);
36+
37+
const handleOauthMenuClick = (event) => {
38+
setOauthMenuEl(event.currentTarget);
39+
};
40+
41+
const handleServerAdminMenuClick = (event) => {
42+
setServerAdminEl(event.currentTarget);
43+
};
44+
45+
const handleClose = () => {
46+
setOauthMenuEl(null);
47+
setServerAdminEl(null);
48+
};
49+
50+
const goTo = (url) => {
51+
window.location.href = url;
52+
};
53+
54+
return (
55+
<>
56+
<Drawer
57+
open={openDrawer}
58+
onClose={() => setOpenDrawer(false)}
59+
>
60+
<List>
61+
<ListItem>
62+
<Button onClick={() => goTo(`${menuConfig.settingURL}`)}>
63+
{menuConfig.settingsText}
64+
</Button>
65+
</ListItem>
66+
<ListItem>
67+
<Button aria-controls="oauth-menu"
68+
aria-haspopup="true"
69+
onClick={handleOauthMenuClick}
70+
endIcon={<ArrowDropDownIcon/>}>
71+
{menuConfig.oauthConsoleText}
72+
</Button>
73+
<Menu
74+
id="oauth-menu"
75+
anchorEl={oauthMenuEl}
76+
keepMounted
77+
open={Boolean(oauthMenuEl)}
78+
onClose={handleClose}
79+
>
80+
<MenuItem
81+
onClick={() => goTo(`${menuConfig.oauthAppsURL}`)}>{menuConfig.oauthAppsText}</MenuItem>
82+
<MenuItem
83+
onClick={() => goTo(`${menuConfig.oauthGrantsURL}`)}>{menuConfig.oauthGrantsText}</MenuItem>
84+
</Menu>
85+
</ListItem>
86+
{(menuConfig.isOAuth2ServerAdmin || menuConfig.isOpenIdServerAdmin || menuConfig.isSuperAdmin) &&
87+
<>
88+
<ListItem>
89+
<Button aria-controls="server-admin-menu"
90+
aria-haspopup="true"
91+
onClick={handleServerAdminMenuClick}
92+
endIcon={<ArrowDropDownIcon/>}>
93+
{menuConfig.serverAdminText}
94+
</Button>
95+
<Menu
96+
id="server-admin-menu"
97+
anchorEl={serverAdminEl}
98+
keepMounted
99+
open={Boolean(serverAdminEl)}
100+
onClose={handleClose}
101+
>
102+
{(menuConfig.isOpenIdServerAdmin || menuConfig.isSuperAdmin) &&
103+
<span>
104+
<li>
105+
<Typography
106+
className={classes.menuSectionTitle}
107+
display="block"
108+
variant="caption"
109+
>
110+
{menuConfig.securitySectionText}
111+
</Typography>
112+
</li>
113+
{menuConfig.isSuperAdmin &&
114+
<>
115+
<MenuItem
116+
onClick={() => goTo(`${menuConfig.usersAdminURL}`)}>{menuConfig.usersAdminText}</MenuItem>
117+
<MenuItem
118+
onClick={() => goTo(`${menuConfig.groupsAdminURL}`)}>{menuConfig.groupsAdminText}</MenuItem>
119+
</>
120+
}
121+
<MenuItem
122+
onClick={() => goTo(`${menuConfig.bannedIPsAdminURL}`)}>{menuConfig.bannedIPsAdminText}</MenuItem>
123+
<Divider component="li"/>
124+
</span>
125+
}
126+
{menuConfig.isOAuth2ServerAdmin &&
127+
<span>
128+
<li>
129+
<Typography
130+
className={classes.menuSectionTitle}
131+
display="block"
132+
variant="caption"
133+
>
134+
{menuConfig.oauthAdminSectionText}
135+
</Typography>
136+
</li>
137+
<MenuItem
138+
onClick={() => goTo(`${menuConfig.serverPrivateKeysAdminURL}`)}>{menuConfig.serverPrivateKeysAdminText}</MenuItem>
139+
<MenuItem
140+
onClick={() => goTo(`${menuConfig.resourceServersAdminURL}`)}>{menuConfig.resourceServersAdminText}</MenuItem>
141+
<MenuItem
142+
onClick={() => goTo(`${menuConfig.apiScopesAdminURL}`)}>{menuConfig.apiScopesAdminText}</MenuItem>
143+
<MenuItem
144+
onClick={() => goTo(`${menuConfig.lockedClientsAdminURL}`)}>{menuConfig.lockedClientsAdminText}</MenuItem>
145+
<Divider component="li"/>
146+
</span>
147+
}
148+
{menuConfig.isOpenIdServerAdmin &&
149+
<span>
150+
<li>
151+
<Typography
152+
className={classes.menuSectionTitle}
153+
display="block"
154+
variant="caption"
155+
>
156+
{menuConfig.serverConfigSectionText}
157+
</Typography>
158+
</li>
159+
<MenuItem
160+
onClick={() => goTo(`${menuConfig.serverConfigURL}`)}>{menuConfig.serverConfigText}</MenuItem>
161+
</span>
162+
}
163+
</Menu>
164+
</ListItem>
165+
</>
166+
}
167+
<ListItem onClick={() => setOpenDrawer(false)}>
168+
<Button onClick={(e) => {
169+
window.location.href = `mailto:${menuConfig.helpMailto}`;
170+
e.preventDefault();
171+
}}>
172+
Help
173+
</Button>
174+
</ListItem>
175+
<ListItem onClick={() => setOpenDrawer(false)}>
176+
<Button onClick={() => goTo(`${menuConfig.logoutURL}`)}>
177+
Logout
178+
</Button>
179+
</ListItem>
180+
</List>
181+
</Drawer>
182+
<IconButton onClick={() => setOpenDrawer(!openDrawer)}>
183+
<MenuIcon/>
184+
</IconButton>
185+
</>
186+
);
187+
}
188+
189+
export default DrawerComponent;

0 commit comments

Comments
 (0)