hello there,
I’m trying to figure out how to redirect my user to a page after he has authenticated himself thanks to a simple form. FROM ScreenSignIn TO ScreenProfil.
can i have some help ?
this is my APP.JS :
import React, { Component } from 'react';
import { Image, Alert, Button, TextInput, View, StyleSheet, Text, Navigator, TouchableHighlight, ImageBackground} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class ScreenSignIn extends React.Component {
constructor(props) {
super(props);
this.state = {
mail: '',
pwd: '',
};
}
onLogin() {
const { mail, pwd } = this.state;
if (!mail) {
Alert.alert('No Email detected');
} else if (!pwd) {
Alert.alert('No password detected');
} else if (mail && pwd) {
var details = {'token' : '#################################', 'username': mail, 'password': pwd };
var formBody = [];
for (var property in details) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(details[property]);
formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");
fetch('http://XX.XX.XX.XX:5151/login', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, body: formBody }).then(function(response) {
if (response.status === 400 || response.status === 200 || response.status === 401) {
return response.json()
}
}).then(function(object) {
if (object.type === 'error') {
console.log(object.type, object.message)
} else {
Alert.alert("login success")
console.log('login success')
..... ???
}
})
}
}
render() {
return (
<ImageBackground source={require('./assets/Sign.gif')} style={{ flex: 1 }}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Image source={require('./assets/logo.png')} style={{width: 100, height: 100}} ></Image>
<Text style={styles.Text}>GeoTracker</Text>
<TextInput value={this.state.mail} onChangeText={(mail) => this.setState({ mail })} placeholder={'Email'} style={styles.input} />
<TextInput value={this.state.pwd} onChangeText={(pwd) => this.setState({ pwd })} placeholder={'Password'} secureTextEntry={true} style={styles.input} />
<View style={{flexDirection: 'row'}}>
<View style={{marginRight: 5}}>
<Button title="Sign-up" color="grey" onPress={() => this.props.navigation.navigate('SignUp')} />
</View>
<View style={{marginLeft: 5}}>
<Button title="Sign-in" color='green' onPress={this.onLogin.bind(this)} />
</View>
</View>
</View>
</ImageBackground>
);
}
}
class ScreenSignUp extends React.Component {
constructor(props) {
super(props);
this.state = {
mail01: '',
mail02: '',
pwd01: '',
pwd02: ''
};
}
subscription() {
const { mail01, mail02, pwd01, pwd02 } = this.state;
if (!mail01 || !mail02 || mail01 != mail02) {
Alert.alert('Error : Email are empty or different !');
} else if (!pwd01 || !pwd02 || pwd01 != pwd02) {
Alert.alert('Error : Passwords are empty or different !');
} else if (pwd01.length < 8) {
Alert.alert('Error : Password too weak (must be more than 8 characters)');
} else if (pwd01.length >= 1023) {
Alert.alert('Error : Password too long (must be less than 1024 characters)');
} else {
var details = {'token' : '##################################', 'username': mail01, 'password': pwd01 };
var formBody = [];
for (var property in details) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(details[property]);
formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");
fetch('http://XX.XXX.XX.XX:5151/signup', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, body: formBody }).then(function(response) {
if (response.status === 400 || response.status === 200 || response.status === 401) {
return response.json()
}
}).then(function(object) {
if (object.type === 'error') {
console.log(object.type, object.message)
} else {
Alert.alert("subscription success")
console.log('subscription success')
}
})
}
}
render() {
return (
<ImageBackground source={require('./assets/Sign.gif')} style={{ flex: 1 }}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Image source={require('./assets/logo.png')} style={{width: 100, height: 100}} ></Image>
<Text style={styles.Text}>GeoTracker - Subscription</Text>
<TextInput value={this.state.mail01} onChangeText={(mail01) => this.setState({ mail01 })} placeholder={'Email'} style={styles.input} />
<TextInput value={this.state.mail02} onChangeText={(mail02) => this.setState({ mail02 })} placeholder={'Confirm Email'} style={styles.input} />
<TextInput value={this.state.pwd01} onChangeText={(pwd01) => this.setState({ pwd01 })} placeholder={'Password'} secureTextEntry={true} style={styles.input} />
<TextInput value={this.state.pwd02} onChangeText={(pwd02) => this.setState({ pwd02 })} placeholder={'Confirm Password'} secureTextEntry={true} style={styles.input} />
<View style={{flexDirection: 'row'}}>
<View style={{marginRight: 5}}>
<Button title={'Sign-in'} color='grey' onPress={() => this.props.navigation.navigate('SignIn')} />
</View>
<View style={{marginLeft: 5}}>
<Button title={'Subscribe'} color='green' onPress={this.subscription.bind(this)} />
</View>
</View>
</View>
</ImageBackground>
);
}
}
class ScreenProfil extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
</View>
);
}
}
const RootStack = createStackNavigator(
{
SignIn: ScreenSignIn,
SignUp: ScreenSignUp,
Profil: ScreenProfil,
},
{
headerMode: 'none',
initialRouteName: 'SignIn',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
input: {
textAlign: 'center',
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'white',
marginBottom: 10,
borderRadius: 30,
},
Text: {
color:'white',
padding: 10,
},
});