From 59c0ced9184fbedf5993a0a6af8d64de45b46428 Mon Sep 17 00:00:00 2001 From: Mariela Date: Fri, 12 Aug 2022 18:40:26 -0600 Subject: [PATCH] agregar funcionalidades de validaciones en login --- web-ui/web-react/src/App.js | 94 ++++--- web-ui/web-react/src/AppTopbar.js | 89 +++++-- .../src/components/LoginLocalStorage.js | 234 ++++++++++++------ 3 files changed, 292 insertions(+), 125 deletions(-) diff --git a/web-ui/web-react/src/App.js b/web-ui/web-react/src/App.js index b5137fb9..c1db2858 100644 --- a/web-ui/web-react/src/App.js +++ b/web-ui/web-react/src/App.js @@ -174,7 +174,7 @@ const App = () => { label: 'Inicio', items: [ { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }, - { label: 'Administradores del sistema',icon: PrimeIcons.USERS, to: '/administradoresSistema' }, + { 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' }, ] @@ -198,11 +198,26 @@ const App = () => { }, ] + 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; } } @@ -210,39 +225,39 @@ const App = () => { { label: 'Inicio', items: - [ - { - 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 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: 'UI Components', @@ -395,9 +410,10 @@ const App = () => { -
+ + {
- + } /> + @@ -439,15 +456,12 @@ const App = () => { - -
- +
diff --git a/web-ui/web-react/src/AppTopbar.js b/web-ui/web-react/src/AppTopbar.js index be2a90bf..f9226f50 100644 --- a/web-ui/web-react/src/AppTopbar.js +++ b/web-ui/web-react/src/AppTopbar.js @@ -1,14 +1,17 @@ -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() { + + function cerrarSesion() { cookies.remove('id', { path: "/" }); cookies.remove('email', { path: "/" }); cookies.remove('name', { path: "/" }); @@ -17,10 +20,46 @@ export const AppTopbar = (props) => { window.location.href = '/login'; } + useEffect(() => { + if (cookies.get('email')) { + setLogged(true); + } else { + setLogged(false); + }; + }, []) + + + const buttonLogout = () => { + return ( + <> +
+
+ + ) + } + + const menuProfile = [ + { + label: 'Perfil', + icon: 'pi pi-user', + items: [ + { + label: 'Cerrar Sesion', + icon: 'pi pi-fw pi-lock', + } + ], + }, + ] + + return (
- logo + logo KATOIKIA @@ -28,33 +67,51 @@ export const AppTopbar = (props) => { */} - + -
    - {/*
  • +
      + {/*
      • */} - {/*
    • + {/*
      • */} -
    • +
      • + + {/* + + + + + */}
); diff --git a/web-ui/web-react/src/components/LoginLocalStorage.js b/web-ui/web-react/src/components/LoginLocalStorage.js index 4e3fa806..fbd74f0f 100644 --- a/web-ui/web-react/src/components/LoginLocalStorage.js +++ b/web-ui/web-react/src/components/LoginLocalStorage.js @@ -1,20 +1,25 @@ import DashboardAdmin from "./DashboardAdmin"; -import React, { Component, Fragment } from 'react'; +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 { - state = { - form: { - email: '', - password: '' - }, - errorMessages:{} + constructor(props) { + super(props); + this.state = { + form: { + email: '', + password: '' + }, + errorEmail: false, + errorPassword: false, + logged: null + } } handleChange = async e => { @@ -26,6 +31,33 @@ class LoginLocalStorage extends Component { }); } + 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, @@ -34,40 +66,65 @@ class LoginLocalStorage extends Component { console.log(data); - await fetch(baseUrl, { - cache: 'no-cache', - method: 'POST', - body: JSON.stringify(data), - headers: { - 'Content-Type': 'application/json' - } - }) - .then(response => { - return response.json(); + if (!this.validaciones(data)) { + this.setState({ + email: true, + password: true }) - .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}`); - window.location.href = "/"; - } else { - alert('El usuario o la contraseña no son correctos'); + await fetch(baseUrl, { + cache: 'no-cache', + method: 'POST', + body: JSON.stringify(data), + headers: { + 'Content-Type': 'application/json' } }) - .catch(error => { - console.log(error); - }) + .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() { @@ -77,49 +134,88 @@ class LoginLocalStorage extends Component { } renderErrorMessage = (name) => - name === this.state.errorMessages.name && ( -
{this.state.errorMessages.message}
- ); + name === this.state.errorMessages.name && ( +
{this.state.errorMessages.message}
+ ); - errors = { - email: "Correo requerido", - pass: "Contraseña requerida" - }; + errors = { + email: "Correo requerido", + pass: "Contraseña requerida" + }; render() { return ( - -
-
-
+ +
+
+ +
+ +
+
Iniciar Sesión
+
+ +
+ +
+
+ + + + +
+ {this.state.errorEmail && ( + Correo electrónico es requerido + )} + +
+
+ +
+
+ + + + +
+ {this.state.errorPassword && ( + Contraseña es requerida + )} +
+
+ +