login for user type

2022-08-11 00:55:45 -06:00 · 2022-08-11 00:55:45 -06:00 · 48f5c58f4a
parent e059363d53
commit 48f5c58f4a
8 changed files with 273 additions and 89 deletions
--- a/web-ui/web-react/src/App.js
+++ b/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,8 +66,9 @@ const App = () => {
    const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
    const copyTooltipRef = useRef();
    const location = useLocation();
+    const [cookies, setCookies] = useCookies();

-    const handleLogout=()=>{
+    const handleLogout = () => {
        localStorage.clear();
        window.location.reload();
    }
@ -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,18 +153,50 @@ 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',
            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: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad'}, 
-                {label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas'}, 
-                {label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos'},
-                {label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn'},
-                {label: 'Log out', icon: 'pi pi-fw pi-id-card', to: '/logOut'}
+                { 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: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad' },
+                { label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas' },
+                { label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos' },
+                { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
+                { label: 'Log out', icon: 'pi pi-fw pi-id-card', to: '/logOut' }
            ]
        },
        {
@ -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,60 +313,69 @@ const App = () => {
    });

    return (
-        <div className={wrapperClass} onClick={onWrapperClick}>
-            <Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />

-            <AppTopbar onToggleMenuClick={onToggleMenuClick} layoutColorMode={layoutColorMode}
-                mobileTopbarMenuActive={mobileTopbarMenuActive} onMobileTopbarMenuClick={onMobileTopbarMenuClick} onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick} />
+        <BrowserRouter>
+            <Switch>
+                <Route exact path="/login" component={LoginLocalStorage} />

-            <div className="layout-sidebar" onClick={onSidebarClick}>
-                <AppMenu model={menu} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
-            </div>
+                <div className={wrapperClass} onClick={onWrapperClick}>
+                    <Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />

-            <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} />
-                    <Route path="/floatlabel" component={FloatLabelDemo} />
-                    <Route path="/invalidstate" component={InvalidStateDemo} />
-                    <Route path="/button" component={ButtonDemo} />
-                    <Route path="/table" component={TableDemo} />
-                    <Route path="/list" component={ListDemo} />
-                    <Route path="/tree" component={TreeDemo} />
-                    <Route path="/panel" component={PanelDemo} />
-                    <Route path="/overlay" component={OverlayDemo} />
-                    <Route path="/media" component={MediaDemo} />
-                    <Route path="/menu" component={MenuDemo} />
-                    <Route path="/messages" component={MessagesDemo} />
-                    <Route path="/blocks" component={BlocksDemo} />
-                    <Route path="/icons" component={IconsDemo} />
-                    <Route path="/file" component={FileDemo} />
-                    <Route path="/chart" render={() => <ChartDemo colorMode={layoutColorMode} location={location} />} />
-                    <Route path="/misc" component={MiscDemo} />
-                    <Route path="/timeline" component={TimelineDemo} />
-                    <Route path="/crud" component={Crud} />
-                    <Route path="/empty" component={EmptyPage} />
-                    <Route path="/documentation" component={Documentation} />
-                    <Route path="/administradoresSistema" component={AdministradoresSistema} />
-                    <Route path="/administradoresComunidad" component={AdministradoresComunidad} />
-                    <Route path="/guardasSeguridad" component={GuardasSeguridad} />
-                    <Route path="/comunidadesViviendas" component={Communities} />
-                    <Route path="/inquilinos" component={Inquilinos} />
-                    <Route path="/logIn" component={LogIn} />
-                    <button onClick={handleLogout}>Logout</button>
+                    <AppTopbar onToggleMenuClick={onToggleMenuClick} layoutColorMode={layoutColorMode}
+                        mobileTopbarMenuActive={mobileTopbarMenuActive} onMobileTopbarMenuClick={onMobileTopbarMenuClick} onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick} />
+
+                    <div className="layout-sidebar" onClick={onSidebarClick}>
+                        <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} />
+                            <Route path="/floatlabel" component={FloatLabelDemo} />
+                            <Route path="/invalidstate" component={InvalidStateDemo} />
+                            <Route path="/button" component={ButtonDemo} />
+                            <Route path="/table" component={TableDemo} />
+                            <Route path="/list" component={ListDemo} />
+                            <Route path="/tree" component={TreeDemo} />
+                            <Route path="/panel" component={PanelDemo} />
+                            <Route path="/overlay" component={OverlayDemo} />
+                            <Route path="/media" component={MediaDemo} />
+                            <Route path="/menu" component={MenuDemo} />
+                            <Route path="/messages" component={MessagesDemo} />
+                            {/*<Route path="/blocks" component={BlocksDemo} />*/}
+                            <Route path="/icons" component={IconsDemo} />
+                            <Route path="/file" component={FileDemo} />
+                            <Route path="/chart" render={() => <ChartDemo colorMode={layoutColorMode} location={location} />} />
+                            <Route path="/misc" component={MiscDemo} />
+                            <Route path="/timeline" component={TimelineDemo} />
+                            <Route path="/crud" component={Crud} />
+                            <Route path="/empty" component={EmptyPage} />
+                            <Route path="/documentation" component={Documentation} />
+                            <Route path="/administradoresSistema" component={AdministradoresSistema} />
+                            <Route path="/administradoresComunidad" component={AdministradoresComunidad} />
+                            <Route path="/guardasSeguridad" component={GuardasSeguridad} />
+                            <Route path="/comunidadesViviendas" component={Communities} />
+                            <Route path="/inquilinos" component={Inquilinos} />
+                            <Route path="/login" component={LoginLocalStorage} />
+
+                        </div>
+
+                        <AppFooter layoutColorMode={layoutColorMode} />
+                    </div>
+
+                    <AppConfig rippleEffect={ripple} onRippleEffect={onRipple} inputStyle={inputStyle} onInputStyleChange={onInputStyleChange}
+                        layoutMode={layoutMode} onLayoutModeChange={onLayoutModeChange} layoutColorMode={layoutColorMode} onColorModeChange={onColorModeChange} />
+
+                    <CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
+                        <div className="layout-mask p-component-overlay"></div>
+                    </CSSTransition>
                </div>
+            </Switch>
+        </BrowserRouter>

-                <AppFooter layoutColorMode={layoutColorMode} />
-            </div>
-
-            <AppConfig rippleEffect={ripple} onRippleEffect={onRipple} inputStyle={inputStyle} onInputStyleChange={onInputStyleChange}
-                layoutMode={layoutMode} onLayoutModeChange={onLayoutModeChange} layoutColorMode={layoutColorMode} onColorModeChange={onColorModeChange} />
-
-            <CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
-                <div className="layout-mask p-component-overlay"></div>
-            </CSSTransition>
-        </div>
    );

 }
--- a/web-ui/web-react/src/AppMenu.js
+++ b/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>
    );
 }
--- a/web-ui/web-react/src/AppTopbar.js
+++ b/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>
--- a/web-ui/web-react/src/components/LoginLocalStorage.js
+++ b/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 {
--- a/web-ui/web-react/src/components/MenuAdmin.js
+++ b/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>
        );
    }
--- a/web-ui/web-react/src/components/MenuAdminCommunity.js
+++ b/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;
--- a/web-ui/web-react/src/index.js
+++ b/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')
--- a/web-ui/web-react/src/routes/Routes.js
+++ b/web-ui/web-react/src/routes/Routes.js
@ -1,17 +1,36 @@
-import React from 'react';
-import {BrowserRouter, Switch, Route} from 'react-router-dom';
+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="/login" component={LoginLocalStorage} />
+         <Route exact path="/" component={App} />
+
      </Switch>
    </BrowserRouter>
  );