add pagina 404

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

@@ -53,8 +53,8 @@ import './App.scss';
 import { PrimeIcons } from 'primereact/api';
 import AreasComunes from './components/AreasComunes';
 import { useCookies } from "react-cookie";
-import Login from './components/Login';
+import LogInUser from './components/LogInUser';
-
+import Page404 from './components/Page404'
 
 
 const App = () => {
@@ -69,6 +69,7 @@ const App = () => {
     const copyTooltipRef = useRef();
     const location = useLocation();
     const [cookies, setCookies] = useCookies();
+    const [logged, setLogged] = useState()
 
     PrimeReact.ripple = true;
 
@@ -89,6 +90,12 @@ const App = () => {
             copyTooltipRef.current.updateTargetEvents();
     }, [location]);
 
+
+
+
+
+
+
     const onInputStyleChange = (inputStyle) => {
         setInputStyle(inputStyle);
     };
@@ -405,6 +412,9 @@ const App = () => {
         'layout-theme-light': layoutColorMode === 'light',
     });
 
+
+
+
     return (
 
         <BrowserRouter>
@@ -424,7 +434,50 @@ const App = () => {
 
                     <div className="layout-main-container">
                         <div className="layout-main">
-                            <Route path="/login" exact component={Login} />
+                            {(() => {
+                                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} />
@@ -449,12 +502,15 @@ const App = () => {
                                             <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="/areasComunes" component={AreasComunes} />
+
+                                }
+                            })()}
+
                         </div>
 
                         <AppFooter layoutColorMode={layoutColorMode} />

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

@@ -2,11 +2,12 @@ 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 Login extends Component {
+class LogInUser extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -30,7 +31,7 @@ class Login extends Component {
     }
 
     validaciones = (data) => {
-        let error = true;
+        let error = false;
         if (data.email == '') {
             this.setState({
                 errorEmail: true
@@ -87,6 +88,8 @@ class Login extends Component {
 
                     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: "/" });
@@ -101,6 +104,10 @@ class Login extends Component {
                             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;
@@ -216,4 +223,4 @@ class Login extends Component {
     }
 }
 
-export default Login;
+export default LogInUser;

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

@@ -1,231 +0,0 @@
-import DashboardAdmin from "./DashboardAdmin";
-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 LoginLocalStorage 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 = true;
-        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;
-                        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}`;
-
-                        //document.getElementById("message").remove('p-message p-message-error')
-                        // document.getElementById("message").append(`Bienvenido ${user.name}`);
-                        // document.getElementById("message").classList('p-message p-message-success')
-                        // window.location.href = "/";
-
-
-                    } 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";
-                        // document.getElementById("message").remove('p-message p-message-success')
-                        // document.getElementById("message").append('El usuario o la contraseña son incorrectos');
-                        // document.getElementById("message").add.className('p-message p-message-error')
-                    }
-                })
-                .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 LoginLocalStorage;

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

@@ -1,102 +0,0 @@
-import React, { Component } from 'react';
-import Cookies from 'universal-cookie';
-import AdministradoresComunidad from '../components/AdministradoresComunidad';
-import AdministradoresSistema from '../components/AdministradoresSistema';
-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();
-
-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: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas' },
-        ]
-    },
-];
-
-class MenuAdmin 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.state.overlayMenuActive = false;
-            this.state.mobileMenuActive = false;  
-            this.setState({
-                overlayMenuActive: true,
-                mobileMenuActive:false
-            })
-        
-        }
-    }
-
-    cerrarSesion = () => {
-        cookies.remove('id', { path: "/" });
-        cookies.remove('email', { path: "/" });
-        cookies.remove('name', { path: "/" });
-        cookies.remove('type', { path: "/" });
-        window.location.href = '/login';
-    }
-
-    componentDidMount() {
-        if (!cookies.get('email')) {
-            window.location.href = "/login";
-        } 
-    }
-
-    render() {
-
-        return (
-            <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 exact path="/administradoresSistema" component={AdministradoresSistema} />
-                        <Route path="/administradoresComunidad" component={AdministradoresComunidad} />
-                        <Route path="/comunidadesViviendas" component={Communities} />
-                    </div>
-
-                </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>
-        );
-    }
-}
-
-export default MenuAdmin;

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

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

web-ui/web-react/src/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)