From 9171e72603d2590db95b3824f6878db4f350b4f5 Mon Sep 17 00:00:00 2001 From: ATF19 Date: Mon, 7 Aug 2017 11:48:48 +0100 Subject: [PATCH] Added login and signup page --- src/Main.js | 4 ++ src/component/SideMenu.js | 12 ++++ src/component/logo.png | Bin 0 -> 5608 bytes src/page/Checkout.js | 53 +++++++++++++++++ src/page/Login.js | 84 ++++++++++++++++++++++++++ src/page/Product.js | 2 - src/page/Signup.js | 121 ++++++++++++++++++++++++++++++++++++++ 7 files changed, 274 insertions(+), 2 deletions(-) create mode 100644 src/component/logo.png create mode 100644 src/page/Checkout.js create mode 100644 src/page/Login.js create mode 100644 src/page/Signup.js diff --git a/src/Main.js b/src/Main.js index 7cd4142..271cf5b 100644 --- a/src/Main.js +++ b/src/Main.js @@ -20,6 +20,8 @@ import Contact from './page/Contact'; import Category from './page/Category'; import Product from './page/Product'; import ImageGallery from './page/ImageGallery'; +import Login from './page/Login'; +import Signup from './page/Signup'; export default class Main extends Component { @@ -38,6 +40,8 @@ export default class Main extends Component { + + diff --git a/src/component/SideMenu.js b/src/component/SideMenu.js index 9833173..d8e862b 100644 --- a/src/component/SideMenu.js +++ b/src/component/SideMenu.js @@ -277,6 +277,18 @@ var menuItems = [ const menusSecondaryItems = [ + { + id: 190, + title: 'Login', + icon: 'ios-person', + key: 'login' + }, + { + id: 519, + title: 'Signup', + icon: 'ios-person-add', + key: 'signup' + }, { id: 19, title: 'Wish List', diff --git a/src/component/logo.png b/src/component/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..8834540d46f4a1af23636be155b2c4d91e52d823 GIT binary patch literal 5608 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 aquuNOzd#wi-Z{AdKu1$gqg2f%=zjnf-OmL8 literal 0 HcmV?d00001 diff --git a/src/page/Checkout.js b/src/page/Checkout.js new file mode 100644 index 0000000..203127a --- /dev/null +++ b/src/page/Checkout.js @@ -0,0 +1,53 @@ +/** +* This is the Checkout Page +**/ + +// React native and others libraries imports +import React, { Component } from 'react'; +import { Container, Content, Left, Right, Button, Icon } from 'native-base'; +import { Actions } from 'react-native-router-flux'; + +// Our custom files and classes import +import Colors from '../Colors'; +import Text from '../component/Text'; +import Navbar from '../component/Navbar'; + +export default class Checkout extends Component { + constructor(props) { + super(props); + this.state = { + }; + } + + + render() { + var left = ( + + + + ); + var right = ( + + + + ); + return( + + + + Checkout + + + ); + } + + signup() { + alert("Checkout"): + } + + +} diff --git a/src/page/Login.js b/src/page/Login.js new file mode 100644 index 0000000..fcda8c6 --- /dev/null +++ b/src/page/Login.js @@ -0,0 +1,84 @@ +/** +* This is the Login Page +**/ + +// React native and others libraries imports +import React, { Component } from 'react'; +import { Image } from 'react-native'; +import { Container, View, Left, Right, Button, Icon, Item, Input } from 'native-base'; +import { Actions } from 'react-native-router-flux'; + +// Our custom files and classes import +import Colors from '../Colors'; +import Text from '../component/Text'; +import Navbar from '../component/Navbar'; + +export default class Login extends Component { + constructor(props) { + super(props); + this.state = { + username: '', + password: '', + hasError: false, + errorText: '' + }; + } + + + render() { + var left = ( + + + + ); + var right = ( + + + + + ); + return( + + + + + + Welcome back, + Login to continue + + + + this.setState({username: text})} placeholderTextColor="#687373" /> + + + + this.setState({password: text})} secureTextEntry={true} placeholderTextColor="#687373" /> + + {this.state.hasError?{this.state.errorText}:null} + + + + + + ); + } + + login() { + /* + Remove this code and replace it with your service + Username: this.state.username + Password: this.state.password + */ + this.setState({hasError: true, errorText: 'Invalid username or password !'}); + } + + +} diff --git a/src/page/Product.js b/src/page/Product.js index 136ad79..d9705b4 100644 --- a/src/page/Product.js +++ b/src/page/Product.js @@ -13,8 +13,6 @@ import Carousel, { Pagination } from 'react-native-snap-carousel'; import Colors from '../Colors'; import Text from '../component/Text'; import Navbar from '../component/Navbar'; -import SideMenu from '../component/SideMenu'; -import SideMenuDrawer from '../component/SideMenuDrawer'; import {default as ProductComponent} from '../component/Product'; export default class Product extends Component { diff --git a/src/page/Signup.js b/src/page/Signup.js new file mode 100644 index 0000000..b188c02 --- /dev/null +++ b/src/page/Signup.js @@ -0,0 +1,121 @@ +/** +* This is the Signup Page +**/ + +// React native and others libraries imports +import React, { Component } from 'react'; +import { ScrollView } from 'react-native'; +import { Container, View, Left, Right, Button, Icon, Item, Input } from 'native-base'; +import { Actions } from 'react-native-router-flux'; + +// Our custom files and classes import +import Colors from '../Colors'; +import Text from '../component/Text'; +import Navbar from '../component/Navbar'; + +export default class Signup extends Component { + constructor(props) { + super(props); + this.state = { + email: '', + name: '', + username: '', + password: '', + rePassword: '', + hasError: false, + errorText: '' + }; + } + + + render() { + var left = ( + + + + ); + var right = ( + + + + + ); + return( + + + + + + Create your account, + Signup to continue + + + + this.setState({email: text})} keyboardType="email-address" placeholderTextColor="#687373" /> + + + + this.setState({name: text})} placeholderTextColor="#687373" /> + + + + this.setState({username: text})} placeholderTextColor="#687373" /> + + + + this.setState({password: text})} secureTextEntry={true} placeholderTextColor="#687373" /> + + + + this.setState({rePassword: text})} secureTextEntry={true} placeholderTextColor="#687373" /> + + {this.state.hasError?{this.state.errorText}:null} + + + + + + + ); + } + + signup() { + if(this.state.email===""||this.state.name===""||this.state.username===""||this.state.password===""||this.state.rePassword==="") { + this.setState({hasError: true, errorText: 'Please fill all fields !'}); + return; + } + if(!this.verifyEmail(this.state.email)) { + this.setState({hasError: true, errorText: 'Please enter a valid email address !'}); + return; + } + if(this.state.username.length < 3) { + this.setState({hasError: true, errorText: 'Passwords must contains at least 3 characters !'}); + return; + } + if(this.state.password.length < 6) { + this.setState({hasError: true, errorText: 'Passwords must contains at least 6 characters !'}); + return; + } + if(this.state.password !== this.state.rePassword) { + this.setState({hasError: true, errorText: 'Passwords does not match !'}); + return; + } + this.setState({hasError: false}); + Actions.home(); + } + + verifyEmail(email) { + 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,}))$/; + return reg.test(email); + } + + +}