Skip to content

Fernando Moreno Jiménez / proyecto_TDDM

Go to a project
Commit 4528f5da by Inmaculada Cubero León
Options

Implementación pantalla Perfil, junto a pantalla cambio contraseña y modal cambio teléfono

parent dbef5631
Inline Side-by-side
Showing with 300 additions and 10 deletions
App.js
import * as React from 'react';
import { View, Modal, ScrollView, TextInput, StyleSheet, Alert, Image, TouchableOpacity, Text } from 'react-native';
import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
import { DefaultTheme, NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native-safe-area-context';
import Perfil from './Perfil';
import Contraseña from './Contraseña';
const Stack = createNativeStackNavigator();
......@@ -13,12 +15,14 @@ const Stack = createNativeStackNavigator();
* @param {function} setM funcion para cambiar el estado del modal
* @returns la siguiente vista o un modal dependiendo si las credenciales son correctas
*/
function ComprobacionAuth(userName, password, setM){
function ComprobacionAuth(userName, password, setM, navigation){
const jsonInicio = require('./inicio.json');
const data = jsonInicio[userName];
if(data){ // se comprueba si el usuario existe
if(jsonInicio[userName].Contraseña == password){ // se verifica si la contraseña corresponde
return Alert.alert('Bienvenido, ' + jsonInicio[userName].Nombre); // Modificar por la visualizacion de la vista principal
return navigation.dispatch(
StackActions.replace('Perfil',{id: userName})
); // Modificar por la visualizacion de la vista principal
}else{
return setM(true);
}
......@@ -31,7 +35,7 @@ function ComprobacionAuth(userName, password, setM){
* @brief Presenta el contenido de la vista del Login
* @returns El contenido de la vista del Login
*/
function Inicio() {
function Inicio({navigation}) {
const [identificador, setIdentificador] = React.useState("");
const [pass, setPass] = React.useState("");
const [m, setM] = React.useState(false);
......@@ -58,7 +62,7 @@ function Inicio() {
<TextInput style={estilos.EntradaTexto} placeholder = "Nombre de usuario" onChangeText={(valor) => setIdentificador(valor)} ></TextInput>
<TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder = "Contraseña" onChangeText={(valor) => setPass(valor)}></TextInput>
</View>
<TouchableOpacity style={estilos.Boton} onPress={() => ComprobacionAuth(identificador, pass, setM)}>
<TouchableOpacity style={estilos.Boton} onPress={() => ComprobacionAuth(identificador, pass, setM, navigation)}>
<Text style={{color:'white', fontWeight: 'bold'}}>INICIAR SESIÓN</Text>
</TouchableOpacity>
</SafeAreaView>
......@@ -83,6 +87,8 @@ function App() {
options={{ headerStyle:{ backgroundColor: '#7D9BFF' }, headerTitleStyle: {
color: 'white'
}}} />
<Stack.Screen name="Perfil" component={Perfil} options={{"headerShown": false}}></Stack.Screen>
<Stack.Screen name="Contraseña" component={Contraseña} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}></Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
</View>
......@@ -96,7 +102,7 @@ const estilos = StyleSheet.create({
EntradaTexto: {
borderBottomWidth: 1,
borderBottomColor: "#B5B2B2",
padding: '5%',
padding: 15,
},
ContenedorTexto:{
padding: 18,
......@@ -109,12 +115,12 @@ const estilos = StyleSheet.create({
resizeMode:'contain'
},
Boton:{
marginTop:'15%',
marginTop:40,
alignContent:'center',
alignItems:'center',
justifyContent:'center',
backgroundColor:'#7D9BFF',
height:'10%',
height:45,
borderRadius:3
},
CentrarModal: {
......@@ -124,6 +130,8 @@ const estilos = StyleSheet.create({
alignItems: "center"
},
VistaModal: {
width:330,
height:180,
margin: 20,
backgroundColor: "white",
borderRadius: 1,
......
Contraseña.js 0 → 100644
import * as React from 'react';
import * as React from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity, Alert, Modal } from 'react-native';
function ComprobarContraseña(navigation, route, contr, nuevaContr, rNuevaContr, setModal, setTextModal){
const jsonInicio = require('./inicio.json');
if(jsonInicio[route.params.id].Contraseña == contr){
if(nuevaContr != contr){
if(nuevaContr == rNuevaContr && (nuevaContr != "" || rNuevaContr != "")){
return navigation.goBack();
}else{
setTextModal("La nueva contraseña no coincide o no se han introducido todos los campos.");
}
}else{
setTextModal("La nueva contraseña no puede ser como la actual.");
}
}else{
setTextModal("La contraseña no coincide.");
}
setModal(true);
}
function Contraseña({navigation, route}){
const [contrAct, setContrAct] = React.useState("");
const [nuevaContr, setNuevaContr] = React.useState("");
const [rNuevaContr, setRNuevaContr] = React.useState("");
const [modal, setModal] = React.useState(false);
const [textModal, setTextModal] = React.useState("");
return(
<View style={{flex: 1, padding: 18}}>
<Modal transparent={true} visible={modal} animationType={'fade'}>
<View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}>
<Text style={estilos.TituloModal}>Contraseña</Text>
<Text>{textModal}</Text>
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
<TouchableOpacity onPress={()=>setModal(false)}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<View>
<TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Contraseña actual' onChangeText={(valor) => setContrAct(valor)}></TextInput>
<TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Nueva contraseña' onChangeText={(valor) => setNuevaContr(valor)}></TextInput>
<TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Repita la nueva contraseña' onChangeText={(valor) => setRNuevaContr(valor)}></TextInput>
</View>
<View style={{position: 'absolute', bottom: 25, width:'100%', alignSelf:'center'}}>
<TouchableOpacity style={estilos.Boton} onPress={() => ComprobarContraseña(navigation, route, contrAct, nuevaContr, rNuevaContr, setModal, setTextModal)}>
<Text style={{color:'white', fontWeight: 'bold'}}>CONFIRMAR</Text>
</TouchableOpacity>
</View>
</View>
);
}
const estilos = StyleSheet.create({
Boton:{
alignContent:'center',
alignItems:'center',
justifyContent:'center',
backgroundColor:'#7D9BFF',
height:45,
borderRadius:3
},
EntradaTexto: {
borderBottomWidth: 1,
borderBottomColor: "#B5B2B2",
paddingBottom: 1,
paddingTop:30
},
CentrarModal: {
flex: 1,
backgroundColor: "rgba(1,1,1,0.5)",
justifyContent: "center",
alignItems: "center",
},
VistaModal: {
width:330,
height:190,
margin: 20,
backgroundColor: "white",
borderRadius: 1,
padding: 35,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
BotonAceptar: {
marginTop: 25,
textAlign: "left",
color:"#47525E"
},
BotonCancelar:{
marginTop: 25,
textAlign: "left",
color:"#FF676A"
},
TextoModal: {
color:"#47525E"
},
TituloModal:{
fontWeight:"bold",
color:"#47525E",
fontSize:20,
paddingBottom:25
}
}
)
export default Contraseña;
\ No newline at end of file
Perfil.js 0 → 100644
import * as React from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity, Modal, TextInput, ScrollView } from 'react-native';
const imagenes = {
vacio: require('./img/profile.png')
}
function Perfil({navigation, route}){
const jsonInicio = require('./inicio.json');
const [modal, setModal] = React.useState(false);
return(
<ScrollView>
<View style={{padding: 18}}>
<View style={estilos.CentrarModal}>
<Modal transparent={true} visible={modal} animationType={'fade'}>
<View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}>
<Text style={estilos.TituloModal}>Modificar teléfono</Text>
<TextInput style={estilos.EntradaTexto} keyboardType="number-pad" placeholder="Nuevo teléfono"></TextInput>
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
<TouchableOpacity onPress={()=>setModal(false)}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity>
<TouchableOpacity style= {{paddingLeft:15}} onPress={()=>setModal(false)}>
<Text style={estilos.BotonCancelar}>CANCELAR</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</View>
<View style={estilos.ContenedorLogo}>
<Image style={estilos.Logo} source={imagenes[jsonInicio[route.params.id].ImagenPerfil]} />
<Text style={estilos.Nombre}>{jsonInicio[route.params.id].Nombre}</Text>
</View>
<View style={estilos.ContenedorElemento}>
<Text style={estilos.TituloLista}>Email</Text>
<Text>{jsonInicio[route.params.id].Correo}</Text>
</View>
<View style={estilos.ContenedorElemento}>
<View style={estilos.contenedor}>
<View>
<Text style={estilos.TituloLista}>Teléfono</Text>
<Text>{jsonInicio[route.params.id].Teléfono}</Text>
</View>
<TouchableOpacity onPress={() => setModal(true)}>
<Image style={{height:20, width:20}} source={require('./img/editar.png')} />
</TouchableOpacity>
</View>
</View>
<View style={estilos.ContenedorElemento}>
<View style={estilos.contenedor}>
<View>
<Text style={estilos.TituloLista}>Contraseña</Text>
<Text>Cambiar la contraseña de la cuenta</Text>
</View>
<TouchableOpacity onPress={() => navigation.navigate('Contraseña', {id: route.params.id})}>
<Image style={{height:20, width:20}} source={require('./img/flecha.png')} />
</TouchableOpacity>
</View>
</View>
<TouchableOpacity style={estilos.Boton} onPress={() => navigation.reset({index: 0, routes: [{name: 'Inicio de sesión'},],})}>
<Text style={{color:'white', fontWeight: 'bold'}}>CERRAR SESIÓN</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
const estilos = StyleSheet.create({
contenedor: {
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between'
},
ContenedorLogo:{
alignContent:'center',
alignItems:'center',
paddingTop:25,
paddingBottom: 25
},
Logo:{
borderRadius:80,
width:160,
height:160,
resizeMode:'contain'
},
Nombre:{
fontSize:22,
color:'gray'
},
TituloLista:{
fontSize:16,
color:"black"
},
ContenedorElemento:{
paddingTop:20
},
Boton:{
marginTop:40,
alignContent:'center',
alignItems:'center',
justifyContent:'center',
backgroundColor:'#FF676A',
height:45,
borderRadius:3
},
CentrarModal: {
flex: 1,
backgroundColor: "rgba(1,1,1,0.5)",
justifyContent: "center",
alignItems: "center",
},
VistaModal: {
width:330,
height:210,
margin: 20,
backgroundColor: "white",
borderRadius: 1,
padding: 35,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
BotonAceptar: {
marginTop: 25,
textAlign: "left",
color:"#47525E"
},
BotonCancelar:{
marginTop: 25,
textAlign: "left",
color:"#FF676A"
},
TextoModal: {
color:"#47525E"
},
TituloModal:{
fontWeight:"bold",
color:"#47525E",
fontSize:20,
paddingBottom:25
},
EntradaTexto: {
borderBottomWidth: 1,
borderBottomColor: "#B5B2B2",
paddingBottom: 15,
}
});
export default Perfil;
\ No newline at end of file
inicio.json
......@@ -3,12 +3,14 @@
"Teléfono": "677490125",
"Nombre": "David González Hidalgo",
"Contraseña": "qwerty",
"Correo": "dgh00001@gmail.com"
"Correo": "dgh00001@gmail.com",
"ImagenPerfil":"vacio"
},
"icl00001":{
"Teléfono": "658968701",
"Nombre": "Isabel Cazalla Loma",
"Contraseña": "12345",
"Correo": "icl00001@gmail.com"
"Correo": "icl00001@gmail.com",
"ImagenPerfil":"vacio"
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment