Commit f6ba2795 authored by Ibadullina Inabat's avatar Ibadullina Inabat

Merge branch 'development' of…

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-10-feature/login-registration-front
parents 4d9db167 46a799b6
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import {Routes, Route, Outlet, Navigate} from "react-router-dom";
import AppToolbar from "./components/UI/AppToolbar/AppToolbar";
import {Routes, Route, Outlet, Navigate, BrowserRouter} from "react-router-dom";
import {Container} from "@mui/material";
import { useSelector } from "react-redux";
import Register from "./containers/Register/Register";
import Login from "./containers/Login/Login";
import {useSelector} from "react-redux";
import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const user = useSelector(state => state.users?.user);
if (!isAllowed && !roles?.includes(user?.role)) {
return <Navigate to={redirectUrl}/>
return <Navigate to={redirectUrl} />
}
return children || <Outlet/>
}
return children || <Outlet />;
};
const App = () => {
const user = useSelector(state => state.users.user);
return (
<>
const user = useSelector(state => state.users?.user);
return (
<BrowserRouter>
<Routes>
<Route element={<>
<AppToolbar />
<Route element={
<>
<AppToolbar/>
<main>
<Container>
<Outlet />
<Outlet/>
</Container>
</main>
</>}>
{/* <Route path={"/admin"} element={
<ProtectedRoute roles={["admin"]} redirectUrl={"/"}>
<AdminPanel/>
</ProtectedRoute>
} /> */}
<Route path={"/"} element={<div>Задачи на неделю</div>} />
<Route path={"/sign-up"} element={
<ProtectedRoute isAllowed={!user} redirectUrl={"/"}>
<Register/>
</ProtectedRoute>
</>
}>
<Route path={"/"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/log-in"}
>
<h1>week page</h1>
</ProtectedRoute>
}/>
<Route path={"/week"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/log-in"}
>
<h1>week page</h1>
</ProtectedRoute>
}/>
<Route path={"/month"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/log-in"}
>
<h1>month page</h1>
</ProtectedRoute>
}/>
<Route path={"/my-tasks"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/log-in"}
>
<h1>my tasks page</h1>
</ProtectedRoute>
}/>
<Route path={"/sign-in"} element={
<ProtectedRoute isAllowed={!user} redirectUrl={"/"}>
<Login/>
</ProtectedRoute>
<Route path={"/profile/:id"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/log-in"}
>
<h1>profile page</h1>
</ProtectedRoute>
}/>
<Route path={"/workers-tasks"} element={
<ProtectedRoute
roles={["superuser"]}
redirectUrl={"/"}
>
<h1>workers tasks page</h1>
</ProtectedRoute>
}/>
<Route path={"/sign-up"} element={
<ProtectedRoute
roles={["superuser"]}
redirectUrl={"/"}
>
<h1>sign-up page</h1>
</ProtectedRoute>
}/>
<Route path={"/log-in"} element={<h1>log-in page</h1>}/>
<Route path='*' element={<h1>404</h1>}/>
</Route>
</Routes>
</>
)};
</BrowserRouter>
)
};
export default App;
import {Button} from "@mui/material";
import {NavLink} from "react-router-dom";
const AdminMenu = () => {
return <>
<Button
component={NavLink}
to="/week"
color="inherit"
size="large"
>
Неделя
</Button>
<Button
component={NavLink}
to="/month"
color="inherit"
size="large"
>
Месяц
</Button>
<Button
component={NavLink}
to="/my-tasks"
color="inherit"
size="large"
>
Мои задачи
</Button>
<Button
component={NavLink}
to="/workers-tasks"
color="inherit"
size="large"
>
Задачи сотрудников
</Button>
<Button
component={NavLink}
to="/sign-up"
color="inherit"
size="large"
>
Создать сотрудника
</Button>
<Button
component={NavLink}
to="/profile/test"
color="inherit"
size="large"
>
Профиль
</Button>
</>
};
export default AdminMenu;
\ No newline at end of file
import { Button } from "@mui/material";
import { NavLink } from "react-router-dom";
import {Button} from "@mui/material";
import {NavLink} from "react-router-dom";
const AnonymousMenu = () => {
return <>
<Button
component={NavLink}
to="/sign-up"
color="inherit"
>
Sign Up
</Button>
<Button
component={NavLink}
to="/sign-in"
color="inherit"
>
Sign In
</Button>
<Button
component={NavLink}
color="inherit"
to="/log-in"
>
Вход
</Button>
</>
};
export default AnonymousMenu;
\ No newline at end of file
export default AnonymousMenu;
import {Button} from "@mui/material";
import {NavLink} from "react-router-dom";
const WorkerMenu = ({user}) => {
return <>
<Button
component={NavLink}
to="/week"
color="inherit"
size="large"
>
Неделя
</Button>
<Button
component={NavLink}
to="/month"
color="inherit"
size="large"
>
Месяц
</Button>
<Button
component={NavLink}
to="/my-tasks"
color="inherit"
size="large"
>
Мои задачи
</Button>
<Button
component={NavLink}
to="/profile/test"
color="inherit"
size="large"
>
Профиль
</Button>
</>
};
export default WorkerMenu;
import {AppBar, Box, Toolbar, Typography} from "@mui/material";
import {NavLink} from "react-router-dom";
import {useSelector} from "react-redux";
import HasAccess from "../HasAccess/HasAccess";
import AnonymousMenu from "../../Menus/AnonymousMenu/AnonymousMenu";
import WorkerMenu from "../../Menus/WorkerMenu/WorkerMenu";
import AdminMenu from "../../Menus/AdminMenu/AdminMenu";
const AppToolbar = () => {
const user = useSelector(state => state.users.user);
return <Box sx={{ flexGrow: 1, mb: "40px" }}>
<AppBar position="static">
<Toolbar>
<Typography
variant="h4"
component="div"
sx={{ flexGrow: 1 }}>
<NavLink to='/' style={{textDecoration: 'none', color: 'inherit'}}>Task Manager</NavLink>
</Typography>
<HasAccess allowed={!user}>
<AnonymousMenu/>
</HasAccess>
<HasAccess roles={['user']}>
<WorkerMenu/>
</HasAccess>
<HasAccess roles={['superuser']}>
<AdminMenu/>
</HasAccess>
</Toolbar>
</AppBar>
</Box>
};
export default AppToolbar;
import { useSelector } from "react-redux";
import {useSelector} from "react-redux";
const HasAccess = ({allowed, roles, children}) => {
const user = useSelector(state => state.users?.user);
return allowed || roles?.includes(user?.role) ? children : null
}
return allowed || roles?.includes(user?.role) ? children : null;
};
export default HasAccess;
\ No newline at end of file
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
......@@ -26,4 +26,4 @@ const usersReduser = (state = initialState, action) => {
}
};
export default usersReduser;
\ No newline at end of file
export default usersReduser;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment