profile dividing user info and password
This commit is contained in:
Maria Sanchez
parent
51cdecd388
commit
5991ee9471
|
|
@ -60,6 +60,7 @@ export default function LogIn({ navigation }) {
|
|||
navigation.navigate('Comunicados', {user})
|
||||
}else if(user.user_type == '3'){
|
||||
addUser(user);
|
||||
// cambiar por ComunicadosGuarda luego
|
||||
navigation.navigate('Comunicados', {user})
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,29 +1,168 @@
|
|||
import React, { useContext, useState } from "react";
|
||||
import { API } from "../environment/api";
|
||||
|
||||
import {
|
||||
Box, Button,
|
||||
Center, FormControl, Heading, ScrollView, VStack
|
||||
} from "native-base";
|
||||
|
||||
import { StyleSheet, TextInput } from "react-native";
|
||||
import { Dimensions, StyleSheet, TextInput } from "react-native";
|
||||
import { UserContext } from "../context/UserContext";
|
||||
import {SceneMap, TabView} from 'react-native-pager-view';
|
||||
|
||||
export default function Profile({ navigation }) {
|
||||
|
||||
const baseURL = `${API.BASE_URL}/user/updateUser/`
|
||||
//const userData = JSON.parse(JSON.stringify(route.params));
|
||||
const [name, setName] = useState();
|
||||
const [apellido, setApellido] =useState();
|
||||
const [email, setEmail] = useState();
|
||||
const [password, setPassword] = useState();
|
||||
const [index, setIndex] = useState(0);
|
||||
|
||||
const [routes] = useState([{
|
||||
key: "first",
|
||||
title: 'Información'
|
||||
}, {
|
||||
key: "second",
|
||||
title: 'Contraseña'}])
|
||||
|
||||
const userData = useContext(UserContext)
|
||||
const id = userData.user._id;
|
||||
|
||||
console.log(userData.user);
|
||||
|
||||
const ProfileView = () => {
|
||||
|
||||
<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 datos
|
||||
</Heading>
|
||||
<VStack space={3} mt="5">
|
||||
<FormControl>
|
||||
<FormControl.Label>DNI</FormControl.Label>
|
||||
<TextInput type="text" defaultValue={userData.user.dni} editable={false} />
|
||||
</FormControl>
|
||||
{/* <FormControl>
|
||||
<FormControl.Label>Teléfono</FormControl.Label>
|
||||
<TextInput type="text" defaultValue={userData.user.phone} editable={false} />
|
||||
</FormControl> */}
|
||||
<FormControl>
|
||||
<FormControl.Label>Nombre</FormControl.Label>
|
||||
<TextInput style={styles.input} type="text" defaultValue={userData.user.name} onChangeText={(value) => setName(value) }/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormControl.Label>Apellido</FormControl.Label>
|
||||
<TextInput style={styles.input} type="text"defaultValue={userData.user.last_name} onChangeText={(value) => setApellido(value) } />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormControl.Label>Correo electrónico</FormControl.Label>
|
||||
<TextInput style={styles.input} type="text" defaultValue={userData.user.email} onChangeText={(value) => setEmail(value) }/>
|
||||
</FormControl>
|
||||
<Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
|
||||
Actualizar
|
||||
</Button>
|
||||
<Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
|
||||
Cerrar sesión
|
||||
</Button>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
</ScrollView>
|
||||
|
||||
}
|
||||
|
||||
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>
|
||||
<TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormControl.Label>Nueva Contraseña</FormControl.Label>
|
||||
<TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormControl.Label>Confirmar nueva contraseña</FormControl.Label>
|
||||
<TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
|
||||
</FormControl>
|
||||
|
||||
<Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
|
||||
Actualizar contraseña
|
||||
</Button>
|
||||
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
|
||||
</ScrollView>
|
||||
|
||||
}
|
||||
|
||||
const initialLayout = {
|
||||
width: Dimensions.get('window').width
|
||||
}
|
||||
|
||||
const renderScene = SceneMap({
|
||||
first: ProfileView,
|
||||
second: PasswordView
|
||||
})
|
||||
|
||||
|
||||
const renderTabBar = props => {
|
||||
const inputRange = props.navigationState.routes.map((x, i) => i);
|
||||
return <Box flexDirection="row">
|
||||
{props.navigationState.routes.map((route, i) => {
|
||||
const opacity = props.position.interpolate({
|
||||
inputRange,
|
||||
outputRange: inputRange.map(inputIndex => inputIndex === i ? 1 : 0.5)
|
||||
});
|
||||
const color = index === i ? useColorModeValue('#000', '#e5e5e5') : useColorModeValue('#1f2937', '#a1a1aa');
|
||||
const borderColor = index === i ? 'cyan.500' : useColorModeValue('coolGray.200', 'gray.400');
|
||||
return <Box borderBottomWidth="3" borderColor={borderColor} flex={1} alignItems="center" p="3" cursor="pointer">
|
||||
<Pressable onPress={() => {
|
||||
console.log(i);
|
||||
setIndex(i);
|
||||
}}>
|
||||
<Animated.Text style={{
|
||||
color
|
||||
}}>{route.title}</Animated.Text>
|
||||
</Pressable>
|
||||
</Box>;
|
||||
})}
|
||||
</Box>;
|
||||
};
|
||||
|
||||
|
||||
const updateInfo = async() => {
|
||||
|
||||
const data = {
|
||||
|
|
@ -65,61 +204,17 @@ export default function Profile({ navigation }) {
|
|||
console.log("ERROR: " + error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Center>
|
||||
|
||||
<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 datos
|
||||
</Heading>
|
||||
<VStack space={3} mt="5">
|
||||
<FormControl>
|
||||
<FormControl.Label>DNI</FormControl.Label>
|
||||
<TextInput type="text" defaultValue={userData.user.dni} editable={false} />
|
||||
</FormControl>
|
||||
{/* <FormControl>
|
||||
<FormControl.Label>Teléfono</FormControl.Label>
|
||||
<TextInput type="text" defaultValue={userData.user.phone} editable={false} />
|
||||
</FormControl> */}
|
||||
<FormControl>
|
||||
<FormControl.Label>Nombre</FormControl.Label>
|
||||
<TextInput style={styles.input} type="text" defaultValue={userData.user.name} onChangeText={(value) => setName(value) }/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormControl.Label>Apellido</FormControl.Label>
|
||||
<TextInput style={styles.input} type="text"defaultValue={userData.user.last_name} onChangeText={(value) => setApellido(value) } />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormControl.Label>Correo electrónico</FormControl.Label>
|
||||
<TextInput style={styles.input} type="text" defaultValue={userData.user.email} onChangeText={(value) => setEmail(value) }/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormControl.Label>Contraseña actual</FormControl.Label>
|
||||
<TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
|
||||
</FormControl>
|
||||
|
||||
<Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
|
||||
Actualizar
|
||||
</Button>
|
||||
<Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
|
||||
Cerrar sesión
|
||||
</Button>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
</ScrollView>
|
||||
<TabView navigationState={{
|
||||
index,
|
||||
routes
|
||||
}} renderScene={renderScene} renderTabBar={renderTabBar} onIndexChange={setIndex} initialLayout={initialLayout} style={{
|
||||
marginTop: StatusBar.currentHeight
|
||||
}} />;
|
||||
</Center>
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -39,7 +39,8 @@
|
|||
"react-native-table-component": "^1.2.2",
|
||||
"react-native-web": "0.17.1",
|
||||
"universal-cookie": "^4.0.4",
|
||||
"@react-native-community/datetimepicker": "4.0.0"
|
||||
"@react-native-community/datetimepicker": "4.0.0",
|
||||
"react-native-pager-view": "5.4.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.9"
|
||||
|
|
|
|||
Loading…
Reference in New Issue