katoikia-app/mobile-ui/components/LogIn.js

269 lines
6.8 KiB
JavaScript
Raw Normal View History

2022-08-22 20:22:27 +00:00
import React, { useContext, useState } from "react";
2022-08-18 22:02:50 +00:00
import Cookies from 'universal-cookie';
import {
Text,
Link,
Center,
Heading,
VStack,
Box,
FormControl,
Button,
2022-08-26 14:36:55 +00:00
Image,
ErrorMessage
} from "native-base";
import logo from "../assets/logo-katoikia.png";
2022-08-22 20:22:27 +00:00
import { Entypo } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
2022-08-16 05:16:44 +00:00
import { View, TextInput, StyleSheet } from "react-native";
2022-08-22 20:22:27 +00:00
import { UserContext } from "../context/UserContext";
import { API } from "../environment/api";
2022-08-16 05:16:44 +00:00
2022-08-22 20:22:27 +00:00
const baseURL = `${API.BASE_URL}/user/loginUser`;
2022-08-18 22:02:50 +00:00
2022-08-22 20:22:27 +00:00
export default function LogIn({ navigation }) {
2022-08-16 05:16:44 +00:00
2022-08-22 20:22:27 +00:00
const { addUser } = useContext(UserContext);
2022-08-25 21:41:02 +00:00
const [errors, setErrors] = useState({});
2022-08-19 04:52:54 +00:00
2022-08-22 20:22:27 +00:00
const [credentials, setCredentials] = useState({
2022-08-26 21:01:29 +00:00
email: "lalo@lalo.com",
password: "12345"
2022-08-22 20:22:27 +00:00
});
2022-08-16 20:27:34 +00:00
2022-08-22 20:22:27 +00:00
const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value }))
2022-08-19 04:23:54 +00:00
2022-08-25 21:41:02 +00:00
const validate = async() => {
if( credentials.email === "" && credentials.password === ""){
setErrors({ ...errors,
email: 'Debe ingresar un correo electrónico',
password: 'Debe ingresar una contraseña'
});
return false;
}else if (credentials.password === "") {
setErrors({ ...errors,
password: 'Debe ingresar una contraseña'
});
return false;
} else if(credentials.email === ""){
setErrors({ ...errors,
email: 'Debe ingresar un correo electrónico'
});
return false;
}
return true;
}
2022-08-22 20:22:27 +00:00
const iniciarSesion = async () => {
2022-08-25 21:41:02 +00:00
const error = await validate();
console.log(error);
if (error) {
2022-08-21 23:25:22 +00:00
try {
await fetch(baseURL, {
cache: 'no-cache',
method: 'POST',
2022-08-22 20:22:27 +00:00
body: JSON.stringify(credentials),
2022-08-21 23:25:22 +00:00
headers: {
'Content-Type': 'application/json'
2022-08-18 22:02:50 +00:00
}
2022-08-21 23:25:22 +00:00
})
.then(response => {
if (response.status != 201){
console.log('ocurrio un error ');
}else{
return response.json();
}
})
.then( response => {
2022-08-18 22:02:50 +00:00
2022-08-23 04:20:07 +00:00
// inqulino 4 y guarda 3
2022-08-21 23:25:22 +00:00
const user = response.message
2022-08-26 14:36:55 +00:00
if(user !== null){
2022-08-21 23:25:22 +00:00
if(user.user_type == '4'){
2022-08-23 00:10:59 +00:00
addUser(user);
2022-08-21 23:25:22 +00:00
2022-08-22 20:09:33 +00:00
navigation.navigate('Comunicados', {user})
2022-08-21 23:25:22 +00:00
}else if(user.user_type == '3'){
2022-08-22 20:22:27 +00:00
addUser(user);
// cambiar por ComunicadosGuarda luego
2022-08-23 00:10:59 +00:00
navigation.navigate('Comunicados', {user})
2022-08-21 23:25:22 +00:00
}
2022-08-26 14:36:55 +00:00
}else{
setErrors({ ...errors,
user: 'Debe ingresar credenciales válidos'
});
}
2022-08-21 23:25:22 +00:00
})
} catch (error) {
console.log("ERROR: " +error);
2022-08-26 14:36:55 +00:00
2022-08-21 23:25:22 +00:00
}
2022-08-25 21:41:02 +00:00
}
console.log(errors);
2022-08-21 23:25:22 +00:00
}
2022-08-18 22:02:50 +00:00
return (
2022-08-18 22:02:50 +00:00
2022-08-25 21:41:02 +00:00
<Center w="100%" flex={1}>
2022-08-22 20:22:27 +00:00
<Box safeArea p="2" py="8" w="90%" maxW="290">
<Center>
<Image source={
logo
} width={500} height={550} m='2'
alt="Katoikia logo" size="xl" justifyContent="center" />
</Center>
<Heading
size="lg"
fontWeight="600"
color="coolGray.800"
_dark={{
color: "warmGray.50",
}}
>
Bienvenido a Katoikia
</Heading>
<Heading
mt="1"
_dark={{
color: "warmGray.200",
}}
color="coolGray.600"
fontWeight="medium"
size="xs"
>
Su app de comunidad de confianza
</Heading>
<View style={styles.container}>
2022-08-25 21:41:02 +00:00
<VStack width="90%" mx="3" maxW="300px" mb={10}>
<FormControl isRequired isInvalid={'email' in errors}>
2022-08-22 20:09:33 +00:00
<FormControl.Label Text='bold'> Correo Electrónico </FormControl.Label>
2022-08-13 03:56:58 +00:00
2022-08-22 20:22:27 +00:00
<View style={styles.viewSection}>
<Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
2022-08-25 21:41:02 +00:00
<TextInput
2022-08-22 20:22:27 +00:00
name='email'
type="text"
2022-08-26 14:36:55 +00:00
style={'email' in errors ? styles.errorMessage : styles.input}
2022-08-22 20:22:27 +00:00
value={credentials.email}
placeholder='Correo electrónico'
onChangeText={onHandleChange("email")} />
2022-08-25 21:41:02 +00:00
2022-08-13 03:56:58 +00:00
</View>
2022-08-25 21:41:02 +00:00
{'email' in errors && <FormControl.ErrorMessage _text={{
fontSize: 'xs'
}}>Debe ingresar un correo electrónico</FormControl.ErrorMessage> }
</FormControl>
2022-08-26 14:36:55 +00:00
2022-08-25 21:41:02 +00:00
<FormControl isRequired isInvalid={'password' in errors}>
2022-08-22 20:22:27 +00:00
<FormControl.Label Text='bold'> Contraseña </FormControl.Label>
<View style={styles.viewSection}>
<MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle} />
<TextInput
name='password'
type="password"
2022-08-26 14:36:55 +00:00
style={'password' in errors ? styles.errorMessage : styles.input}
2022-08-22 20:22:27 +00:00
value={credentials.password}
placeholder='Contraseña'
onChangeText={onHandleChange("password")} />
2022-08-25 21:41:02 +00:00
2022-08-22 20:22:27 +00:00
</View>
2022-08-25 21:41:02 +00:00
{'password' in errors && <FormControl.ErrorMessage _text={{
fontSize: 'xs'
}}
>Debe ingresar una contraseña</FormControl.ErrorMessage> }
<Link
_text={{
fontSize: "xs",
fontWeight: "500",
color: "indigo.500",
2022-08-18 22:02:50 +00:00
marginTop: "10"
}}
alignSelf="flex-end"
mt="1"
onPress={() => navigation.navigate('Password')}
2022-08-22 20:22:27 +00:00
>
2022-08-22 20:22:27 +00:00
Recuperar contraseña
</Link>
</FormControl>
2022-08-22 20:22:27 +00:00
<Button mt="2" backgroundColor="#D7A86E" onPress={iniciarSesion}
>
<Text>Continuar</Text>
</Button>
2022-08-26 14:36:55 +00:00
{/* {'user' in errors && <ErrorMessage _text={{
fontSize: 'xs'
}}
>Debe ingresar credenciales válidos</ErrorMessage> } */}
2022-08-22 20:22:27 +00:00
2022-08-16 20:27:34 +00:00
</VStack></View>
2022-08-22 20:22:27 +00:00
</Box>
</Center>
);
2022-08-22 20:22:27 +00:00
2022-08-21 23:25:22 +00:00
}
2022-08-16 05:16:44 +00:00
2022-08-21 23:25:22 +00:00
const styles = StyleSheet.create({
input: {
height: 40,
margin: 10,
borderWidth: 0.5,
padding: 5,
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingLeft: 0,
2022-08-22 20:22:27 +00:00
marginTop: 50,
2022-08-21 23:25:22 +00:00
borderRadius: 4
2022-08-22 20:22:27 +00:00
},
2022-08-25 21:41:02 +00:00
errorMessage: {
height: 40,
margin: 10,
2022-08-26 14:36:55 +00:00
borderWidth: 0.5,
2022-08-25 21:41:02 +00:00
padding: 5,
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingLeft: 0,
2022-08-26 14:36:55 +00:00
marginTop: 50,
borderRadius: 4,
borderColor: '#be123c'
2022-08-25 21:41:02 +00:00
},
2022-08-16 05:16:44 +00:00
2022-08-21 23:25:22 +00:00
iconStyle: {
paddingBottom: 20,
2022-08-22 20:22:27 +00:00
marginTop: 3,
2022-08-21 23:25:22 +00:00
paddingTop: 35
2022-08-22 20:22:27 +00:00
},
2022-08-21 23:25:22 +00:00
viewSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
2022-08-26 14:36:55 +00:00
marginBottom: 50
2022-08-21 23:25:22 +00:00
},
container: {
2022-08-25 21:41:02 +00:00
marginBottom: 6
2022-08-21 23:25:22 +00:00
}
2022-08-22 20:22:27 +00:00
})