Skip to content

Commit e82ded9

Browse files
HardeepcoderHardeepcoder
committed
Login Sysrem
1 parent 52a6882 commit e82ded9

File tree

6 files changed

+336
-108
lines changed

6 files changed

+336
-108
lines changed

‎index.android.js

+2-108
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,5 @@
1-
/**
2-
* Sample React Native App
3-
* https://github.com/facebook/react-native
4-
* @flow
5-
*/
6-
71
import React, { Component } from 'react';
8-
import {
9-
AppRegistry,
10-
StyleSheet,
11-
Text,
12-
View,Button,TextInput
13-
} from 'react-native';
14-
15-
export default class UsersManager extends Component {
16-
17-
constructor(props){
18-
super(props)
19-
this.state={
20-
userName:'',
21-
userEmail:'',
22-
userPassword:''
23-
24-
}
25-
}
26-
27-
userRegister = () =>{
28-
//alert('ok'); // version 0.48
29-
30-
const {userName} = this.state;
31-
const {userEmail} = this.state;
32-
const {userPassword} = this.state;
33-
34-
35-
fetch('http://hardeepcoder.com/react/register.php', {
36-
method: 'post',
37-
header:{
38-
'Accept': 'application/json',
39-
'Content-type': 'application/json'
40-
},
41-
body:JSON.stringify({
42-
name: userName,
43-
email: userEmail,
44-
password: userPassword,
45-
})
46-
47-
})
48-
.then((response) => response.json())
49-
.then((responseJson) =>{
50-
alert(responseJson);
51-
})
52-
.catch((error)=>{
53-
console.error(error);
54-
});
55-
56-
}
57-
58-
render() {
59-
return (
60-
<View style={styles.container}>
61-
62-
<TextInput
63-
placeholder="Enter Name"
64-
style={{width:200,margin:10}}
65-
onChangeText= {userName => this.setState({userName})}
66-
67-
/>
68-
69-
<TextInput
70-
placeholder="Enter Email"
71-
style={{width:200,margin:10}}
72-
onChangeText= {userEmail => this.setState({userEmail})}
73-
/>
74-
75-
<TextInput
76-
placeholder="Enter Password"
77-
style={{width:200,margin:10}}
78-
onChangeText= {userPassword => this.setState({userPassword})}
79-
/>
80-
81-
<Button title="Signup"
82-
onPress={this.userRegister}
83-
color="magenta"/>
84-
85-
86-
</View>
87-
88-
);
89-
}
90-
}
91-
92-
const styles = StyleSheet.create({
93-
container: {
94-
flex: 1,
95-
justifyContent: 'center',
96-
alignItems: 'center',
97-
backgroundColor: '#F5FCFF',
98-
},
99-
welcome: {
100-
fontSize: 20,
101-
textAlign: 'center',
102-
margin: 10,
103-
},
104-
instructions: {
105-
textAlign: 'center',
106-
color: '#333333',
107-
marginBottom: 5,
108-
},
109-
});
2+
import { AppRegistry,View,Text,StyleSheet } from 'react-native';
1103

4+
import UsersManager from './pages/app';
1115
AppRegistry.registerComponent('UsersManager', () => UsersManager);

‎pages/app.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Component } from 'react';
2+
import { AppRegistry,View,Text,StyleSheet,ScrollView,TouchableOpacity } from 'react-native';
3+
import { StackNavigator } from 'react-navigation';
4+
5+
import HomeScreen from './home';
6+
import Login from './login';
7+
import Register from './register';
8+
import Profile from './profile';
9+
10+
const UsersManager = StackNavigator({
11+
Home: { screen: HomeScreen },
12+
Login: { screen: Login },
13+
Register: {screen: Register},
14+
Profile: {screen: Profile}
15+
16+
});
17+
export default UsersManager;

‎pages/home.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { Component } from 'react';
2+
import { AppRegistry,View,Text,StyleSheet
3+
,Button,TouchableOpacity,StatusBar,Image } from 'react-native';
4+
5+
export default class home extends Component{
6+
static navigationOptions= ({navigation}) =>({
7+
title: 'Welcome',
8+
});
9+
10+
render(){
11+
const { navigate } = this.props.navigation;
12+
return(
13+
<View style={styles.container}>
14+
<Text style={styles.pageName}>User Manager</Text>
15+
16+
<TouchableOpacity
17+
onPress={() => navigate('Login')}
18+
style={styles.btn1}>
19+
<Text style={styles.btnText}>Login</Text>
20+
</TouchableOpacity>
21+
22+
<TouchableOpacity
23+
onPress={()=> navigate('Register')}
24+
style={styles.btn2}>
25+
<Text style={styles.btnText}>Register</Text>
26+
</TouchableOpacity>
27+
28+
29+
</View>
30+
);
31+
}
32+
}
33+
const styles = StyleSheet.create({
34+
container:{
35+
display:'flex',alignItems:'center',
36+
justifyContent:'center'
37+
},
38+
btn1:{
39+
backgroundColor:'orange',
40+
padding:10,margin:10,width:'95%'
41+
},
42+
btn2:{
43+
backgroundColor:'blue',
44+
padding:10,margin:10,width:'95%'
45+
},
46+
pageName:{
47+
margin:10,fontWeight:'bold',
48+
color:'#000', textAlign:'center'
49+
},
50+
btnText:{
51+
color:'#fff',fontWeight:'bold'
52+
},
53+
54+
});
55+
56+
57+
AppRegistry.registerComponent('home', () => home);

