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

202 lines
4.9 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-17 16:36:33 +00:00
Image
} 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-19 04:52:54 +00:00
2022-08-22 20:22:27 +00:00
const [credentials, setCredentials] = useState({
2022-08-23 01:31:42 +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-22 20:22:27 +00:00
const iniciarSesion = async () => {
2022-08-21 23:25:22 +00:00
try {
2022-08-23 00:10:59 +00:00
console.log(baseURL);
2022-08-21 23:25:22 +00:00
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
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);
2022-08-23 00:10:59 +00:00
navigation.navigate('Comunicados', {user})
2022-08-21 23:25:22 +00:00
}
})
} catch (error) {
console.log("ERROR: " +error);
}
2022-08-22 20:22:27 +00:00
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-22 20:22:27 +00:00
<Center w="100%">
<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}>
<VStack space={3} mt="5">
2022-08-19 04:59:56 +00:00
<FormControl isRequired >
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} />
<TextInput
name='email'
type="text"
style={styles.input}
value={credentials.email}
placeholder='Correo electrónico'
onChangeText={onHandleChange("email")} />
2022-08-13 03:56:58 +00:00
</View>
2022-08-22 20:22:27 +00:00
</FormControl>
2022-08-19 04:23:54 +00:00
<FormControl isRequired>
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"
style={styles.input}
value={credentials.password}
placeholder='Contraseña'
onChangeText={onHandleChange("password")} />
</View>
<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-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,
paddingBottom: 10,
paddingLeft: 0,
2022-08-22 20:22:27 +00:00
marginTop: 50,
marginBottom: 10,
2022-08-21 23:25:22 +00:00
borderRadius: 4
2022-08-22 20:22:27 +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',
marginBottom: 28
},
container: {
}
2022-08-22 20:22:27 +00:00
})