login for user type

web-ui/web-react/src/App.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import { Route, useLocation } from 'react-router-dom';
+import { BrowserRouter, Switch, Route, useLocation } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
 
 import { AppTopbar } from './AppTopbar';
@@ -50,6 +50,10 @@ import './assets/demo/Demos.scss';
 import './assets/layout/layout.scss';
 import './App.scss';
 import LogIn from './components/LogIn';
+import { useCookies } from "react-cookie";
+import LoginLocalStorage from './components/LoginLocalStorage';
+
+
 
 const App = () => {
     const [layoutMode, setLayoutMode] = useState('static');
@@ -62,6 +66,7 @@ const App = () => {
     const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
     const copyTooltipRef = useRef();
     const location = useLocation();
+    const [cookies, setCookies] = useCookies();
 
     const handleLogout = () => {
         localStorage.clear();
@@ -117,24 +122,6 @@ const App = () => {
     }
 
     const onToggleMenuClick = (event) => {
-        menuClick = true;
-
-        if (isDesktop()) {
-            if (layoutMode === 'overlay') {
-                if (mobileMenuActive === true) {
-                    setOverlayMenuActive(true);
-                }
-
-                setOverlayMenuActive((prevState) => !prevState);
-                setMobileMenuActive(false);
-            }
-            else if (layoutMode === 'static') {
-                setStaticMenuInactive((prevState) => !prevState);
-            }
-        }
-        else {
-            setMobileMenuActive((prevState) => !prevState);
-        }
 
         event.preventDefault();
     }
@@ -166,6 +153,38 @@ const App = () => {
         return window.innerWidth >= 992;
     }
 
+    const menu2 = [
+        {
+            label: 'Home',
+            items: [
+                { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+                { label: 'Administradores del sistema', icon: 'pi pi-fw pi-id-card', to: '/administradoresSistema' },
+                { label: 'Administradores de comunidad', icon: 'pi pi-fw pi-id-card', to: '/administradoresComunidad' },
+                { label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas' },
+            ]
+        }
+    ]
+
+
+    const menu3 = [
+        {
+            label: 'Home',
+            items: [
+                { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+                { label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos' },
+                { label: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad' },
+            ]
+        },
+    ]
+
+    function menu4() {
+        if (cookies.type == '1') {
+            return menu2;
+        } else if (cookies.type == '2') {
+            return menu3;
+        }
+    }
+
     const menu = [
         {
             label: 'Home',
@@ -282,7 +301,6 @@ const App = () => {
         else
             element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
     }
-
     const wrapperClass = classNames('layout-wrapper', {
         'layout-overlay': layoutMode === 'overlay',
         'layout-static': layoutMode === 'static',
@@ -295,6 +313,11 @@ const App = () => {
     });
 
     return (
+
+        <BrowserRouter>
+            <Switch>
+                <Route exact path="/login" component={LoginLocalStorage} />
+
                 <div className={wrapperClass} onClick={onWrapperClick}>
                     <Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />
 
@@ -302,11 +325,12 @@ const App = () => {
                         mobileTopbarMenuActive={mobileTopbarMenuActive} onMobileTopbarMenuClick={onMobileTopbarMenuClick} onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick} />
 
                     <div className="layout-sidebar" onClick={onSidebarClick}>
-                <AppMenu model={menu} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
+                        <AppMenu model={menu4()} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
                     </div>
 
                     <div className="layout-main-container">
                         <div className="layout-main">
+
                             <Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
                             <Route path="/formlayout" component={FormLayoutDemo} />
                             <Route path="/input" component={InputDemo} />
@@ -321,7 +345,7 @@ const App = () => {
                             <Route path="/media" component={MediaDemo} />
                             <Route path="/menu" component={MenuDemo} />
                             <Route path="/messages" component={MessagesDemo} />
-                    <Route path="/blocks" component={BlocksDemo} />
+                            {/*<Route path="/blocks" component={BlocksDemo} />*/}
                             <Route path="/icons" component={IconsDemo} />
                             <Route path="/file" component={FileDemo} />
                             <Route path="/chart" render={() => <ChartDemo colorMode={layoutColorMode} location={location} />} />
@@ -335,8 +359,8 @@ const App = () => {
                             <Route path="/guardasSeguridad" component={GuardasSeguridad} />
                             <Route path="/comunidadesViviendas" component={Communities} />
                             <Route path="/inquilinos" component={Inquilinos} />
-                    <Route path="/logIn" component={LogIn} />
+                            <Route path="/login" component={LoginLocalStorage} />
-                    <button onClick={handleLogout}>Logout</button>
+
                         </div>
 
                         <AppFooter layoutColorMode={layoutColorMode} />
@@ -349,6 +373,9 @@ const App = () => {
                         <div className="layout-mask p-component-overlay"></div>
                     </CSSTransition>
                 </div>
+            </Switch>
+        </BrowserRouter>
+
     );
 
 }

web-ui/web-react/src/AppMenu.js

@@ -109,10 +109,7 @@ export const AppMenu = (props) => {
     return (
         <div className="layout-menu-container">
             <AppSubmenu items={props.model} className="layout-menu"  onMenuItemClick={props.onMenuItemClick} root={true} role="menu" />
-            <a href="https://www.primefaces.org/primeblocks-react" className="block mt-3">
+           
-                <img alt="primeblocks" className="w-full"
-                     src={props.layoutColorMode === 'light' ? 'assets/layout/images/banner-primeblocks.png' : 'assets/layout/images/banner-primeblocks-dark.png'}/>
-            </a>
         </div>
     );
 }

web-ui/web-react/src/AppTopbar.js

@@ -1,9 +1,21 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
+import Cookies from 'universal-cookie';
+
+const cookies = new Cookies();
 
 export const AppTopbar = (props) => {
 
+     function cerrarSesion()  {
+        cookies.remove('id', { path: "/" });
+        cookies.remove('email', { path: "/" });
+        cookies.remove('name', { path: "/" });
+        cookies.remove('type', { path: "/" });
+        cookies.remove('community_id', { path: "/" });
+        window.location.href = '/login';
+    }
+
     return (
         <div className="layout-topbar">
             <Link to="/" className="layout-topbar-logo">
@@ -37,6 +49,7 @@ export const AppTopbar = (props) => {
                         <i className="pi pi-user" />
                         <span>Profile</span>
                     </button>
+                    <button type="button" onClick={() => cerrarSesion()}>Logout</button>
                 </li>
             </ul>
         </div>

web-ui/web-react/src/components/LoginLocalStorage.js

@@ -52,6 +52,10 @@ class LoginLocalStorage extends Component {
                     cookies.set('id', user._id, { path: "/" });
                     cookies.set('name', user.name, { path: "/" });
                     cookies.set('email', user.email, { path: "/" });
+                    cookies.set('type', user.user_type, { path: "/" });
+                    if(user.user_type != '1') {
+                        cookies.set('community_id', user.community_id, { path: "/" });
+                    }
                     alert(`Bienvenido ${user.name}`);
                     window.location.href = "/";
                 } else {

web-ui/web-react/src/components/MenuAdmin.js

@@ -6,6 +6,7 @@ import Communities from '../components/ComunidadViviendas';
 import Dashboard from '../templates/Dashboard';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import { AppMenu } from '../AppMenu';
+import { CSSTransition } from 'react-transition-group';
 
 const cookies = new Cookies();
 
@@ -59,6 +60,7 @@ class MenuAdmin extends Component {
         cookies.remove('id', { path: "/" });
         cookies.remove('email', { path: "/" });
         cookies.remove('name', { path: "/" });
+        cookies.remove('type', { path: "/" });
         window.location.href = '/login';
     }
 
@@ -89,6 +91,9 @@ class MenuAdmin extends Component {
 
                 </div>
                 <br />
+                <CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={this.state.mobileMenuActive} unmountOnExit>
+                <div className="layout-mask p-component-overlay"></div>
+            </CSSTransition>
             </div>
         );
     }

web-ui/web-react/src/components/MenuAdminCommunity.js

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import Cookies from 'universal-cookie';
+import Inquilinos from './Inquilinos';
+import GuardasSeguridad from './GuardasSeguridad';
+import Dashboard from '../templates/Dashboard';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { AppMenu } from '../AppMenu';
+
+const cookies = new Cookies();
+
+const menu = [
+    {
+        label: 'Home',
+        items: [
+            { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+            { label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos' },
+            { label: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad' },
+        ]
+    },
+];
+
+class MenuAdminCommunity extends Component {
+
+    constructor() {
+        super()
+        this.state = {
+            layoutColorMode: 'light',
+            layoutMode: 'static',
+            menuClick: false,
+            mobileTopbarMenuClick: false,
+            overlayMenuActive: false,
+            mobileMenuActive: false
+        }
+
+    }
+
+    onSidebarClick = () => {
+        this.setState({
+            menuClick: true
+        })
+
+    }
+
+    onMenuItemClick = (event) => {
+        if (!event.item.items) {
+            this.setState({
+                overlayMenuActive: false,
+                mobileMenuActive: false
+            })
+
+        }
+    }
+
+    cerrarSesion = () => {
+        cookies.remove('id', { path: "/" });
+        cookies.remove('email', { path: "/" });
+        cookies.remove('name', { path: "/" });
+        cookies.remove('type', { path: "/" });
+        cookies.remove('community_id', { path: "/" });
+        window.location.href = '/login';
+    }
+
+    componentDidMount() {
+        if (!cookies.get('email')) {
+            window.location.href = "/login";
+        }
+    }
+
+
+     onWrapperClick = (event) => {
+        if (!this.state.menuClick) {
+            this.setState({
+                overlayMenuActive: false,
+                mobileMenuActive: false
+            })
+        }
+
+        if (!this.state.mobileTopbarMenuClick) {
+            this.setState({
+                mobileTopbarMenuClick: false,
+            })
+        }
+
+        this.setState({
+            mobileTopbarMenuClick: false,
+            menuClick: false
+        })
+    }
+
+    render() {
+
+        return (
+
+            <div className={this.wrapperClass} onClick={this.onWrapperClick}>
+
+                <div>
+                    Menu Principal
+                    <div className="layout-sidebar" onClick={this.onSidebarClick}>
+                        <AppMenu model={menu} onMenuItemClick={this.onMenuItemClick} layoutColorMode={this.state.layoutColorMode} />
+                        <button type="button" onClick={() => this.cerrarSesion()}>Logout</button>
+
+                    </div>
+
+                    <div className="layout-main-container">
+                        <div className="layout-main">
+                            <Route exact path="/" render={() => <Dashboard colorMode={this.state.layoutColorMode} />} />
+                            <Route path="/inquilinos" component={Inquilinos} />
+                            <Route path="/guardasSeguridad" component={GuardasSeguridad} />
+                        </div>
+
+                    </div>
+                    <br />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default MenuAdminCommunity;

web-ui/web-react/src/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 //import * as serviceWorker from './serviceWorker';
-import { HashRouter, Route } from 'react-router-dom'
+import { HashRouter, Route, Router } from 'react-router-dom'
 import ScrollToTop from './ScrollToTop';
 import Routes from './routes/Routes';
 
@@ -12,7 +12,7 @@ import Routes from './routes/Routes';
 ReactDOM.render(
     <HashRouter>
         <ScrollToTop>
-            <Routes/>
+            <App/>
         </ScrollToTop>
     </HashRouter>,
     document.getElementById('root')

web-ui/web-react/src/routes/Routes.js

@@ -1,17 +1,36 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import App from '../App';
 import LoginLocalStorage from '../components/LoginLocalStorage';
 import MenuAdmin from '../components/MenuAdmin';
 import Menu from '../pages/Menu';
+import MenuAdminCommunity from '../components/MenuAdminCommunity';
+import { useCookies } from "react-cookie";
+
+
 function Routes() {
 
+  const [cookies, setCookies] = useCookies();
+
+  
+  function getMenu() {
+    console.log(cookies.type)
+    switch(cookies.type) {
+      case '1':
+        return <Route exact path="/" component={MenuAdmin} />
+      case '2':
+        return <Route exact path="/" component={MenuAdminCommunity} />
+
+    }
+  }
+
 
   return (
     <BrowserRouter>
       <Switch>
         <Route exact path="/login" component={LoginLocalStorage} />
-        <Route exact path="/" component={MenuAdmin}/>
+         <Route exact path="/" component={App} />
+
       </Switch>
     </BrowserRouter>
   );