diff --git a/frontend/src/assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg b/frontend/src/assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg new file mode 100644 index 0000000..aa7b667 --- /dev/null +++ b/frontend/src/assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/Base/MainContainer.jsx b/frontend/src/components/Base/MainContainer.jsx new file mode 100644 index 0000000..ac166d0 --- /dev/null +++ b/frontend/src/components/Base/MainContainer.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import MainContainerStyled from "./MainContainer.style" + +const Container = ({children}) => { + return ( + {children} + ) +} + +export default Container \ No newline at end of file diff --git a/frontend/src/components/Base/MainContainer.style.jsx b/frontend/src/components/Base/MainContainer.style.jsx new file mode 100644 index 0000000..03fafad --- /dev/null +++ b/frontend/src/components/Base/MainContainer.style.jsx @@ -0,0 +1,11 @@ +import styled from "styled-components"; + +const MainContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: right; + width: 100%; + height: 100vh; +`; + +export default MainContainer; diff --git a/frontend/src/components/LoadingScreen/Loading.jsx b/frontend/src/components/LoadingScreen/Loading.jsx new file mode 100644 index 0000000..ca2e960 --- /dev/null +++ b/frontend/src/components/LoadingScreen/Loading.jsx @@ -0,0 +1,9 @@ +import React from "react"; + +import LoadingStyled from "./Loading.style" + +const Loading = () => { + return ; +}; + +export default Loading; diff --git a/frontend/src/components/LoadingScreen/Loading.style.jsx b/frontend/src/components/LoadingScreen/Loading.style.jsx new file mode 100644 index 0000000..c816907 --- /dev/null +++ b/frontend/src/components/LoadingScreen/Loading.style.jsx @@ -0,0 +1,55 @@ +import styled from "styled-components"; + +import {color} from "../../style/varibles" + +import logo from "../../assets/images/Logo.png"; + + + +const LoadingStyled = styled.div` + position: relative; + width: 100%; + height: 100vh; + background-color: #00000032; + display: flex; + text-align: center; + justify-items: center; + align-items: center; + &:after { + content: ""; + display: block; + margin: 0 auto; + border: 16px solid transparent; + border-top: 16px solid ${color.pricinpal.naranja}; + border-bottom: 16px solid ${color.pricinpal.grisOscuro}; + border-radius: 50%; + width: 220px; + height: 220px; + animation: spin 2s linear infinite; + } + &:before { + content: url(${logo}); + position: absolute; + display: block; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + background-color: white; + padding: 24px; + border-radius: 50%; + width: 200px; + height: 200px; + } + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +`; + +export default LoadingStyled; + diff --git a/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx b/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx index d9cfabe..74a493c 100644 --- a/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx +++ b/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx @@ -1,9 +1,17 @@ -import React from 'react' +import React from "react"; + +import CompanyStyled from "./Company.style"; + +import { ReactComponent as Hit46mm } from "../../../assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg"; const Company = () => { return ( -
Company
- ) -} + + +

Copyright Ⓒ 2022 HIT Communications. Todos os Direitos Reservados

