eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

format

This commit is contained in:
Eduardo Quiros 2022-08-30 18:40:31 -06:00
parent d409dedef8
commit 3df047c532
No known key found for this signature in database
GPG Key ID: B77F36C3F12720B4
1 changed files with 210 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
web-ui/web-react/src/components/LogInUser.js
View File

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