Skip to content

Commit 9171e72

Browse files
ATF19ATF19
committed
Added login and signup page
1 parent a162329 commit 9171e72

File tree

7 files changed

+274
-2
lines changed

7 files changed

+274
-2
lines changed

‎src/Main.js

+4
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import Contact from './page/Contact';
2020
import Category from './page/Category';
2121
import Product from './page/Product';
2222
import ImageGallery from './page/ImageGallery';
23+
import Login from './page/Login';
24+
import Signup from './page/Signup';
2325

2426

2527
export default class Main extends Component {
@@ -38,6 +40,8 @@ export default class Main extends Component {
3840
<Scene key="category" component={Category} hideNavBar />
3941
<Scene key="product" component={Product} hideNavBar />
4042
<Scene key="imageGallery" component={ImageGallery} modal hideNavBar />
43+
<Scene key="login" component={Login} hideNavBar />
44+
<Scene key="signup" component={Signup} hideNavBar />
4145
</Scene>
4246
</Router>
4347
</Root>

‎src/component/SideMenu.js

+12
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,18 @@ var menuItems = [
277277

278278

279279
const menusSecondaryItems = [
280+
{
281+
id: 190,
282+
title: 'Login',
283+
icon: 'ios-person',
284+
key: 'login'
285+
},
286+
{
287+
id: 519,
288+
title: 'Signup',
289+
icon: 'ios-person-add',
290+
key: 'signup'
291+
},
280292
{
281293
id: 19,
282294
title: 'Wish List',

‎src/component/logo.png

5.48 KB
Loading

‎src/page/Checkout.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* This is the Checkout Page
3+
**/
4+
5+
// React native and others libraries imports
6+
import React, { Component } from 'react';
7+
import { Container, Content, Left, Right, Button, Icon } from 'native-base';
8+
import { Actions } from 'react-native-router-flux';
9+
10+
// Our custom files and classes import
11+
import Colors from '../Colors';
12+
import Text from '../component/Text';
13+
import Navbar from '../component/Navbar';
14+
15+
export default class Checkout extends Component {
16+
constructor(props) {
17+
super(props);
18+
this.state = {
19+
};
20+
}
21+
22+
23+
render() {
24+
var left = (
25+
<Left style={{flex:1}}>
26+
<Button onPress={() => Actions.pop()} transparent>
27+
<Icon name='ios-arrow-back' />
28+
</Button>
29+
</Left>
30+
);
31+
var right = (
32+
<Right style={{flex:1}}>
33+
<Button onPress={() => Actions.search()} transparent>
34+
<Icon name='ios-search-outline' />
35+
</Button>
36+
</Right>
37+
);
38+
return(
39+
<Container style={{backgroundColor: '#fdfdfd'}}>
40+
<Navbar left={left} right={right} title="CHECKOUT" />
41+
<Content>
42+
<Text>Checkout</Text>
43+
</Content>
44+
</Container>
45+
);
46+
}
47+
48+
signup() {
49+
alert("Checkout"):
50+
}
51+
52+
53+
}

‎src/page/Login.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* This is the Login Page
3+
**/
4+
5+
// React native and others libraries imports
6+
import React, { Component } from 'react';
7+
import { Image } from 'react-native';
8+
import { Container, View, Left, Right, Button, Icon, Item, Input } from 'native-base';
9+
import { Actions } from 'react-native-router-flux';
10+
11+
// Our custom files and classes import
12+
import Colors from '../Colors';
13+
import Text from '../component/Text';
14+
import Navbar from '../component/Navbar';
15+
16+
export default class Login extends Component {
17+
constructor(props) {
18+
super(props);
19+
this.state = {
20+
username: '',
21+
password: '',
22+
hasError: false,
23+
errorText: ''
24+
};
25+
}
26+
27+
28+
render() {
29+
var left = (
30+
<Left style={{flex:1}}>
31+
<Button onPress={() => Actions.pop()} transparent>
32+
<Icon name='ios-arrow-back' />
33+
</Button>
34+
</Left>
35+
);
36+
var right = (
37+
<Right style={{flex:1}}>
38+
<Button onPress={() => Actions.search()} transparent>
39+
<Icon name='ios-search-outline' />
40+
</Button>
41+
<Button onPress={() => Actions.cart()} transparent>
42+
<Icon name='ios-cart' />
43+
</Button>
44+
</Right>
45+
);
46+
return(
47+
<Container style={{backgroundColor: '#fdfdfd'}}>
48+
<Navbar left={left} right={right} title="LOGIN" />
49+
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingLeft: 50, paddingRight: 50}}>
50+
<View style={{marginBottom: 35, width: '100%'}}>
51+
<Image source={require('../component/logo.png')} style={{width: 40, height: 40, marginBottom: 7}}/>
52+
<Text style={{fontSize: 24, fontWeight: 'bold', textAlign: 'left', width: '100%', color: Colors.navbarBackgroundColor}}>Welcome back, </Text>
53+
<Text style={{fontSize: 18, textAlign: 'left', width: '100%', color: '#687373'}}>Login to continue </Text>
54+
</View>
55+
<Item>
56+
<Icon active name='ios-person' style={{color: "#687373"}} />
57+
<Input placeholder='Username' onChangeText={(text) => this.setState({username: text})} placeholderTextColor="#687373" />
58+
</Item>
59+
<Item>
60+
<Icon active name='ios-lock' style={{color: "#687373"}} />
61+
<Input placeholder='Password' onChangeText={(text) => this.setState({password: text})} secureTextEntry={true} placeholderTextColor="#687373" />
62+
</Item>
63+
{this.state.hasError?<Text style={{color: "#c0392b", textAlign: 'center', marginTop: 10}}>{this.state.errorText}</Text>:null}
64+
<View style={{alignItems: 'center'}}>
65+
<Button onPress={() => this.login()} style={{backgroundColor: Colors.navbarBackgroundColor, marginTop: 20}}>
66+
<Text style={{color: '#fdfdfd'}}>Login</Text>
67+
</Button>
68+
</View>
69+
</View>
70+
</Container>
71+
);
72+
}
73+
74+
login() {
75+
/*
76+
Remove this code and replace it with your service
77+
Username: this.state.username
78+
Password: this.state.password
79+
*/
80+
this.setState({hasError: true, errorText: 'Invalid username or password !'});
81+
}
82+
83+
84+
}

‎src/page/Product.js

-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ import Carousel, { Pagination } from 'react-native-snap-carousel';
1313
import Colors from '../Colors';
1414
import Text from '../component/Text';
1515
import Navbar from '../component/Navbar';
16-
import SideMenu from '../component/SideMenu';
17-
import SideMenuDrawer from '../component/SideMenuDrawer';
1816
import {default as ProductComponent} from '../component/Product';
1917

2018
export default class Product extends Component {

‎src/page/Signup.js

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/**
2+
* This is the Signup Page
3+
**/
4+
5+
// React native and others libraries imports
6+
import React, { Component } from 'react';
7+
import { ScrollView } from 'react-native';
8+
import { Container, View, Left, Right, Button, Icon, Item, Input } from 'native-base';
9+
import { Actions } from 'react-native-router-flux';
10+
11+
// Our custom files and classes import
12+
import Colors from '../Colors';
13+
import Text from '../component/Text';
14+
import Navbar from '../component/Navbar';
15+
16+
export default class Signup extends Component {
17+
constructor(props) {
18+
super(props);
19+
this.state = {
20+
email: '',
21+
name: '',
22+
username: '',
23+
password: '',
24+
rePassword: '',
25+
hasError: false,
26+
errorText: ''
27+
};
28+
}
29+
30+
31+
render() {
32+
var left = (
33+
<Left style={{flex:1}}>
34+
<Button onPress={() => Actions.pop()} transparent>
35+
<Icon name='ios-arrow-back' />
36+
</Button>
37+
</Left>
38+
);
39+
var right = (
40+
<Right style={{flex:1}}>
41+
<Button onPress={() => Actions.search()} transparent>
42+
<Icon name='ios-search-outline' />
43+
</Button>
44+
<Button onPress={() => Actions.cart()} transparent>
45+
<Icon name='ios-cart' />
46+
</Button>
47+
</Right>
48+
);
49+
return(
50+
<Container style={{backgroundColor: '#fdfdfd'}}>
51+
<Navbar left={left} right={right} title="SIGN UP" />
52+
<ScrollView contentContainerStyle={{flexGrow: 1}}>
53+
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingLeft: 50, paddingRight: 50}}>
54+
<View style={{marginBottom: 35, width: '100%'}}>
55+
<Text style={{fontSize: 24, fontWeight: 'bold', textAlign: 'left', width: '100%', color: Colors.navbarBackgroundColor}}>Create your account, </Text>
56+
<Text style={{fontSize: 18, textAlign: 'left', width: '100%', color: '#687373'}}>Signup to continue </Text>
57+
</View>
58+
<Item>
59+
<Icon active name='ios-mail' style={{color: '#687373'}} />
60+
<Input placeholder='Email' onChangeText={(text) => this.setState({email: text})} keyboardType="email-address" placeholderTextColor="#687373" />
61+
</Item>
62+
<Item>
63+
<Icon active name='ios-man' style={{color: '#687373'}} />
64+
<Input placeholder='Name' onChangeText={(text) => this.setState({name: text})} placeholderTextColor="#687373" />
65+
</Item>
66+
<Item>
67+
<Icon active name='ios-person' style={{color: '#687373'}} />
68+
<Input placeholder='Username' onChangeText={(text) => this.setState({username: text})} placeholderTextColor="#687373" />
69+
</Item>
70+
<Item>
71+
<Icon active name='ios-lock' style={{color: '#687373'}} />
72+
<Input placeholder='Password' onChangeText={(text) => this.setState({password: text})} secureTextEntry={true} placeholderTextColor="#687373" />
73+
</Item>
74+
<Item>
75+
<Icon active name='ios-lock' style={{color: '#687373'}} />
76+
<Input placeholder='Repeat your password' onChangeText={(text) => this.setState({rePassword: text})} secureTextEntry={true} placeholderTextColor="#687373" />
77+
</Item>
78+
{this.state.hasError?<Text style={{color: "#c0392b", textAlign: 'center', marginTop: 10}}>{this.state.errorText}</Text>:null}
79+
<View style={{alignItems: 'center'}}>
80+
<Button onPress={() => this.signup()} style={{backgroundColor: Colors.navbarBackgroundColor, marginTop: 20}}>
81+
<Text style={{color: '#fdfdfd'}}>Signup</Text>
82+
</Button>
83+
</View>
84+
</View>
85+
</ScrollView>
86+
</Container>
87+
);
88+
}
89+
90+
signup() {
91+
if(this.state.email===""||this.state.name===""||this.state.username===""||this.state.password===""||this.state.rePassword==="") {
92+
this.setState({hasError: true, errorText: 'Please fill all fields !'});
93+
return;
94+
}
95+
if(!this.verifyEmail(this.state.email)) {
96+
this.setState({hasError: true, errorText: 'Please enter a valid email address !'});
97+
return;
98+
}
99+
if(this.state.username.length < 3) {
100+
this.setState({hasError: true, errorText: 'Passwords must contains at least 3 characters !'});
101+
return;
102+
}
103+
if(this.state.password.length < 6) {
104+
this.setState({hasError: true, errorText: 'Passwords must contains at least 6 characters !'});
105+
return;
106+
}
107+
if(this.state.password !== this.state.rePassword) {
108+
this.setState({hasError: true, errorText: 'Passwords does not match !'});
109+
return;
110+
}
111+
this.setState({hasError: false});
112+
Actions.home();
113+
}
114+
115+
verifyEmail(email) {
116+
var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
117+
return reg.test(email);
118+
}
119+
120+
121+
}

0 commit comments

Comments
 (0)