+ + ); +}; + +export default Company; -export default Company \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx b/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx new file mode 100644 index 0000000..ebd3bee --- /dev/null +++ b/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx @@ -0,0 +1,19 @@ +import styled from "styled-components"; + +const CompanyStyled = styled.div` + position: absolute; + display: flex; + flex-direction: column; + justify-content: right; + align-items: flex-end; + width: 100%; + right: 16px; + bottom: 16px; + font-size: 10px; + p{ + font-family: "HelveticaHeavy"; + } +`; + +export default CompanyStyled; + diff --git a/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx b/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx deleted file mode 100644 index 950baad..0000000 --- a/frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -import StyleVideo from "./VideoLogin.style"; -import bgvideo from "../../../assets/videos/video.mp4"; - -const VideoLogin = () => { - return ( - - - - ); -}; - -export default VideoLogin; - diff --git a/frontend/src/components/Menu/MenuComponent.jsx b/frontend/src/components/Menu/MenuComponent.jsx new file mode 100644 index 0000000..1b9128b --- /dev/null +++ b/frontend/src/components/Menu/MenuComponent.jsx @@ -0,0 +1,50 @@ +import React from "react"; + +import { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style"; + +import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext"; +import { AuthContext } from "../../context/Auth/AuthContext"; +import VideoComponent from "../VideoTag/VideoComponent"; + +const MenuComponent = () => { + const { whatsApps } = React.useContext(WhatsAppsContext); + const { user } = React.useContext(AuthContext); + const [connectionWarning, setConnectionWarning] = React.useState(false); + + React.useEffect(() => { + const delayDebounceFn = setTimeout(() => { + if (whatsApps.length > 0) { + const offlineWhats = whatsApps.filter((whats) => { + return ( + whats.status === "qrcode" || + whats.status === "PAIRING" || + whats.status === "DISCONNECTED" || + whats.status === "TIMEOUT" || + whats.status === "OPENING" + ); + }); + if (offlineWhats.length > 0) { + setConnectionWarning(true); + } else { + setConnectionWarning(false); + } + } + }, 2000); + return () => clearTimeout(delayDebounceFn); + }, [whatsApps]); + + return ( + + + + link + link + link + link + + + ); +}; + +export default MenuComponent; + diff --git a/frontend/src/components/Menu/MenuComponent.style.jsx b/frontend/src/components/Menu/MenuComponent.style.jsx new file mode 100644 index 0000000..bd8b430 --- /dev/null +++ b/frontend/src/components/Menu/MenuComponent.style.jsx @@ -0,0 +1,36 @@ +import styled from "styled-components"; +import { color } from "../../style/varibles"; + +//Nav +const MenuStyled = styled.nav` + position: absolute; + width: 76px; + height: 100vh; + background: ${color.pricinpal.grisOscuro}; //Same background login + z-index: 10; +`; +//UL +const MenuListStyled = styled.ul` + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + z-index: 100; +`; + +//LI +const MenuListItemStyled = styled.li` + display: flex; + flex-direction: row; + justify-content: center; + gap: 6px; + color: ${color.pricinpal.blanco}; + transition: all 0.2s linear; + &:hover { + color: ${color.pricinpal.naranja}; + transition: all 0.2s linear; + } +`; + +export { MenuStyled, MenuListStyled, MenuListItemStyled }; + diff --git a/frontend/src/components/Menu/MenuTop.jsx b/frontend/src/components/Menu/MenuTop.jsx new file mode 100644 index 0000000..d7f6e78 --- /dev/null +++ b/frontend/src/components/Menu/MenuTop.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { MenuTopStyled } from "./MenuTop.style"; + +import video from "../../assets/videos/video.mp4" + +const MenuTop = () => { + return ( + + + + ) +} + +export default MenuTop \ No newline at end of file diff --git a/frontend/src/components/Menu/MenuTop.style.jsx b/frontend/src/components/Menu/MenuTop.style.jsx new file mode 100644 index 0000000..f9c9e95 --- /dev/null +++ b/frontend/src/components/Menu/MenuTop.style.jsx @@ -0,0 +1,8 @@ +import styled from "styled-components"; + +const MenuTopStyled = styled.div` + width: 100%; +`; + +export { MenuTopStyled }; + diff --git a/frontend/src/components/VideoTag/VideoComponent.jsx b/frontend/src/components/VideoTag/VideoComponent.jsx new file mode 100644 index 0000000..76bd1ce --- /dev/null +++ b/frontend/src/components/VideoTag/VideoComponent.jsx @@ -0,0 +1,15 @@ +import React from "react"; + +import StyleVideo from "./VideoComponent.style"; +import bgvideo from "../../assets/videos/video.mp4"; + +const VideoComponent = ({ width, zIndex,position, ...props }) => { + return ( + + + + ); +}; + +export default VideoComponent; + diff --git a/frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx b/frontend/src/components/VideoTag/VideoComponent.style.jsx similarity index 53% rename from frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx rename to frontend/src/components/VideoTag/VideoComponent.style.jsx index b3aac98..cb7b77e 100644 --- a/frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx +++ b/frontend/src/components/VideoTag/VideoComponent.style.jsx @@ -1,17 +1,17 @@ import styled from "styled-components"; const StyleVideo = styled.video` - width: 350px; + position: ${(props) => (props.position === "relative" ? "relative" : "absolute")}; + z-index: ${(props) => props.zIndex}; + width: ${(props) => props.width}; height: 100vh; object-fit: cover; - filter: grayscale(1) brightness(.3); + filter: grayscale(1) brightness(0.3); margin-right: 60px; @media screen and (max-width: 992px) { display: none; } `; - - export default StyleVideo; diff --git a/frontend/src/context/Auth/AuthContext.js b/frontend/src/context/Auth/AuthContext.js index 09cffd5..8b4487d 100644 --- a/frontend/src/context/Auth/AuthContext.js +++ b/frontend/src/context/Auth/AuthContext.js @@ -6,9 +6,6 @@ const AuthContext = createContext(); const AuthProvider = ({ children }) => { const { loading, user, isAuth, handleLogin, handleLogout } = useAuth(); - - //{console.log('authContext teste: ', user)} - return ( React.forwardRef((itemProps, ref) => ), + [to] + ); + + return ( +
  • + + {icon ? {icon} : null} + + +
    • + ); +} + +const MainListItems = (props) => { + const { drawerClose } = props; + const { whatsApps } = useContext(WhatsAppsContext); + const { user } = useContext(AuthContext); + const [connectionWarning, setConnectionWarning] = useState(false); + + useEffect(() => { + const delayDebounceFn = setTimeout(() => { + if (whatsApps.length > 0) { + const offlineWhats = whatsApps.filter((whats) => { + return ( + whats.status === "qrcode" || + whats.status === "PAIRING" || + whats.status === "DISCONNECTED" || + whats.status === "TIMEOUT" || + whats.status === "OPENING" + ); + }); + if (offlineWhats.length > 0) { + setConnectionWarning(true); + } else { + setConnectionWarning(false); + } + } + }, 2000); + return () => clearTimeout(delayDebounceFn); + }, [whatsApps]); + + return ( +
    + } + /> + + } + /> + } /> + } + /> + ( + <> + + {i18n.t("mainDrawer.listItems.administration")} + } + /> + } + /> + + + + + } + /> + + } /> + + } /> + + ( + } + /> + )} + /> + + )} + /> +
    + ); +}; + +export default MainListItems; diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js index c524b76..e079637 100644 --- a/frontend/src/layout/MainListItems.js +++ b/frontend/src/layout/MainListItems.js @@ -1,28 +1,6 @@ import React, { useContext, useEffect, useState } from "react"; import { Link as RouterLink } from "react-router-dom"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemIcon from "@material-ui/core/ListItemIcon"; -import ListItemText from "@material-ui/core/ListItemText"; -import ListSubheader from "@material-ui/core/ListSubheader"; -import Divider from "@material-ui/core/Divider"; -import { Badge } from "@material-ui/core"; -import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined"; - -import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined"; -import SendOutlined from '@material-ui/icons/SendOutlined'; - -//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined"; - - -import WhatsAppIcon from "@material-ui/icons/WhatsApp"; -import SyncAltIcon from "@material-ui/icons/SyncAlt"; -import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined"; -import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined"; -import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined"; -import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined"; -import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined"; - import { i18n } from "../translate/i18n"; import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext"; import { AuthContext } from "../context/Auth/AuthContext"; @@ -32,25 +10,14 @@ function ListItemLink(props) { const { icon, primary, to, className } = props; const renderLink = React.useMemo( - () => - React.forwardRef((itemProps, ref) => ( - - )), + () => React.forwardRef((itemProps, ref) => ), [to] ); - return ( -
  • - - {icon ? {icon} : null} - - -
    • - ); + } const MainListItems = (props) => { - const { drawerClose } = props; const { whatsApps } = useContext(WhatsAppsContext); const { user } = useContext(AuthContext); const [connectionWarning, setConnectionWarning] = useState(false); @@ -78,90 +45,9 @@ const MainListItems = (props) => { }, [whatsApps]); return ( -
    - - - } - /> - - } - /> - } - /> - } - /> - ( - <> - - - {i18n.t("mainDrawer.listItems.administration")} - - } - /> - } - /> - - - - - } - /> - - } - /> - - } - /> - - - ( - } - /> - )} - /> - - - - )} - /> -
    +
      +
    • +
    ); }; diff --git a/frontend/src/layout/index copy.js b/frontend/src/layout/index copy.js new file mode 100644 index 0000000..e4228b4 --- /dev/null +++ b/frontend/src/layout/index copy.js @@ -0,0 +1,271 @@ +import React, { useState, useContext, useEffect } from "react"; +import clsx from "clsx"; + +import { + makeStyles, + Drawer, + AppBar, + Toolbar, + List, + Typography, + Divider, + MenuItem, + IconButton, + Menu, +} from "@material-ui/core"; + +import MenuIcon from "@material-ui/icons/Menu"; +import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; +import AccountCircle from "@material-ui/icons/AccountCircle"; + +import MainListItems from "./MainListItems"; +import NotificationsPopOver from "../components/NotificationsPopOver"; +import UserModal from "../components/UserModal"; +import { AuthContext } from "../context/Auth/AuthContext"; +import BackdropLoading from "../components/BackdropLoading"; +import { i18n } from "../translate/i18n"; + + +const drawerWidth = 240; + +const useStyles = makeStyles((theme) => ({ + root: { + display: "flex", + height: "100vh", + [theme.breakpoints.down("sm")]: { + height: "calc(100vh - 56px)", + }, + }, + + toolbar: { + paddingRight: 24, // keep right padding when drawer closed + }, + toolbarIcon: { + display: "flex", + alignItems: "center", + justifyContent: "flex-end", + padding: "0 8px", + minHeight: "48px", + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + menuButton: { + marginRight: 36, + }, + menuButtonHidden: { + display: "none", + }, + title: { + flexGrow: 1, + }, + drawerPaper: { + position: "relative", + whiteSpace: "nowrap", + width: drawerWidth, + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerPaperClose: { + 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), + }, + }, + appBarSpacer: { + minHeight: "48px", + }, + content: { + flex: 1, + overflow: "auto", + }, + container: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }, + paper: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + }, +})); + +const LoggedInLayout = ({ children }) => { + const classes = useStyles(); + const [userModalOpen, setUserModalOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + const [menuOpen, setMenuOpen] = useState(false); + const { handleLogout, loading } = useContext(AuthContext); + const [drawerOpen, setDrawerOpen] = useState(true); + const [drawerVariant, setDrawerVariant] = useState("permanent"); + const { user } = useContext(AuthContext); + + useEffect(() => { + if (document.body.offsetWidth > 600) { + setDrawerOpen(true); + } + }, []); + + useEffect(() => { + if (document.body.offsetWidth < 600) { + setDrawerVariant("temporary"); + } else { + setDrawerVariant("permanent"); + } + }, [drawerOpen]); + + const handleMenu = (event) => { + setAnchorEl(event.currentTarget); + setMenuOpen(true); + }; + + const handleCloseMenu = () => { + setAnchorEl(null); + setMenuOpen(false); + }; + + const handleOpenUserModal = () => { + setUserModalOpen(true); + handleCloseMenu(); + }; + + const handleClickLogout = () => { + handleCloseMenu(); + handleLogout(); + }; + + const drawerClose = () => { + if (document.body.offsetWidth < 600) { + setDrawerOpen(false); + } + }; + + if (loading) { + return ; + } + + return ( +
    + +
    + setDrawerOpen(!drawerOpen)}> + + +
    + + + + + +     + setUserModalOpen(false)} + userId={user?.id} + /> + + + setDrawerOpen(!drawerOpen)} + className={clsx( + classes.menuButton, + drawerOpen && classes.menuButtonHidden + )} + > + + + + + OMNIHIT + + + {user.id && } + +
    + + + + + + {i18n.t("mainDrawer.appBar.user.profile")} + + + {i18n.t("mainDrawer.appBar.user.logout")} + + +
    +     +     +
    +
    + + {children ? children : null} +
    +
    + ); +}; + +export default LoggedInLayout; diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js index ce410d0..179996a 100644 --- a/frontend/src/layout/index.js +++ b/frontend/src/layout/index.js @@ -1,271 +1,32 @@ -import React, { useState, useContext, useEffect } from "react"; -import clsx from "clsx"; +import React from "react"; -import { - makeStyles, - Drawer, - AppBar, - Toolbar, - List, - Typography, - Divider, - MenuItem, - IconButton, - Menu, -} from "@material-ui/core"; - -import MenuIcon from "@material-ui/icons/Menu"; -import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; -import AccountCircle from "@material-ui/icons/AccountCircle"; - -import MainListItems from "./MainListItems"; -import NotificationsPopOver from "../components/NotificationsPopOver"; -import UserModal from "../components/UserModal"; +import Loading from "../components/LoadingScreen/Loading"; +import MainContainer from "../components/Base/MainContainer"; import { AuthContext } from "../context/Auth/AuthContext"; -import BackdropLoading from "../components/BackdropLoading"; import { i18n } from "../translate/i18n"; - -//import MailLogo from '../assets/logo.jpg'; - -const drawerWidth = 240; - -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - height: "100vh", - [theme.breakpoints.down("sm")]: { - height: "calc(100vh - 56px)", - }, - }, - - toolbar: { - paddingRight: 24, // keep right padding when drawer closed - }, - toolbarIcon: { - display: "flex", - alignItems: "center", - justifyContent: "flex-end", - padding: "0 8px", - minHeight: "48px", - }, - appBar: { - zIndex: theme.zIndex.drawer + 1, - transition: theme.transitions.create(["width", "margin"], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - }, - appBarShift: { - marginLeft: drawerWidth, - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(["width", "margin"], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen, - }), - }, - menuButton: { - marginRight: 36, - }, - menuButtonHidden: { - display: "none", - }, - title: { - flexGrow: 1, - }, - drawerPaper: { - position: "relative", - whiteSpace: "nowrap", - width: drawerWidth, - transition: theme.transitions.create("width", { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen, - }), - }, - drawerPaperClose: { - 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), - }, - }, - appBarSpacer: { - minHeight: "48px", - }, - content: { - flex: 1, - overflow: "auto", - }, - container: { - paddingTop: theme.spacing(4), - paddingBottom: theme.spacing(4), - }, - paper: { - padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - }, -})); +import MenuComponent from "../components/Menu/MenuComponent"; const LoggedInLayout = ({ children }) => { - const classes = useStyles(); - const [userModalOpen, setUserModalOpen] = useState(false); - const [anchorEl, setAnchorEl] = useState(null); - const [menuOpen, setMenuOpen] = useState(false); - const { handleLogout, loading } = useContext(AuthContext); - const [drawerOpen, setDrawerOpen] = useState(false); - const [drawerVariant, setDrawerVariant] = useState("permanent"); - const { user } = useContext(AuthContext); + const { handleLogout, loading, isAuth } = React.useContext(AuthContext); + const { user } = React.useContext(AuthContext); - useEffect(() => { - if (document.body.offsetWidth > 600) { - setDrawerOpen(true); - } - }, []); - - useEffect(() => { - if (document.body.offsetWidth < 600) { - setDrawerVariant("temporary"); - } else { - setDrawerVariant("permanent"); - } - }, [drawerOpen]); - - const handleMenu = (event) => { - setAnchorEl(event.currentTarget); - setMenuOpen(true); - }; - - const handleCloseMenu = () => { - setAnchorEl(null); - setMenuOpen(false); - }; - - const handleOpenUserModal = () => { - setUserModalOpen(true); - handleCloseMenu(); - }; - - const handleClickLogout = () => { - handleCloseMenu(); + const logout = (e) => { handleLogout(); }; - const drawerClose = () => { - if (document.body.offsetWidth < 600) { - setDrawerOpen(false); - } - }; - if (loading) { - return ; + return ; } return ( -
    - -
    - setDrawerOpen(!drawerOpen)}> - - -
    - - - - - -     - setUserModalOpen(false)} - userId={user?.id} - /> - - - setDrawerOpen(!drawerOpen)} - className={clsx( - classes.menuButton, - drawerOpen && classes.menuButtonHidden - )} - > - - - - - OMNIHIT - - - {user.id && } - -
    - - - - - - {i18n.t("mainDrawer.appBar.user.profile")} - - - {i18n.t("mainDrawer.appBar.user.logout")} - - -
    -     -     -
    -
    - - {children ? children : null} -
    -
    + <> + + +
    + {children ? children : null} +
    +     + ); }; diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js index af48738..e61095d 100644 --- a/frontend/src/pages/Login/index.js +++ b/frontend/src/pages/Login/index.js @@ -3,10 +3,9 @@ import { AuthContext } from "../../context/Auth/AuthContext"; import { i18n } from "../../translate/i18n"; import ContainerLogin from "../../components/Base/ContainerLogin"; -import VideoLogin from "../../components/LoginComponents/VideoTag/VideoLogin"; -import { Input } from "@mui/material"; -import AvatarLogin from "../../components/LoginComponents/AvatarCompany/AvatarLogin"; +import VideoComponent from "../../components/VideoTag/VideoComponent"; import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm"; +import Company from "../../components/LoginComponents/CompanyLogo/Company"; //! Can i Delete this comment above? // const Copyright = () => { @@ -44,7 +43,6 @@ import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm"; const Login = () => { const [user, setUser] = React.useState({ email: "", password: "" }); - const [showPassword, setShowPassword] = React.useState(false); const { handleLogin } = React.useContext(AuthContext); @@ -59,8 +57,14 @@ const Login = () => { return ( - - + + + ); }; diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index ad0b229..431140c 100644 --- a/frontend/src/routes/index.js +++ b/frontend/src/routes/index.js @@ -8,9 +8,9 @@ import Dashboard from "../pages/Dashboard/"; import Report from "../pages/Report/"; import SchedulesReminder from "../pages/SchedulesReminder/"; -import Tickets from "../pages/Tickets/"; -import Signup from "../pages/Signup/"; import Login from "../pages/Login/"; +import Signup from "../pages/Signup/"; +import Tickets from "../pages/Tickets/"; import Connections from "../pages/Connections/"; import Settings from "../pages/Settings/"; import Users from "../pages/Users";