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

284 lines
7.9 KiB
JavaScript
Raw Normal View History

2022-08-22 23:51:55 +00:00
import React, { useContext, useState } from "react";
2022-08-23 01:31:42 +00:00
import { API } from "../environment/api";
2022-08-17 16:36:33 +00:00
import {
2022-08-22 20:31:47 +00:00
Box, Button,
Center, FormControl, Heading, ScrollView, VStack
} from "native-base";
2022-09-01 04:14:08 +00:00
import { StyleSheet, TextInput, useWindowDimensions } from "react-native";
2022-08-22 20:31:47 +00:00
import { UserContext } from "../context/UserContext";
2022-08-25 02:38:31 +00:00
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
2022-08-29 23:15:46 +00:00
import { stringMd5 } from 'react-native-quick-md5';
2022-08-25 02:38:31 +00:00
2022-08-31 03:22:41 +00:00
2022-08-25 02:38:31 +00:00
const { Navigator, Screen } = createMaterialTopTabNavigator();
2022-08-22 20:09:33 +00:00
2022-08-22 20:31:47 +00:00
export default function Profile({ navigation }) {
2022-08-22 20:09:33 +00:00
2022-09-01 04:14:08 +00:00
const baseURL = `${API.BASE_URL}/user/updateUser/`
const [index, setIndex] = useState(0);
2022-08-25 02:38:31 +00:00
const layout = useWindowDimensions();
2022-08-23 01:31:42 +00:00
const userData = useContext(UserContext)
2022-08-31 04:50:25 +00:00
const [name, setName] = useState(userData.user.name);
const [apellido, setApellido] =useState(userData.user.last_name);
const [email, setEmail] = useState(userData.user.email);
const [password, setPassword] = useState();
2022-09-01 04:14:08 +00:00
const [confirmPassword, setConfirmPassword] = useState()
2022-08-22 20:38:18 +00:00
const id = userData.user._id;
2022-08-29 23:15:46 +00:00
const decode = userData.Password;
2022-08-31 03:22:41 +00:00
const [error, setError] = useState({})
2022-08-22 06:09:51 +00:00
2022-08-22 06:51:05 +00:00
console.log(userData.user);
2022-08-22 20:09:33 +00:00
2022-08-29 23:15:46 +00:00
const onHandleChangePassword = (value) => {
2022-08-30 03:08:02 +00:00
//console.log(value);
2022-08-29 23:15:46 +00:00
const dpassword = stringMd5(value)
console.log(dpassword);
2022-08-30 03:08:02 +00:00
2022-08-31 03:22:41 +00:00
console.log(userData.user.password);
if (userData.user.password == dpassword) {
2022-08-30 03:08:02 +00:00
console.log(true);
2022-08-31 04:50:25 +00:00
setError({});
2022-08-30 03:08:02 +00:00
}else{
console.log(false);
2022-08-31 03:22:41 +00:00
setError({ ...error,
password: 'La contraseña no coincide con la actual'
});
2022-08-30 03:08:02 +00:00
}
2022-08-29 23:15:46 +00:00
}
2022-08-25 02:38:31 +00:00
const ProfileView = () => (
2022-08-22 20:09:33 +00:00
<ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
2022-08-22 06:51:05 +00:00
px: "20px",
mb: "4",
minW: "72"
}}>
2022-08-17 21:08:38 +00:00
<Box safeArea p="2" w="90%" maxW="290" py="8">
<Heading size="lg" color="coolGray.800" _dark={{
color: "warmGray.50"
}} fontWeight="semibold">
2022-08-22 06:51:05 +00:00
Bienvenido {userData.user.name}
2022-08-17 21:08:38 +00:00
</Heading>
<Heading mt="1" color="coolGray.600" _dark={{
color: "warmGray.200"
}} fontWeight="medium" size="xs">
2022-08-17 22:47:48 +00:00
Modifique sus datos
2022-08-17 21:08:38 +00:00
</Heading>
<VStack space={3} mt="5">
2022-08-22 06:51:05 +00:00
<FormControl>
<FormControl.Label>DNI</FormControl.Label>
2022-08-22 20:09:33 +00:00
<TextInput type="text" defaultValue={userData.user.dni} editable={false} />
</FormControl>
2022-08-23 20:18:49 +00:00
{/* <FormControl>
2022-08-22 20:09:33 +00:00
<FormControl.Label>Teléfono</FormControl.Label>
<TextInput type="text" defaultValue={userData.user.phone} editable={false} />
2022-08-23 20:18:49 +00:00
</FormControl> */}
2022-08-17 21:08:38 +00:00
<FormControl>
<FormControl.Label>Nombre</FormControl.Label>
2022-08-22 20:09:33 +00:00
<TextInput style={styles.input} type="text" defaultValue={userData.user.name} onChangeText={(value) => setName(value) }/>
2022-08-17 21:08:38 +00:00
</FormControl>
<FormControl>
2022-08-22 06:51:05 +00:00
<FormControl.Label>Apellido</FormControl.Label>
2022-08-31 04:50:25 +00:00
<TextInput style={styles.input} type="text" defaultValue={userData.user.last_name} onChangeText={(value) => setApellido(value) } />
2022-08-17 21:08:38 +00:00
</FormControl>
<FormControl>
2022-08-22 06:51:05 +00:00
<FormControl.Label>Correo electrónico</FormControl.Label>
2022-08-22 20:09:33 +00:00
<TextInput style={styles.input} type="text" defaultValue={userData.user.email} onChangeText={(value) => setEmail(value) }/>
2022-08-17 21:08:38 +00:00
</FormControl>
2022-08-22 20:09:33 +00:00
<Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
2022-08-17 21:08:38 +00:00
Actualizar
</Button>
2022-08-17 22:47:48 +00:00
<Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
2022-08-17 21:08:38 +00:00
Cerrar sesión
</Button>
</VStack>
</Box>
2022-08-22 06:51:05 +00:00
</ScrollView>
2022-08-25 02:38:31 +00:00
)
2022-08-25 02:38:31 +00:00
const PasswordView = () => (
<ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
px: "20px",
mb: "4",
minW: "72"
}}>
<Box safeArea p="2" w="90%" maxW="290" py="8">
<Heading size="lg" color="coolGray.800" _dark={{
color: "warmGray.50"
}} fontWeight="semibold">
Bienvenido {userData.user.name}
</Heading>
<Heading mt="1" color="coolGray.600" _dark={{
color: "warmGray.200"
}} fontWeight="medium" size="xs">
Modifique sus contraseña
</Heading>
<VStack space={3} mt="5">
<FormControl>
<FormControl.Label>Contraseña actual</FormControl.Label>
2022-08-31 03:51:17 +00:00
<TextInput style={'password' in error ? styles.errorMessage : styles.input} type="password" onChangeText={(value) => onHandleChangePassword(value) }/>
</FormControl>
2022-08-31 03:22:41 +00:00
<FormControl>
<FormControl.Label>Nueva Contraseña</FormControl.Label>
2022-08-31 03:51:17 +00:00
<TextInput editable={!error} style={styles.input} type="password" onChangeText={(value) => setPassword(value) } />
</FormControl>
<FormControl>
<FormControl.Label>Confirmar nueva contraseña</FormControl.Label>
2022-09-01 04:14:08 +00:00
<TextInput editable={!error} style={styles.input} type="password" onChangeText={(value) => setConfirmPassword(value) }/>
</FormControl>
2022-08-31 03:51:17 +00:00
<Button mt="2" backgroundColor="orange.300" onPress={() => updatePassword()} disabled={error}>
Actualizar contraseña
</Button>
2022-08-31 03:22:41 +00:00
{/* {'password' in error && <FormControl.ErrorMessage _text={{
fontSize: 'xs'
}}>La contraseña no coincide con la actual</FormControl.ErrorMessage> } */}
</VStack>
</Box>
</ScrollView>
2022-08-25 02:38:31 +00:00
)
2022-08-29 23:15:46 +00:00
const updatePassword = async() =>{
2022-08-31 03:51:17 +00:00
const dataPassword = {
"_id": userData.user._id,
"dni": userData.user.dni,
"name": userData.user.name,
"last_name": userData.user.last_name,
"email": userData.user.email,
"phone": userData.user.phone,
"password": password,
"user_type": userData.user.user_type,
"status": userData.user.status,
"date_entry": userData.user.date_entry,
"community_id": userData.user.community_id,
}
try {
await fetch(baseURL+`${id}`, {
cache: 'no-cache',
method: 'PUT',
body: JSON.stringify(dataPassword),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
2022-08-31 04:50:25 +00:00
// console.log(baseURL+`${id}`);
2022-08-31 15:25:16 +00:00
if (response.status != 201 && response.status != 200){
console.log('ocurrio un error ' + response);
2022-08-31 04:50:25 +00:00
2022-08-31 03:51:17 +00:00
}else{
return response.json();
}
})
} catch (error) {
console.log("ERROR: " + error);
}
2022-08-29 23:15:46 +00:00
}
const updateInfo = async() => {
const data = {
2022-08-31 03:51:17 +00:00
"_id": userData.user._id,
"dni": userData.user.dni,
"name": name,
"last_name": apellido,
"email": email,
2022-08-31 18:27:36 +00:00
"community_id": userData.user.community_id
}
2022-08-31 04:50:25 +00:00
console.log(data);
try {
await fetch(baseURL+`${id}`, {
cache: 'no-cache',
method: 'PUT',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
2022-09-01 04:14:08 +00:00
console.log(response);
2022-08-31 04:50:25 +00:00
//console.log(baseURL+`${id}`);
if (response.status != 201){
2022-09-01 04:14:08 +00:00
console.log('ocurrio un error ');
}else{
return response.json();
}
})
} catch (error) {
console.log("ERROR: " + error);
}
}
return (
2022-08-25 02:38:31 +00:00
<Navigator>
2022-09-01 04:58:53 +00:00
<Screen name="Datos Personales" component={ProfileView} />
2022-08-25 02:38:31 +00:00
<Screen name="Contraseña" component={PasswordView} />
</Navigator>
2022-08-22 20:31:47 +00:00
)
2022-08-22 06:51:05 +00:00
}
const styles = StyleSheet.create({
input: {
2022-08-31 03:22:41 +00:00
height: 35,
2022-08-22 20:31:47 +00:00
margin: 3,
2022-08-22 06:51:05 +00:00
borderWidth: 0.5,
padding: 5,
flex: 1,
paddingTop: 9,
paddingRight: 19,
paddingLeft: 0,
2022-08-22 20:31:47 +00:00
marginTop: 6,
2022-08-22 06:51:05 +00:00
borderRadius: 4
2022-08-31 03:22:41 +00:00
},
errorMessage: {
height: 35,
margin: 3,
borderWidth: 0.5,
padding: 5,
flex: 1,
paddingTop: 9,
paddingRight: 19,
paddingLeft: 0,
marginTop: 6,
borderRadius: 4,
borderColor: '#be123c'
2022-08-22 06:51:05 +00:00
}
2022-08-22 20:31:47 +00:00
})
2022-08-22 06:51:05 +00:00