Merge pull request #166 from DeimosPr4/UH-iniciarsesionV2

login frontend

web-ui/web-react/public/assets/themes/khaki/theme.css

@@ -7156,4 +7156,11 @@
 .status.status--1 {
     background: #565656;
     color: #f7f9f7;
+}
+
+
+.login-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }

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,407 +50,483 @@ import './assets/demo/flags/flags.css';
 import './assets/demo/Demos.scss';
 import './assets/layout/layout.scss';
 import './App.scss';
-import LogIn from './components/LogIn';
 import { PrimeIcons } from 'primereact/api';
 import AreasComunes from './components/AreasComunes';
+import { useCookies } from "react-cookie";
+import LogInUser from './components/LogInUser';
+import Page404 from './components/Page404'
+
 
 const App = () => {
-  const [layoutMode, setLayoutMode] = useState('static');
+    const [layoutMode, setLayoutMode] = useState('static');
-  const [layoutColorMode, setLayoutColorMode] = useState('light');
+    const [layoutColorMode, setLayoutColorMode] = useState('light')
-  const [inputStyle, setInputStyle] = useState('outlined');
+    const [inputStyle, setInputStyle] = useState('outlined');
-  const [ripple, setRipple] = useState(true);
+    const [ripple, setRipple] = useState(true);
-  const [staticMenuInactive, setStaticMenuInactive] = useState(false);
+    const [staticMenuInactive, setStaticMenuInactive] = useState(false);
-  const [overlayMenuActive, setOverlayMenuActive] = useState(false);
+    const [overlayMenuActive, setOverlayMenuActive] = useState(false);
-  const [mobileMenuActive, setMobileMenuActive] = useState(false);
+    const [mobileMenuActive, setMobileMenuActive] = useState(false);
-  const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
+    const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
-  const copyTooltipRef = useRef();
+    const copyTooltipRef = useRef();
-  const location = useLocation();
+    const location = useLocation();
+    const [cookies, setCookies] = useCookies();
+    const [logged, setLogged] = useState()
 
-  PrimeReact.ripple = true;
+    PrimeReact.ripple = true;
 
-  let menuClick = false;
+    let menuClick = false;
-  let mobileTopbarMenuClick = false;
+    let mobileTopbarMenuClick = false;
 
-  useEffect(() => {
+    useEffect(() => {
-    if (mobileMenuActive) {
+        if (mobileMenuActive) {
-      addClass(document.body, 'body-overflow-hidden');
+            addClass(document.body, 'body-overflow-hidden');
-    } else {
+        } else {
-      removeClass(document.body, 'body-overflow-hidden');
+            removeClass(document.body, 'body-overflow-hidden');
-    }
+        }
-  }, [mobileMenuActive]);
+    }, [mobileMenuActive]);
 
-  useEffect(() => {
+    useEffect(() => {
-    copyTooltipRef &&
+        copyTooltipRef &&
-      copyTooltipRef.current &&
+            copyTooltipRef.current &&
-      copyTooltipRef.current.updateTargetEvents();
+            copyTooltipRef.current.updateTargetEvents();
-  }, [location]);
+    }, [location]);
 
-  const onInputStyleChange = (inputStyle) => {
-    setInputStyle(inputStyle);
-  };
 
-  const onRipple = (e) => {
-    PrimeReact.ripple = e.value;
-    setRipple(e.value);
-  };
 
-  const onLayoutModeChange = (mode) => {
-    setLayoutMode(mode);
-  };
 
-  const onColorModeChange = (mode) => {
-    setLayoutColorMode(mode);
-  };
 
-  const onWrapperClick = (event) => {
-    if (!menuClick) {
-      setOverlayMenuActive(false);
-      setMobileMenuActive(false);
-    }
 
-    if (!mobileTopbarMenuClick) {
-      setMobileTopbarMenuActive(false);
-    }
 
-    mobileTopbarMenuClick = false;
+    const onInputStyleChange = (inputStyle) => {
-    menuClick = false;
+        setInputStyle(inputStyle);
-  };
+    };
 
-  const onToggleMenuClick = (event) => {
+    const onRipple = (e) => {
-    menuClick = true;
+        PrimeReact.ripple = e.value;
+        setRipple(e.value);
+    };
 
-    if (isDesktop()) {
+    const onLayoutModeChange = (mode) => {
-      if (layoutMode === 'overlay') {
+        setLayoutMode(mode);
-        if (mobileMenuActive === true) {
+    };
-          setOverlayMenuActive(true);
+
+    const onColorModeChange = (mode) => {
+        setLayoutColorMode(mode);
+    };
+
+    const onWrapperClick = (event) => {
+        if (!menuClick) {
+            setOverlayMenuActive(false);
+            setMobileMenuActive(false);
         }
 
-        setOverlayMenuActive((prevState) => !prevState);
+        if (!mobileTopbarMenuClick) {
-        setMobileMenuActive(false);
+            setMobileTopbarMenuActive(false);
-      } else if (layoutMode === 'static') {
+        }
-        setStaticMenuInactive((prevState) => !prevState);
+
-      }
+        mobileTopbarMenuClick = false;
-    } else {
+        menuClick = false;
-      setMobileMenuActive((prevState) => !prevState);
+    };
+
+    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();
+    };
+
+    const onSidebarClick = () => {
+        menuClick = true;
+    };
+
+    const onMobileTopbarMenuClick = (event) => {
+        mobileTopbarMenuClick = true;
+
+        setMobileTopbarMenuActive((prevState) => !prevState);
+        event.preventDefault();
+    };
+
+    const onMobileSubTopbarMenuClick = (event) => {
+        mobileTopbarMenuClick = true;
+
+        event.preventDefault();
+    };
+
+    const onMenuItemClick = (event) => {
+        if (!event.item.items) {
+            setOverlayMenuActive(false);
+            setMobileMenuActive(false);
+        }
+    };
+    const isDesktop = () => {
+        return window.innerWidth >= 992;
+    };
+
+    const menu2 = [
+        {
+            label: 'Inicio',
+            items: [
+                { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+                { label: 'Administradores del sistema', icon: PrimeIcons.USERS, to: '/administradoresSistema' },
+                { label: 'Administradores de comunidad', icon: PrimeIcons.USERS, to: '/administradoresComunidad' },
+                { label: 'Comunidades', icon: PrimeIcons.BUILDING, to: '/comunidadesViviendas' },
+            ]
+        }
+    ]
+
+
+    const menu3 = [
+        {
+            label: 'Inicio',
+            items: [
+                { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+                { label: 'Inquilinos', icon: PrimeIcons.USERS, to: '/inquilinos' },
+                { label: 'Guardas de seguridad', icon: PrimeIcons.LOCK, to: '/guardasSeguridad' },
+                {
+                    label: 'Áreas Comunes de Comunidad',
+                    icon: PrimeIcons.BUILDING,
+                    to: '/areasComunes',
+                },
+            ]
+        },
+    ]
+
+    const menuLogin = [
+        {
+            label: 'Inicio',
+            items: [
+                {
+                    label: 'Inicio de sesion',
+                    icon: PrimeIcons.BUILDING,
+                    to: '/login'
+                },
+            ]
+        },
+    ]
+
+    function menu4() {
+        if (cookies.type == '1') {
+            return menu2;
+        } else if (cookies.type == '2') {
+            return menu3;
+        } else {
+            return menuLogin;
+        }
     }
 
-    event.preventDefault();
+    const menu = [
-  };
-
-  const onSidebarClick = () => {
-    menuClick = true;
-  };
-
-  const onMobileTopbarMenuClick = (event) => {
-    mobileTopbarMenuClick = true;
-
-    setMobileTopbarMenuActive((prevState) => !prevState);
-    event.preventDefault();
-  };
-
-  const onMobileSubTopbarMenuClick = (event) => {
-    mobileTopbarMenuClick = true;
-
-    event.preventDefault();
-  };
-
-  const onMenuItemClick = (event) => {
-    if (!event.item.items) {
-      setOverlayMenuActive(false);
-      setMobileMenuActive(false);
-    }
-  };
-  const isDesktop = () => {
-    return window.innerWidth >= 992;
-  };
-
-  const menu = [
-    {
-      label: 'Home',
-      items: [
-        { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
         {
-          label: 'Administradores del sistema',
+            label: 'Inicio',
-          icon: PrimeIcons.USERS,
+            items:
-          to: '/administradoresSistema',
+                [
+                    {
+                        label: 'Administradores del sistema',
+                        icon: PrimeIcons.USERS,
+                        to: '/administradoresSistema',
+                    },
+                    {
+                        label: 'Administradores de comunidad',
+                        icon: PrimeIcons.USERS,
+                        to: '/administradoresComunidad',
+                    },
+                    {
+                        label: 'Guardas de seguridad',
+                        icon: PrimeIcons.LOCK,
+                        to: '/guardasSeguridad',
+                    },
+                    {
+                        label: 'Comunidades',
+                        icon: PrimeIcons.BUILDING,
+                        to: '/comunidadesViviendas',
+                    },
+                    {
+                        label: 'Inquilinos',
+                        icon: PrimeIcons.USER,
+                        to: '/inquilinos'
+                    },
+                    {
+                        label: 'Áreas Comunes de Comunidad',
+                        icon: PrimeIcons.BUILDING,
+                        to: '/areasComunes',
+                    },
+                    { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
+                ],
         },
         {
-          label: 'Administradores de comunidad',
+            label: 'UI Components',
-          icon: PrimeIcons.USERS,
+            icon: 'pi pi-fw pi-sitemap',
-          to: '/administradoresComunidad',
+            items: [
+                {
+                    label: 'Form Layout',
+                    icon: 'pi pi-fw pi-id-card',
+                    to: '/formlayout',
+                },
+                { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },
+                {
+                    label: 'Float Label',
+                    icon: 'pi pi-fw pi-bookmark',
+                    to: '/floatlabel',
+                },
+                {
+                    label: 'Invalid State',
+                    icon: 'pi pi-fw pi-exclamation-circle',
+                    to: 'invalidstate',
+                },
+                { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' },
+                { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' },
+                { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },
+                { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },
+                { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },
+                { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },
+                { label: 'Media', icon: 'pi pi-fw pi-image', to: '/media' },
+                { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },
+                { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },
+                { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },
+                { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },
+                { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },
+            ],
         },
         {
-          label: 'Guardas de seguridad',
+            label: 'UI Blocks',
-          icon: PrimeIcons.LOCK,
+            items: [
-          to: '/guardasSeguridad',
+                {
+                    label: 'Free Blocks',
+                    icon: 'pi pi-fw pi-eye',
+                    to: '/blocks',
+                    badge: 'NEW',
+                },
+                {
+                    label: 'All Blocks',
+                    icon: 'pi pi-fw pi-globe',
+                    url: 'https://www.primefaces.org/primeblocks-react',
+                },
+            ],
         },
         {
-          label: 'Comunidades',
+            label: 'Icons',
-          icon: PrimeIcons.BUILDING,
+            items: [{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' }],
-          to: '/comunidadesViviendas',
         },
         {
-          label: 'Inquilinos',
+            label: 'Pages',
-          icon: PrimeIcons.USER,
+            icon: 'pi pi-fw pi-clone',
-          to: '/inquilinos'
+            items: [
+                { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' },
+                { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' },
+                { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' },
+            ],
         },
         {
-          label: 'Áreas Comunes de Comunidad',
+            label: 'Menu Hierarchy',
-          icon: PrimeIcons.BUILDING,
+            icon: 'pi pi-fw pi-search',
-          to: '/areasComunes',
+            items: [
+                {
+                    label: 'Submenu 1',
+                    icon: 'pi pi-fw pi-bookmark',
+                    items: [
+                        {
+                            label: 'Submenu 1.1',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                        {
+                            label: 'Submenu 1.2',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    label: 'Submenu 2',
+                    icon: 'pi pi-fw pi-bookmark',
+                    items: [
+                        {
+                            label: 'Submenu 2.1',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                        {
+                            label: 'Submenu 2.2',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                    ],
+                },
+            ],
         },
-        { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
+    ];
-      ],
-    },
-    {
-      label: 'UI Components',
-      icon: 'pi pi-fw pi-sitemap',
-      items: [
-        {
-          label: 'Form Layout',
-          icon: 'pi pi-fw pi-id-card',
-          to: '/formlayout',
-        },
-        { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },
-        {
-          label: 'Float Label',
-          icon: 'pi pi-fw pi-bookmark',
-          to: '/floatlabel',
-        },
-        {
-          label: 'Invalid State',
-          icon: 'pi pi-fw pi-exclamation-circle',
-          to: 'invalidstate',
-        },
-        { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' },
-        { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' },
-        { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },
-        { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },
-        { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },
-        { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },
-        { label: 'Media', icon: 'pi pi-fw pi-image', to: '/media' },
-        { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },
-        { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },
-        { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },
-        { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },
-        { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },
-      ],
-    },
-    {
-      label: 'UI Blocks',
-      items: [
-        {
-          label: 'Free Blocks',
-          icon: 'pi pi-fw pi-eye',
-          to: '/blocks',
-          badge: 'NEW',
-        },
-        {
-          label: 'All Blocks',
-          icon: 'pi pi-fw pi-globe',
-          url: 'https://www.primefaces.org/primeblocks-react',
-        },
-      ],
-    },
-    {
-      label: 'Icons',
-      items: [{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' }],
-    },
-    {
-      label: 'Pages',
-      icon: 'pi pi-fw pi-clone',
-      items: [
-        { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' },
-        { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' },
-        { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' },
-      ],
-    },
-    {
-      label: 'Menu Hierarchy',
-      icon: 'pi pi-fw pi-search',
-      items: [
-        {
-          label: 'Submenu 1',
-          icon: 'pi pi-fw pi-bookmark',
-          items: [
-            {
-              label: 'Submenu 1.1',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-            {
-              label: 'Submenu 1.2',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-          ],
-        },
-        {
-          label: 'Submenu 2',
-          icon: 'pi pi-fw pi-bookmark',
-          items: [
-            {
-              label: 'Submenu 2.1',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-            {
-              label: 'Submenu 2.2',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ];
 
-  const addClass = (element, className) => {
+    const addClass = (element, className) => {
-    if (element.classList) element.classList.add(className);
+        if (element.classList) element.classList.add(className);
-    else element.className += ' ' + className;
+        else element.className += ' ' + className;
-  };
+    };
 
-  const removeClass = (element, className) => {
+    const removeClass = (element, className) => {
-    if (element.classList) element.classList.remove(className);
+        if (element.classList) element.classList.remove(className);
-    else
+        else
-      element.className = element.className.replace(
+            element.className = element.className.replace(
-        new RegExp(
+                new RegExp(
-          '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)',
+                    '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)',
-          'gi',
+                    'gi',
-        ),
+                ),
-        ' ',
+                ' ',
-      );
+            );
-  };
+    };
 
-  const wrapperClass = classNames('layout-wrapper', {
+    const wrapperClass = classNames('layout-wrapper', {
-    'layout-overlay': layoutMode === 'overlay',
+        'layout-overlay': layoutMode === 'overlay',
-    'layout-static': layoutMode === 'static',
+        'layout-static': layoutMode === 'static',
-    'layout-static-sidebar-inactive':
+        'layout-static-sidebar-inactive':
-      staticMenuInactive && layoutMode === 'static',
+            staticMenuInactive && layoutMode === 'static',
-    'layout-overlay-sidebar-active':
+        'layout-overlay-sidebar-active':
-      overlayMenuActive && layoutMode === 'overlay',
+            overlayMenuActive && layoutMode === 'overlay',
-    'layout-mobile-sidebar-active': mobileMenuActive,
+        'layout-mobile-sidebar-active': mobileMenuActive,
-    'p-input-filled': inputStyle === 'filled',
+        'p-input-filled': inputStyle === 'filled',
-    'p-ripple-disabled': ripple === false,
+        'p-ripple-disabled': ripple === false,
-    'layout-theme-light': layoutColorMode === 'light',
+        'layout-theme-light': layoutColorMode === 'light',
-  });
+    });
 
-  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}
-      />
 
-      <div className="layout-sidebar" onClick={onSidebarClick}>
-        <AppMenu
-          model={menu}
-          onMenuItemClick={onMenuItemClick}
-          layoutColorMode={layoutColorMode}
-        />
-      </div>
 
-      <div className="layout-main-container">
+    return (
-        <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="/InquilinosCompletar" component={InquilinosCompletar} />
-          <Route path="/areasComunes" component={AreasComunes} />
-          <Route path="/logIn" component={LogIn} />
-        </div>
 
-        <AppFooter layoutColorMode={layoutColorMode} />
+        <BrowserRouter>
-      </div>
+            <Switch>
 
-      <AppConfig
+                <div className={wrapperClass} onClick={onWrapperClick}>
-        rippleEffect={ripple}
-        onRippleEffect={onRipple}
-        inputStyle={inputStyle}
-        onInputStyleChange={onInputStyleChange}
-        layoutMode={layoutMode}
-        onLayoutModeChange={onLayoutModeChange}
-        layoutColorMode={layoutColorMode}
-        onColorModeChange={onColorModeChange}
-      />
 
-      <CSSTransition
+
-        classNames="layout-mask"
+                    <Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />
-        timeout={{ enter: 200, exit: 200 }}
+
-        in={mobileMenuActive}
+                    <AppTopbar onToggleMenuClick={onToggleMenuClick} layoutColorMode={layoutColorMode}
-        unmountOnExit
+                        mobileTopbarMenuActive={mobileTopbarMenuActive} onMobileTopbarMenuClick={onMobileTopbarMenuClick} onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick} />
-      >
+
-        <div className="layout-mask p-component-overlay"></div>
+                    <div className="layout-sidebar" onClick={onSidebarClick}>
-      </CSSTransition>
+                        <AppMenu model={menu4()} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
-    </div>
+                    </div>
-  );
+
-};
+                    <div className="layout-main-container">
+                        <div className="layout-main">
+                            {(() => {
+                                if (!cookies.email) {
+                                    return (
+                                        <>
+
+                                            <Route path="/login" exact component={LogInUser} />
+
+                                        </>
+
+                                    )
+                                } else {
+
+                                    if (cookies.type == '1') {
+                                        return (
+                                            <>
+                                                <Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
+                                                <Route path="/administradoresSistema" component={AdministradoresSistema} />
+                                                <Route path="/administradoresComunidad" component={AdministradoresComunidad} />
+                                                <Route path="/comunidadesViviendas" component={Communities} />
+                                                <Route to="*" exact component={Page404} />
+                                            </>
+
+                                        )
+
+                                    } else if (cookies.type == '2') {
+                                        return (
+                                            <>
+                                                <Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
+                                                <Route path="/guardasSeguridad" component={GuardasSeguridad} />
+                                                <Route path="/inquilinos" component={Inquilinos} />
+                                                <Route path="/areasComunes" component={AreasComunes} />
+                                                <Route to="*" exact component={Page404} />
+
+                                            </>
+                                        )
+                                    } else {
+                                        return (
+                                            <Route path="/page404" exact component={Page404} />
+                                        )
+                                    }
+
+
+                                    return (
+                                        <>
+                                            <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} />
+
+
+                                        </>
+
+                                    )
+
+                                }
+                            })()}
+
+                        </div>
+
+                        <AppFooter layoutColorMode={layoutColorMode} />
+                    </div>
+
+                    <AppConfig />
+
+                    <CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
+                        <div className="layout-mask p-component-overlay"></div>
+                    </CSSTransition>
+                </div>
+            </Switch>
+        </BrowserRouter>
+
+    );
+
+}
 
 export default App;

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

@@ -6,171 +6,161 @@ import { Ripple } from 'primereact/ripple';
 import { Badge } from 'primereact/badge';
 
 const AppSubmenu = (props) => {
-  const [activeIndex, setActiveIndex] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(null);
 
-  const onMenuItemClick = (event, item, index) => {
+    const onMenuItemClick = (event, item, index) => {
-    //avoid processing disabled items
+        //avoid processing disabled items
-    if (item.disabled) {
+        if (item.disabled) {
-      event.preventDefault();
+            event.preventDefault();
-      return true;
+            return true;
-    }
+        }
 
-    //execute command
+        //execute command
-    if (item.command) {
+        if (item.command) {
-      item.command({ originalEvent: event, item: item });
+            item.command({ originalEvent: event, item: item });
-    }
+        }
 
-    if (index === activeIndex) setActiveIndex(null);
+        if (index === activeIndex) setActiveIndex(null);
-    else setActiveIndex(index);
+        else setActiveIndex(index);
 
-    if (props.onMenuItemClick) {
+        if (props.onMenuItemClick) {
-      props.onMenuItemClick({
+            props.onMenuItemClick({
-        originalEvent: event,
+                originalEvent: event,
-        item: item,
+                item: item,
-      });
+            });
-    }
+        }
-  };
+    };
 
-  const onKeyDown = (event) => {
+    const onKeyDown = (event) => {
-    if (event.code === 'Enter' || event.code === 'Space') {
+        if (event.code === 'Enter' || event.code === 'Space') {
-      event.preventDefault();
+            event.preventDefault();
-      event.target.click();
+            event.target.click();
-    }
+        }
-  };
+    };
 
-  const renderLinkContent = (item) => {
+    const renderLinkContent = (item) => {
-    let submenuIcon = item.items && (
+        let submenuIcon = item.items && (
-      <i className="pi pi-fw pi-angle-down menuitem-toggle-icon"></i>
+            <i className="pi pi-fw pi-angle-down menuitem-toggle-icon"></i>
-    );
+        );
-    let badge = item.badge && <Badge value={item.badge} />;
+        let badge = item.badge && <Badge value={item.badge} />;
 
-    return (
-      <React.Fragment>
-        <i className={item.icon}></i>
-        <span>{item.label}</span>
-        {submenuIcon}
-        {badge}
-        <Ripple />
-      </React.Fragment>
-    );
-  };
-
-  const renderLink = (item, i) => {
-    let content = renderLinkContent(item);
-
-    if (item.to) {
-      return (
-        <NavLink
-          aria-label={item.label}
-          onKeyDown={onKeyDown}
-          role="menuitem"
-          className="p-ripple"
-          activeClassName="router-link-active router-link-exact-active"
-          to={item.to}
-          onClick={(e) => onMenuItemClick(e, item, i)}
-          exact
-          target={item.target}
-        >
-          {content}
-        </NavLink>
-      );
-    } else {
-      return (
-        <a
-          tabIndex="0"
-          aria-label={item.label}
-          onKeyDown={onKeyDown}
-          role="menuitem"
-          href={item.url}
-          className="p-ripple"
-          onClick={(e) => onMenuItemClick(e, item, i)}
-          target={item.target}
-        >
-          {content}
-        </a>
-      );
-    }
-  };
-
-  let items =
-    props.items &&
-    props.items.map((item, i) => {
-      let active = activeIndex === i;
-      let styleClass = classNames(item.badgeStyleClass, {
-        'layout-menuitem-category': props.root,
-        'active-menuitem': active && !item.to,
-      });
-
-      if (props.root) {
         return (
-          <li className={styleClass} key={i} role="none">
+            <React.Fragment>
-            {props.root === true && (
+                <i className={item.icon}></i>
-              <React.Fragment>
+                <span>{item.label}</span>
-                <div
+                {submenuIcon}
-                  className="layout-menuitem-root-text"
+                {badge}
-                  aria-label={item.label}
+                <Ripple />
+            </React.Fragment>
+        );
+    };
+
+    const renderLink = (item, i) => {
+        let content = renderLinkContent(item);
+
+        if (item.to) {
+            return (
+                <NavLink
+                    aria-label={item.label}
+                    onKeyDown={onKeyDown}
+                    role="menuitem"
+                    className="p-ripple"
+                    activeClassName="router-link-active router-link-exact-active"
+                    to={item.to}
+                    onClick={(e) => onMenuItemClick(e, item, i)}
+                    exact
+                    target={item.target}
                 >
-                  {item.label}
+                    {content}
-                </div>
+                </NavLink>
-                <AppSubmenu
+            );
-                  items={item.items}
+        } else {
-                  onMenuItemClick={props.onMenuItemClick}
+            return (
-                />
+                <a
-              </React.Fragment>
+                    tabIndex="0"
-            )}
+                    aria-label={item.label}
-          </li>
+                    onKeyDown={onKeyDown}
-        );
+                    role="menuitem"
-      } else {
+                    href={item.url}
-        return (
+                    className="p-ripple"
-          <li className={styleClass} key={i} role="none">
+                    onClick={(e) => onMenuItemClick(e, item, i)}
-            {renderLink(item, i)}
+                    target={item.target}
-            <CSSTransition
+                >
-              classNames="layout-submenu-wrapper"
+                    {content}
-              timeout={{ enter: 1000, exit: 450 }}
+                </a>
-              in={active}
+            );
-              unmountOnExit
+        }
-            >
+    };
-              <AppSubmenu
-                items={item.items}
-                onMenuItemClick={props.onMenuItemClick}
-              />
-            </CSSTransition>
-          </li>
-        );
-      }
-    });
 
-  return items ? (
+    let items =
-    <ul className={props.className} role="menu">
+        props.items &&
-      {items}
+        props.items.map((item, i) => {
-    </ul>
+            let active = activeIndex === i;
-  ) : null;
+            let styleClass = classNames(item.badgeStyleClass, {
+                'layout-menuitem-category': props.root,
+                'active-menuitem': active && !item.to,
+            });
+
+            if (props.root) {
+                return (
+                    <li className={styleClass} key={i} role="none">
+                        {props.root === true && (
+                            <React.Fragment>
+                                <div
+                                    className="layout-menuitem-root-text"
+                                    aria-label={item.label}
+                                >
+                                    {item.label}
+                                </div>
+                                <AppSubmenu
+                                    items={item.items}
+                                    onMenuItemClick={props.onMenuItemClick}
+                                />
+                            </React.Fragment>
+                        )}
+                    </li>
+                );
+            } else {
+                return (
+                    <li className={styleClass} key={i} role="none">
+                        {renderLink(item, i)}
+                        <CSSTransition
+                            classNames="layout-submenu-wrapper"
+                            timeout={{ enter: 1000, exit: 450 }}
+                            in={active}
+                            unmountOnExit
+                        >
+                            <AppSubmenu
+                                items={item.items}
+                                onMenuItemClick={props.onMenuItemClick}
+                            />
+                        </CSSTransition>
+                    </li>
+                );
+            }
+        });
+
+    return items ? (
+        <ul className={props.className} role="menu">
+            {items}
+        </ul>
+    ) : null;
 };
 
 export const AppMenu = (props) => {
-  return (
+    return (
-    <div className="layout-menu-container">
+        <div className="layout-menu-container">
-      <AppSubmenu
+            <AppSubmenu
-        items={props.model}
+                items={props.model}
-        className="layout-menu"
+                className="layout-menu"
-        onMenuItemClick={props.onMenuItemClick}
+                onMenuItemClick={props.onMenuItemClick}
-        root={true}
+                root={true}
-        role="menu"
+                role="menu"
-      />
+            />
-      <a
+           
-        href="https://www.primefaces.org/primeblocks-react"
+        </div>
-        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,46 +1,118 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
+import Cookies from 'universal-cookie';
+import { Button } from 'primereact/button';
+import { Menubar } from 'primereact/menubar';
+
+const cookies = new Cookies();
 
 export const AppTopbar = (props) => {
-  return (
+    const [logged, setLogged] = useState(null);
-    <div className="layout-topbar">
-      <Link to="/" className="layout-topbar-logo">
-        <img src={'assets/layout/images/logo-dark.svg'} alt="logo" />
-        <span>KATOIKIA</span>
-      </Link>
 
-      {/* <button type="button" className="p-link  layout-menu-button layout-topbar-button" onClick={props.onToggleMenuClick}>
+
+    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';
+    }
+
+    useEffect(() => {
+        if (cookies.get('email')) {
+            setLogged(true);
+        } else {
+            setLogged(false);
+        };
+    }, [])
+
+
+    const buttonLogout = () => {
+        return (
+            <>
+                <div className="my-2">
+                    <Button label="Cerrar Sesión"
+                        className="p-button-danger"
+                        onClick={cerrarSesion}
+                        disabled={logged} />
+                </div>
+            </>
+        )
+    }
+
+    const menuProfile = [
+        {
+            label: 'Perfil',
+            icon: 'pi pi-user',
+            items: [
+                {
+                    label: 'Cerrar Sesion',
+                    icon: 'pi pi-fw pi-lock',
+                }
+            ],
+        },
+    ]
+
+
+    return (
+        <div className="layout-topbar">
+            <Link to="/" className="layout-topbar-logo">
+                <img src={'images/Logo_Katoikia.svg'} alt="logo" />
+                <span>KATOIKIA</span>
+            </Link>
+
+            {/* <button type="button" className="p-link  layout-menu-button layout-topbar-button" onClick={props.onToggleMenuClick}>
                 <i className="pi pi-bars"/>
             </button> */}
 
-      <button
+            <button
-        type="button"
+                type="button"
-        className="p-link layout-topbar-menu-button layout-topbar-button"
+                className="p-link layout-topbar-menu-button layout-topbar-button"
-      >
+            >
-        <i className="pi pi-ellipsis-v" />
+                <i className="pi pi-ellipsis-v" />
-      </button>
+            </button>
 
-      <ul className="layout-topbar-menu lg:flex origin-top">
+            <ul className="layout-topbar-menu lg:flex origin-top">
-        {/* <li>
+                {/* <li>
                         <button className="p-link layout-topbar-button" onClick={props.onMobileSubTopbarMenuClick}>
                             <i className="pi pi-calendar"/>
                             <span>Events</span>
                         </button>
                     </li> */}
-        {/* <li>
+                {/* <li>
                         <button className="p-link layout-topbar-button" onClick={props.onMobileSubTopbarMenuClick}>
                             <i className="pi pi-cog"/>
                             <span>Settings</span>
                         </button>
                     </li> */}
-        <li>
+                <li className='mx-2' hidden={!logged}>
-          <button className="p-link layout-topbar-button">
+                    <button className="p-link layout-topbar-button" >
-            <i className="pi pi-user" />
+                        <i className="pi pi-user" />
-            <span>Profile</span>
+                        <span>Perfil</span>
-          </button>
+                    </button>
-        </li>
+                </li>
-      </ul>
+                <li className='mx-2' hidden={!logged}>
-    </div>
+                    <button className="p-link layout-topbar-button" onClick={cerrarSesion} >
-  );
+                        <i className="pi pi-sign-out" />
-};
+                        <span>Cerrar Sesión</span>
+                    </button>
+                </li>
+                {/*
+                    <Menubar model={menuProfile} ></Menubar>
+
+
+                </li>
+                <li hidden={!logged}>
+                    <div className="my-2" >
+                        <Button label="Cerrar Sesión"
+                            className="p-button-danger"
+                            onClick={cerrarSesion}
+                        />
+                    </div>
+                </li>*/}
+            </ul>
+        </div>
+    );
+}

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { InputText } from 'primereact/inputtext';
-
-const LogIn = () => {
-  return (
-    <div className="grid">
-      <div className="col-12">
-        <div className="card">
-          <h5>Iniciar Sesión</h5>
-          <div className="p-fluid formgrid grid">
-            <div className="field col-12">
-              <label htmlFor="nombre">Correo electrónico</label>
-              <InputText id="nombre" type="text" />
-            </div>
-            <div className="field col-12 ">
-              <label htmlFor="apellidos">Contraseña</label>
-              <InputText id="apellidos" type="text" />
-            </div>
-
-            {/* <Button label="Registrar" onClick={registrarAdmin}></Button> */}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LogIn;
-
-/* image 1 */

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

@@ -0,0 +1,226 @@
+import React, { Component, Fragment, useRef } from 'react';
+import Cookies from 'universal-cookie';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+const baseUrl = "http://localhost:4000/user/loginUser";
+const cookies = new Cookies();
+
+class LogInUser extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            form: {
+                email: '',
+                password: ''
+            },
+            errorEmail: false,
+            errorPassword: false,
+            logged: null
+        }
+    }
+
+    handleChange = async e => {
+        await this.setState({
+            form: {
+                ...this.state.form,
+                [e.target.name]: e.target.value
+            }
+        });
+    }
+
+    validaciones = (data) => {
+        let error = false;
+        if (data.email == '') {
+            this.setState({
+                errorEmail: true
+            })
+            error = true;
+        } else {
+            this.setState({
+                errorEmail: false
+            })
+        }
+        if (data.password == '') {
+            this.setState({
+                errorPassword: true
+            })
+            error = true;
+        } else {
+            this.setState({
+                errorPassword: false
+            })
+        }
+
+        return error;
+
+    }
+
+    iniciarSesion = async () => {
+        const data = {
+            email: this.state.form.email,
+            password: this.state.form.password
+        }
+
+        console.log(data);
+
+        if (!this.validaciones(data)) {
+            this.setState({
+                email: true,
+                password: true
+            })
+            await fetch(baseUrl, {
+                cache: 'no-cache',
+                method: 'POST',
+                body: JSON.stringify(data),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+                .then(response => {
+                    if (response.status != 201)
+                        console.log('Ocurrió un error con el servicio: ' + response.status);
+                    else return response.json();
+                })
+                .then(response => {
+                    console.log(response.message);
+
+                    if (response.message) {
+                        const user = response.message;
+
+                        if(user.user_type == '1' || user.user_type == '2'){
+                            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}`);
+                            document.getElementById('notification').hidden = true;
+                            document.getElementById('notification2').hidden = false;
+    
+                            document.getElementById("message2").innerHTML = `Bienvenido ${user.name}`;
+    
+                            window.location.href = "/";
+                        }
+                        window.location.href = "/page404";
+
+                       
+                    } else {
+                        document.getElementById('notification2').hidden = true;
+                        document.getElementById('notification').hidden = false;
+
+                        //alert('El usuario o la contraseña no son correctos');
+                        document.getElementById("message").innerHTML = "El usuario o la contraseña son incorrectos";
+                    }
+                })
+                .catch(error => {
+                    console.log(error);
+                })
+        }
+    }
+
+    componentDidMount() {
+        if (cookies.get('email')) {
+            window.location.href = "/";
+        }
+    }
+
+    renderErrorMessage = (name) =>
+        name === this.state.errorMessages.name && (
+            <div className="error">{this.state.errorMessages.message}</div>
+        );
+
+    errors = {
+        email: "Correo requerido",
+        pass: "Contraseña requerida"
+    };
+
+    render() {
+        return (
+
+            <Fragment>
+
+
+                <div className="grid ">
+                    <div className="col-10 xl:col-8">
+                        <div id="notification" className="p-message p-message-error" hidden={true} >
+                            <div className="card">
+                                <h5 className='card-header' id="message">
+                                </h5>
+                            </div>
+                        </div>
+                        <div id="notification2" className="p-message p-message-success" hidden={true} >
+                            <div className="card">
+                                <h5 className='card-header' id="message2">
+                                </h5>
+                            </div>
+                        </div>
+
+
+                    </div>
+                    <div className="col-10 xl:col-8">
+
+                        <div className="card">
+                            <h5 className='card-header'>Iniciar Sesión</h5>
+                            <div className="p-fluid formgrid grid">
+
+                                <div className="field col-12 md:col-12">
+                                    <label htmlFor="email">Correo electrónico</label>
+                                    <div className="p-0 col-12 md:col-12">
+                                        <div className="p-inputgroup">
+                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                                <i className="pi pi-user"></i>
+                                            </span>
+                                            <InputText id="email"
+                                                type="email"
+                                                name="email"
+                                                onChange={this.handleChange}
+                                                placeholder='Correo electrónico'
+                                                className={this.state.errorEmail ? 'p-invalid' : ''}
+
+                                            />
+                                        </div>
+                                        {this.state.errorEmail && (
+                                            <small className="p-invalid">Correo electrónico es requerido</small>
+                                        )}
+
+                                    </div>
+                                </div>
+                                <div className="field col-12 md:col-12">
+                                    <label htmlFor="v">Contraseña</label>
+                                    <div className="p-0 col-12 md:col-12">
+                                        <div className="p-inputgroup">
+                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                                <i className="pi pi-lock"></i>
+                                            </span>
+                                            <InputText id="password"
+                                                type="password"
+                                                name="password"
+                                                onChange={this.handleChange}
+                                                placeholder='Contraseña'
+                                                className={this.state.errorPassword ? 'p-invalid' : ''}
+                                            />
+                                        </div>
+                                        {this.state.errorPassword && (
+                                            <small className="p-invalid">Contraseña es requerida</small>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <Button label="Iniciar sesión" type="button" onClick={() => this.iniciarSesion()}></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Fragment>
+
+
+
+        );
+    }
+}
+
+export default LogInUser;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+
+const Page404 = () => {
+
+    return (
+        <div className="col-12 xl:col-12">
+            <div className="card">
+                <div className="surface-section px-4 py-8 md:px-6 lg:px-8">
+                    <div className="text-700 text-center">
+                        <div className="text-900 font-bold text-5xl mb-3">404</div>
+                        <div className="text-700 text-2xl mb-5">No se encuentra la página</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default React.memo(Page404)

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

@@ -7,6 +7,8 @@ import { HashRouter } from 'react-router-dom';
 import ScrollToTop from './ScrollToTop';
 import { CookiesProvider } from "react-cookie";
 
+
+
 ReactDOM.render(
   <HashRouter>
     <ScrollToTop>