agregar funcionalidades de validaciones en login
This commit is contained in:
parent
3fc01cc033
commit
59c0ced918
|
@ -198,11 +198,26 @@ const App = () => {
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const menuLogin = [
|
||||||
|
{
|
||||||
|
label: 'Inicio',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Inicio de sesion',
|
||||||
|
icon: PrimeIcons.BUILDING,
|
||||||
|
to: '/login'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
function menu4() {
|
function menu4() {
|
||||||
if (cookies.type == '1') {
|
if (cookies.type == '1') {
|
||||||
return menu2;
|
return menu2;
|
||||||
} else if (cookies.type == '2') {
|
} else if (cookies.type == '2') {
|
||||||
return menu3;
|
return menu3;
|
||||||
|
} else {
|
||||||
|
return menuLogin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -395,9 +410,10 @@ const App = () => {
|
||||||
|
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path="/login" component={LoginLocalStorage} />
|
|
||||||
|
|
||||||
<div className={wrapperClass} onClick={onWrapperClick}>
|
<div className={wrapperClass} onClick={onWrapperClick}>
|
||||||
|
|
||||||
|
|
||||||
<Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />
|
<Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />
|
||||||
|
|
||||||
<AppTopbar onToggleMenuClick={onToggleMenuClick} layoutColorMode={layoutColorMode}
|
<AppTopbar onToggleMenuClick={onToggleMenuClick} layoutColorMode={layoutColorMode}
|
||||||
|
@ -409,8 +425,9 @@ const App = () => {
|
||||||
|
|
||||||
<div className="layout-main-container">
|
<div className="layout-main-container">
|
||||||
<div className="layout-main">
|
<div className="layout-main">
|
||||||
|
<Route path="/login" exact component={LoginLocalStorage} />
|
||||||
<Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
|
<Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
|
||||||
|
|
||||||
<Route path="/formlayout" component={FormLayoutDemo} />
|
<Route path="/formlayout" component={FormLayoutDemo} />
|
||||||
<Route path="/input" component={InputDemo} />
|
<Route path="/input" component={InputDemo} />
|
||||||
<Route path="/floatlabel" component={FloatLabelDemo} />
|
<Route path="/floatlabel" component={FloatLabelDemo} />
|
||||||
|
@ -439,15 +456,12 @@ const App = () => {
|
||||||
<Route path="/comunidadesViviendas" component={Communities} />
|
<Route path="/comunidadesViviendas" component={Communities} />
|
||||||
<Route path="/inquilinos" component={Inquilinos} />
|
<Route path="/inquilinos" component={Inquilinos} />
|
||||||
<Route path="/areasComunes" component={AreasComunes} />
|
<Route path="/areasComunes" component={AreasComunes} />
|
||||||
<Route path="/login" component={LoginLocalStorage} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AppFooter layoutColorMode={layoutColorMode} />
|
<AppFooter layoutColorMode={layoutColorMode} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AppConfig rippleEffect={ripple} onRippleEffect={onRipple} inputStyle={inputStyle} onInputStyleChange={onInputStyleChange}
|
<AppConfig />
|
||||||
layoutMode={layoutMode} onLayoutModeChange={onLayoutModeChange} layoutColorMode={layoutColorMode} onColorModeChange={onColorModeChange} />
|
|
||||||
|
|
||||||
<CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
|
<CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
|
||||||
<div className="layout-mask p-component-overlay"></div>
|
<div className="layout-mask p-component-overlay"></div>
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
import React from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Cookies from 'universal-cookie';
|
import Cookies from 'universal-cookie';
|
||||||
|
import { Button } from 'primereact/button';
|
||||||
|
import { Menubar } from 'primereact/menubar';
|
||||||
|
|
||||||
const cookies = new Cookies();
|
const cookies = new Cookies();
|
||||||
|
|
||||||
export const AppTopbar = (props) => {
|
export const AppTopbar = (props) => {
|
||||||
|
const [logged, setLogged] = useState(null);
|
||||||
|
|
||||||
|
|
||||||
function cerrarSesion() {
|
function cerrarSesion() {
|
||||||
|
@ -17,10 +20,46 @@ export const AppTopbar = (props) => {
|
||||||
window.location.href = '/login';
|
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 (
|
return (
|
||||||
<div className="layout-topbar">
|
<div className="layout-topbar">
|
||||||
<Link to="/" className="layout-topbar-logo">
|
<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>
|
<span>KATOIKIA</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
@ -48,13 +87,31 @@ export const AppTopbar = (props) => {
|
||||||
<span>Settings</span>
|
<span>Settings</span>
|
||||||
</button>
|
</button>
|
||||||
</li> */}
|
</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>
|
||||||
<button type="button" onClick={() => cerrarSesion()}>Logout</button>
|
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,20 +1,25 @@
|
||||||
import DashboardAdmin from "./DashboardAdmin";
|
import DashboardAdmin from "./DashboardAdmin";
|
||||||
import React, { Component, Fragment } from 'react';
|
import React, { Component, Fragment, useRef } from 'react';
|
||||||
import Cookies from 'universal-cookie';
|
import Cookies from 'universal-cookie';
|
||||||
import { InputText } from 'primereact/inputtext';
|
import { InputText } from 'primereact/inputtext';
|
||||||
import { Button } from 'primereact/button';
|
import { Button } from 'primereact/button';
|
||||||
|
import { Toast } from 'primereact/toast';
|
||||||
|
|
||||||
const baseUrl = "http://localhost:4000/user/loginUser";
|
const baseUrl = "http://localhost:4000/user/loginUser";
|
||||||
const cookies = new Cookies();
|
const cookies = new Cookies();
|
||||||
|
|
||||||
|
|
||||||
class LoginLocalStorage extends Component {
|
class LoginLocalStorage extends Component {
|
||||||
state = {
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
form: {
|
form: {
|
||||||
email: '',
|
email: '',
|
||||||
password: ''
|
password: ''
|
||||||
},
|
},
|
||||||
errorMessages:{}
|
errorEmail: false,
|
||||||
|
errorPassword: false,
|
||||||
|
logged: null
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange = async e => {
|
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 () => {
|
iniciarSesion = async () => {
|
||||||
const data = {
|
const data = {
|
||||||
email: this.state.form.email,
|
email: this.state.form.email,
|
||||||
|
@ -34,6 +66,11 @@ class LoginLocalStorage extends Component {
|
||||||
|
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
|
||||||
|
if (!this.validaciones(data)) {
|
||||||
|
this.setState({
|
||||||
|
email: true,
|
||||||
|
password: true
|
||||||
|
})
|
||||||
await fetch(baseUrl, {
|
await fetch(baseUrl, {
|
||||||
cache: 'no-cache',
|
cache: 'no-cache',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
@ -43,10 +80,13 @@ class LoginLocalStorage extends Component {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => {
|
.then(response => {
|
||||||
return response.json();
|
if (response.status != 201)
|
||||||
|
console.log('Ocurrió un error con el servicio: ' + response.status);
|
||||||
|
else return response.json();
|
||||||
})
|
})
|
||||||
.then(response => {
|
.then(response => {
|
||||||
console.log(response.message);
|
console.log(response.message);
|
||||||
|
|
||||||
if (response.message) {
|
if (response.message) {
|
||||||
const user = response.message;
|
const user = response.message;
|
||||||
cookies.set('id', user._id, { path: "/" });
|
cookies.set('id', user._id, { path: "/" });
|
||||||
|
@ -56,18 +96,35 @@ class LoginLocalStorage extends Component {
|
||||||
if (user.user_type != '1') {
|
if (user.user_type != '1') {
|
||||||
cookies.set('community_id', user.community_id, { path: "/" });
|
cookies.set('community_id', user.community_id, { path: "/" });
|
||||||
}
|
}
|
||||||
alert(`Bienvenido ${user.name}`);
|
// alert(`Bienvenido ${user.name}`);
|
||||||
window.location.href = "/";
|
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 {
|
} else {
|
||||||
alert('El usuario o la contraseña no son correctos');
|
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 => {
|
.catch(error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -91,31 +148,71 @@ class LoginLocalStorage extends Component {
|
||||||
|
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
|
||||||
<div className="login-wrapper">
|
|
||||||
|
|
||||||
<div className="grid form justify-content-center my-5">
|
<div className="grid ">
|
||||||
<div className="col-5">
|
<div className="col-10 xl:col-8">
|
||||||
|
<div id="notification" className="p-message p-message-error" hidden={true} >
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<h5>Iniciar Sesión</h5>
|
<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="p-fluid formgrid grid">
|
||||||
<div className="field col-12">
|
|
||||||
|
<div className="field col-12 md:col-12">
|
||||||
<label htmlFor="email">Correo electrónico</label>
|
<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"
|
<InputText id="email"
|
||||||
type="email"
|
type="email"
|
||||||
name="email"
|
name="email"
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
placeholder='Correo electrónico' />
|
placeholder='Correo electrónico'
|
||||||
{this.renderErrorMessage("email")}
|
className={this.state.errorEmail ? 'p-invalid' : ''}
|
||||||
|
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="field col-12 ">
|
{this.state.errorEmail && (
|
||||||
<label htmlFor="password">Contraseña</label>
|
<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"
|
<InputText id="password"
|
||||||
type="password"
|
type="password"
|
||||||
name="password"
|
name="password"
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
placeholder='Contraseña'
|
placeholder='Contraseña'
|
||||||
|
className={this.state.errorPassword ? 'p-invalid' : ''}
|
||||||
/>
|
/>
|
||||||
{this.renderErrorMessage("password")}
|
</div>
|
||||||
|
{this.state.errorPassword && (
|
||||||
|
<small className="p-invalid">Contraseña es requerida</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button label="Iniciar sesión" type="button" onClick={() => this.iniciarSesion()}></Button>
|
<Button label="Iniciar sesión" type="button" onClick={() => this.iniciarSesion()}></Button>
|
||||||
|
@ -123,7 +220,6 @@ class LoginLocalStorage extends Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue