feat: use dashboard layout (#60)

* feat: use dashboard layout (#37) * chore: rename 'service' to 'lib' * feat: use dashboard layout * fix: fix login error
damingerdai · Aug 9, 2022 · 74c74c4 · 74c74c4
1 parent 1fa07d1
commit 74c74c4
Show file tree

Hide file tree

Showing 28 changed files with 989 additions and 741 deletions.
diff --git a/src/main/java/org/daming/jobs/base/shiro/JWTFilter.java b/src/main/java/org/daming/jobs/base/shiro/JWTFilter.java
@@ -90,13 +90,32 @@ protected boolean preHandle(ServletRequest request, ServletResponse response) th
      * 将非法请求跳转到 /401
      */
     private void response401(ServletRequest req, ServletResponse resp) {
-        System.out.println(((HttpServletRequest) req).getRequestURI() + "\t response401");
         try {
             HttpServletResponse httpServletResponse = (HttpServletResponse) resp;
-            httpServletResponse.sendRedirect("/401");
+            if (isAjax(req)) {
+                httpServletResponse.setCharacterEncoding("UTF-8");
+                httpServletResponse.setContentType("application/json");
+                // httpServletResponse.setStatus(401);
+                httpServletResponse.sendError(HttpServletResponse.SC_UNAUTHORIZED, "The token is not valid.");
+            } else {
+                httpServletResponse.sendRedirect("/401");
+            }
         } catch (IOException e) {
             LOGGER.error(e.getMessage());
         }
     }
 
+    /**
+     * 判断是否是ajax请求
+     * @param request
+     * @return
+     */
+    private boolean isAjax(ServletRequest request) {
+        String header = ((HttpServletRequest) request).getHeader("X-Requested-With");
+        if ("XMLHttpRequest".equalsIgnoreCase(header)) {
+            return Boolean.TRUE;
+        }
+        return Boolean.FALSE;
+    }
+
 }
diff --git a/src/main/java/org/daming/jobs/base/utils/JWTUtil.java b/src/main/java/org/daming/jobs/base/utils/JWTUtil.java
@@ -12,7 +12,6 @@
 /**
  * please use @org.daming.jobs.base.utils.JwtTool
  */
-@Deprecated
 public class JWTUtil {
 
     // 过期时间5分钟
@@ -24,6 +23,7 @@ public class JWTUtil {
      * @param secret 用户的密码
      * @return 是否正确
      */
+    @Deprecated
     public static boolean verify(String token, String username, String secret) {
         try {
             Algorithm algorithm = Algorithm.HMAC256(secret);
@@ -41,6 +41,7 @@ public static boolean verify(String token, String username, String secret) {
      * 获得token中的信息无需secret解密也能获得
      * @return token中包含的用户名
      */
+
     public static String getUsername(String token) {
         try {
             DecodedJWT jwt = JWT.decode(token);
@@ -56,6 +57,7 @@ public static String getUsername(String token) {
      * @param secret 用户的密码
      * @return 加密的token
      */
+    @Deprecated
     public static String sign(String username, String secret) {
         Date date = new Date(System.currentTimeMillis() + EXPIRE_TIME);
         Algorithm algorithm = Algorithm.HMAC256(secret);

diff --git a/src/main/java/org/daming/jobs/service/impl/RepoServiceImpl.java b/src/main/java/org/daming/jobs/service/impl/RepoServiceImpl.java
@@ -35,7 +35,6 @@ public String listCommits() throws IOException, InterruptedException, NoSuchAlgo
                 .timeout(Duration.ofMinutes(1))
                 .build();
         var response = client.send(request, HttpResponse.BodyHandlers.ofString());
-        System.out.println(response.body());
         return response.body();
     }
 

diff --git a/src/main/react/index.html b/src/main/react/index.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 	<title>Jobs UI</title>
 </head>
 

diff --git a/src/main/react/package.json b/src/main/react/package.json
@@ -34,10 +34,8 @@
     "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "5.33.0",
     "@typescript-eslint/parser": "5.33.0",
-    "@vitejs/plugin-react": "^1.3.2",
+    "@vitejs/plugin-react": "^2.0.0",
     "cross-env": "7.0.3",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
     "eslint": "8.21.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.3.0",
@@ -51,6 +49,6 @@
     "rimraf": "3.0.2",
     "sass": "1.54.3",
     "typescript": "4.7.4",
-    "vite": "2.9.14"
+    "vite": "^3.0.4"
   }
 }
diff --git a/src/main/react/src/app.tsx b/src/main/react/src/app.tsx
@@ -1,40 +1,44 @@
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 
+import { Drawer } from './components/drawer';
 import { store } from './slices/store';
-import { PrimaryLayout } from './layout';
-import Navbar from './components/nav';
 
+import { Flex } from './components';
+import { AppBar } from './components/appBar';
 import './styles.scss';
-
+import { mainListItems } from './components/items';
+import { PrimaryLayout } from './layout';
+import React from 'react';
 
 const App = () => {
 	const Theme = createTheme();
+	const [open, setOpen] = useState(true);
 	const [theme, setTheme] = useState(Theme);
+	const toggleDrawer = () => {
+		setOpen(!open);
+	};
 
 	return (
 		<BrowserRouter>
 			<Provider store={store}>
 				<ThemeProvider theme={theme}>
-					<Navbar brand="Jobs UI" toggleMode={(mode) => {
-						const newTheme = createTheme({
-							palette: {
-								mode
-							}
-						});
-						setTheme(newTheme);
-						const bgColor = newTheme.palette.background.paper;
-						document.body.style.backgroundColor = bgColor;
-					}} />
-					<PrimaryLayout />
+					<PrimaryLayout/>
 				</ThemeProvider>
 			</Provider>
 		</BrowserRouter>
 	);
-}
-
-ReactDOM.render(<App />, document.getElementById('root'));
+};
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+	<React.Fragment>
+		<CssBaseline />
+		<App />
+	</React.Fragment>
+);
diff --git a/src/main/react/src/components/appBar.ts b/src/main/react/src/components/appBar.ts
@@ -0,0 +1,27 @@
+import { styled } from '@mui/material/styles';
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
+import * as React from 'react';
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean;
+}
+
+const drawerWidth: number = 240;
+
+export const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== 'open',
+})<AppBarProps>(({ theme, open }) => ({
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(['width', 'margin'], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));
diff --git a/src/main/react/src/components/drawer.ts b/src/main/react/src/components/drawer.ts
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import MuiDrawer from '@mui/material/Drawer';
+
+const drawerWidth: number = 240;
+
+export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+  ({ theme, open }) => ({
+    '& .MuiDrawer-paper': {
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      width: drawerWidth,
+      transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+      boxSizing: 'border-box',
+      ...(!open && {
+        overflowX: 'hidden',
+        transition: theme.transitions.create('width', {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.leavingScreen,
+        }),
+        width: theme.spacing(7),
+        [theme.breakpoints.up('sm')]: {
+          width: theme.spacing(9),
+        },
+      }),
+    },
+  }),
+);
diff --git a/src/main/react/src/components/flex.tsx b/src/main/react/src/components/flex.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+type FlexProps = React.ComponentProps<typeof Box> & { children: React.ReactNode};
+
+export const Flex: React.FC<FlexProps> = (props) => {
+	const { children, ...rest } = props;
+
+	return <Box sx={{ display: 'flex' }} {...rest}>
+		{children}
+	</Box>;
+}
diff --git a/src/main/react/src/components/index.ts b/src/main/react/src/components/index.ts
@@ -1 +1,5 @@
-export * from './nav'
+export * from './flex';
+export * from './nav';
+export * from './themeModePicker';
+export * from './title';
+export * from './userMenu';
diff --git a/src/main/react/src/components/items.tsx b/src/main/react/src/components/items.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import GithubIcon from '@mui/icons-material/GitHub';
+
+import { Link as RouterLink } from 'react-router-dom';
+
+export const mainListItems = (
+  <React.Fragment>
+    <ListItemButton component={RouterLink} to="/" color="inherit">
+      <ListItemIcon>
+        <DashboardIcon />
+      </ListItemIcon>
+      <ListItemText primary="Home" />
+    </ListItemButton>
+    <ListItemButton component={RouterLink} to="/repos" color="inherit">
+      <ListItemIcon>
+        <GithubIcon />
+      </ListItemIcon>
+      <ListItemText primary="Repos" />
+    </ListItemButton>
+  </React.Fragment>
+);
diff --git a/src/main/react/src/components/title.tsx b/src/main/react/src/components/title.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+
+type TitleProps = React.ComponentProps<TypographyProps<'h2', any>> & { children?: React.ReactNode }
+
+export const Title: React.FC<TitleProps> = (props) => {
+	const { children, ...rest } = props;
+	return <Typography component="h2" variant="h6" color="primary" gutterBottom {...rest}>
+		{children}
+	</Typography>
+}
diff --git a/src/main/react/src/components/userMenu.tsx b/src/main/react/src/components/userMenu.tsx
@@ -0,0 +1,93 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Logout from '@mui/icons-material/Logout'
+import { useAppSelector } from '@/slices/hook';
+import * as React from 'react';
+import { Fragment, useState } from 'react';
+import { Link as RouterLink, useNavigate } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import { setUsername } from '@/slices/login';
+
+
+export const UserMenu: React.FC = () => {
+	const { username } = useAppSelector(state => state.login);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+	const dropdownOpen = Boolean(anchorEl);
+	const dispatch = useDispatch();
+	const navigate = useNavigate();
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+		<Fragment>
+				{username ? (
+						<Button
+							color="inherit"
+							onClick={e => {
+								setAnchorEl(e.currentTarget);
+							}}
+						>
+							{username}
+						</Button>
+					) : (
+						<Button component={RouterLink} to="/login" color="inherit">
+							Login
+						</Button>
+					)}
+					<Menu
+						anchorEl={anchorEl}
+						open={dropdownOpen}
+						PaperProps={{
+							elevation: 0,
+							sx: {
+								overflow: 'visible',
+								filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+								mt: 1.5,
+								'& .MuiAvatar-root': {
+									width: 32,
+									height: 32,
+									ml: -0.5,
+									mr: 1
+								},
+								'&:before': {
+									content: '""',
+									display: 'block',
+									position: 'absolute',
+									top: 0,
+									right: 14,
+									width: 10,
+									height: 10,
+									bgcolor: 'background.paper',
+									transform: 'translateY(-50%) rotate(45deg)',
+									zIndex: 0
+								}
+							}
+						}}
+						transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+						anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+					>
+						<MenuItem
+							onClick={() => {
+								localStorage.removeItem('login');
+								dispatch(setUsername(null));
+								setAnchorEl(null);
+								navigate('/login');
+							}}
+						>
+							<ListItemIcon>
+								<Logout fontSize="small" />
+							</ListItemIcon>
+							Logout
+						</MenuItem>
+					</Menu>
+		</Fragment>
+
+  );
+}