Merge pull request #166 from DeimosPr4/UH-iniciarsesionV2

login frontend

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

@@ -7157,3 +7157,10 @@
     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,13 +50,16 @@ 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 [layoutColorMode, setLayoutColorMode] = useState('light');
+    const [layoutColorMode, setLayoutColorMode] = useState('light')
     const [inputStyle, setInputStyle] = useState('outlined');
     const [ripple, setRipple] = useState(true);
     const [staticMenuInactive, setStaticMenuInactive] = useState(false);
@@ -65,6 +68,8 @@ const App = () => {
     const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
     const copyTooltipRef = useRef();
     const location = useLocation();
+    const [cookies, setCookies] = useCookies();
+    const [logged, setLogged] = useState()
 
     PrimeReact.ripple = true;
 
@@ -85,6 +90,12 @@ const App = () => {
             copyTooltipRef.current.updateTargetEvents();
     }, [location]);
 
+
+
+
+
+
+
     const onInputStyleChange = (inputStyle) => {
         setInputStyle(inputStyle);
     };
@@ -164,11 +175,63 @@ const App = () => {
         return window.innerWidth >= 992;
     };
 
-  const menu = [
+    const menu2 = [
         {
-      label: 'Home',
+            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;
+        }
+    }
+
+    const menu = [
+        {
+            label: 'Inicio',
+            items:
+                [
                     {
                         label: 'Administradores del sistema',
                         icon: PrimeIcons.USERS,
@@ -349,41 +412,74 @@ const App = () => {
         '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}
+    return (
-        mobileTopbarMenuActive={mobileTopbarMenuActive}
+
-        onMobileTopbarMenuClick={onMobileTopbarMenuClick}
+        <BrowserRouter>
-        onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick}
+            <Switch>
-      />
+
+                <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
+                        <AppMenu model={menu4()} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
-          model={menu}
-          onMenuItemClick={onMenuItemClick}
-          layoutColorMode={layoutColorMode}
-        />
                     </div>
 
                     <div className="layout-main-container">
                         <div className="layout-main">
-          <Route
+                            {(() => {
-            path="/"
+                                if (!cookies.email) {
-            exact
+                                    return (
-            render={() => (
+                                        <>
-              <Dashboard colorMode={layoutColorMode} location={location} />
+
-            )}
+                                            <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} />
@@ -397,60 +493,40 @@ 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
+                                            <Route path="/chart" render={() => <ChartDemo colorMode={layoutColorMode} location={location} />} />
-            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} />
                     </div>
 
-      <AppConfig
+                    <AppConfig />
-        rippleEffect={ripple}
-        onRippleEffect={onRipple}
-        inputStyle={inputStyle}
-        onInputStyleChange={onInputStyleChange}
-        layoutMode={layoutMode}
-        onLayoutModeChange={onLayoutModeChange}
-        layoutColorMode={layoutColorMode}
-        onColorModeChange={onColorModeChange}
-      />
 
-      <CSSTransition
+                    <CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
-        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

@@ -157,20 +157,10 @@ export const AppMenu = (props) => {
                 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,12 +1,65 @@
-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) => {
+    const [logged, setLogged] = useState(null);
+
+
+    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={'assets/layout/images/logo-dark.svg'} alt="logo" />
+                <img src={'images/Logo_Katoikia.svg'} alt="logo" />
                 <span>KATOIKIA</span>
             </Link>
 
@@ -34,13 +87,32 @@ export const AppTopbar = (props) => {
                             <span>Settings</span>
                         </button>
                     </li> */}
-        <li>
+                <li className='mx-2' hidden={!logged}>
                     <button className="p-link layout-topbar-button" >
                         <i className="pi pi-user" />
-            <span>Profile</span>
+                        <span>Perfil</span>
                     </button>
                 </li>
+                <li className='mx-2' hidden={!logged}>
+                    <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>