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

profile dividing user info and password

This commit is contained in:
Maria Sanchez 2022-08-24 19:58:49 -06:00
parent 51cdecd388
commit 5991ee9471
3 changed files with 155 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mobile-ui/components/LogIn.js
View File

@ -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})
}
})

209
mobile-ui/components/Profile.js
View File

@ -1,28 +1,167 @@
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() => {
@ -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>
)

3
mobile-ui/package.json
View File

@ -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"