‎pages/login.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React, { Component } from 'react';
2+
import {
3+
AppRegistry,
4+
StyleSheet,
5+
Text,
6+
View,TouchableOpacity,TextInput,Button,Keyboard
7+
} from 'react-native';
8+
import { StackNavigator } from 'react-navigation';
9+
export default class login extends Component {
10+
static navigationOptions= ({navigation}) =>({
11+
title: 'Login',
12+
headerRight:
13+
<TouchableOpacity
14+
onPress={() => navigation.navigate('Home')}
15+
style={{margin:10,backgroundColor:'orange',padding:10}}>
16+
<Text style={{color:'#ffffff'}}>Home</Text>
17+
</TouchableOpacity>
18+
19+
});
20+
constructor(props){
21+
super(props)
22+
this.state={
23+
userEmail:'',
24+
userPassword:''
25+
}
26+
}
27+
28+
login = () =>{
29+
const {userEmail,userPassword} = this.state;
30+
//here we will send our data to server with fetch
31+
32+
fetch('http://hardeepcoder.com/react/login.php',{
33+
method:'post',
34+
header:{
35+
'Accept': 'application/json',
36+
'Content-type': 'application/json'
37+
},
38+
body:JSON.stringify({
39+
// we will pass our input data to server
40+
email: userEmail,
41+
password: userPassword
42+
})
43+
44+
})
45+
.then((response) => response.json())
46+
.then((responseJson)=>{
47+
if(responseJson == "ok"){
48+
// redirect to profile page
49+
alert("Successfully Login");
50+
this.props.navigation.navigate("Profile");
51+
}else{
52+
alert("Wrong Login Details");
53+
}
54+
})
55+
.catch((error)=>{
56+
console.error(error);
57+
});
58+
59+
60+
Keyboard.dismiss();
61+
}
62+
63+
render() {
64+
return (
65+
<View style={styles.container}>
66+
67+
<TextInput
68+
placeholder="Enter Email"
69+
style={{width:200, margin:10}}
70+
onChangeText={userEmail => this.setState({userEmail})}
71+
/>
72+
73+
<TextInput
74+
placeholder="Enter Password"
75+
style={{width:200, margin:10}}
76+
onChangeText={userPassword => this.setState({userPassword})}
77+
/>
78+
79+
<TouchableOpacity
80+
onPress={this.login}
81+
style={{width:200,padding:10,backgroundColor:'magenta',alignItems:'center'}}>
82+
<Text style={{color:'white'}}>Login</Text>
83+
</TouchableOpacity>
84+
85+
86+
</View>
87+
88+
);
89+
}
90+
}
91+
92+
const styles = StyleSheet.create({
93+
container: {
94+
flex: 1,
95+
justifyContent: 'center',
96+
alignItems: 'center',
97+
backgroundColor: '#F5FCFF',
98+
},
99+
100+
});
101+
102+
AppRegistry.registerComponent('login', () => login);

‎pages/profile.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { Component } from 'react';
2+
import { AppRegistry,View,Text,StyleSheet } from 'react-native';
3+
4+
export default class home extends Component{
5+
static navigationOptions= ({navigation}) =>({
6+
title: 'Welcome',
7+
});
8+
9+
render(){
10+
const { navigate } = this.props.navigation;
11+
return(
12+
<View style={styles.container}>
13+
14+
<Text style={styles.pageName}>profile</Text>
15+
16+
</View>
17+
);
18+
}
19+
}
20+
const styles = StyleSheet.create({
21+
container:{
22+
display:'flex',alignItems:'center',
23+
justifyContent:'center'
24+
},
25+
26+
pageName:{
27+
margin:10,fontWeight:'bold',
28+
color:'#000', textAlign:'center'
29+
},
30+
31+
32+
});
33+
34+
35+
AppRegistry.registerComponent('profile', () => profile);

0 commit comments

Comments
 (0)