Skip to content

S
safetcut-app
Commit 88a3f7ff by Prachpawee
Options

update router and add validation to register

parent 8b3c48f3
Showing with 251 additions and 33 deletions
package.json
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
"react-native-elements": "^1.1.0", "react-native-elements": "^1.1.0",
"react-native-gesture-handler": "^1.2.1", "react-native-gesture-handler": "^1.2.1",
"react-native-router-flux": "^4.0.6", "react-native-router-flux": "^4.0.6",
"react-native-validate-form": "^1.1.3",
"react-native-vector-icons": "^6.5.0", "react-native-vector-icons": "^6.5.0",
"react-native-web": "^0.11.4", "react-native-web": "^0.11.4",
"react-navigation": "^3.11.0", "react-navigation": "^3.11.0",
......
src/components/layout/InputField.js 0 → 100644
import React from 'react';
import { TextInput, Text, View } from 'react-native';
import { Icon, Item, Input } from 'native-base';
import { color, theme } from '../../constants/Styles';
const InputField = ({
name, // field name - required
customStyle,
onChangeText, // event
value, // field value
disabled,
placeholder,
errors, // this array prop is automatically passed down to this component from <Form />
isPass,
}) => {
return (
<View style={theme.inputContainer}>
<TextInput
value={value && value}
onChangeText={onChangeText ? val => onChangeText(val) : null}
placeholder={placeholder ? placeholder : ''}
placeholderTextColor={color.grey2}
disabled={disabled}
style={customStyle ? customStyle : {}}
secureTextEntry={isPass}
/>
{errors &&
errors.length > 0 &&
errors.map((item, index) =>
item.field === name && item.error ? (
// <Text key={`${index}`} style={{ color: 'red', marginLeft: 5, marginTop: 5 }}>
// {item.error}
// </Text>
<Icon key={`${index}`} name="close" style={theme.inputErr} />
) : null
)}
</View>
);
};
export default InputField;
src/constants/Styles.js
import { StyleSheet } from 'react-native'; import { StyleSheet } from 'react-native';
export const color = {
grey1: '#808080',
grey2: '#cacaca',
grey3: '#4a4a4a',
primary: '#f44c4c',
};
export const theme = StyleSheet.create({ export const theme = StyleSheet.create({
startContainer: { top: 120, paddingHorizontal: 50 }, startContainer: {
startTitle: { textAlign: 'center', color: '#4a4a4a', fontSize: 36 }, top: 120,
startFormContainer: { paddingRight: 10, marginBottom: 10, marginTop: 40 }, paddingHorizontal: 50,
redRoundedBtn: { borderRadius: 40, backgroundColor: '#f97070' }, },
startTitle: {
textAlign: 'center',
color: color.grey3,
fontSize: 36,
},
startFormContainer: {
paddingRight: 10,
marginBottom: 10,
marginTop: 40,
},
redRoundedBtn: {
borderRadius: 40,
backgroundColor: color.primary,
},
input: {
width: 300,
// borderBottomColor: '#cfd7db',
// borderBottomWidth: 1,
marginLeft: 5,
color: color.grey1,
marginTop: 30,
},
inputErr: { color: 'red', position: 'absolute', right: 5, bottom: 5, fontSize: 20 },
inputContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-end',
borderBottomColor: '#cfd7db',
borderBottomWidth: 1,
},
}); });
src/navigation/AppRouter.js
...@@ -5,8 +5,11 @@ import store from '../store'; ...@@ -5,8 +5,11 @@ import store from '../store';
import PageOne from '../screens/private/PageOne'; import PageOne from '../screens/private/PageOne';
import PageTwo from '../screens/private/PageTwo'; import PageTwo from '../screens/private/PageTwo';
import LoginPage from '../screens/public/LoginPage'; import LoginPage from '../screens/public/login';
import HomePage from '../screens/private/HomePage'; import HomePage from '../screens/private/HomePage';
import Register from '../screens/public/register';
import ForgotPass from '../screens/public/forgotPassword';
import SendEmail from '../screens/public/sendEmail';
class AppRouterComponent extends Component { class AppRouterComponent extends Component {
render() { render() {
...@@ -14,10 +17,13 @@ class AppRouterComponent extends Component { ...@@ -14,10 +17,13 @@ class AppRouterComponent extends Component {
<Provider store={store}> <Provider store={store}>
<Router> <Router>
<Scene key="root" hideNavBar> <Scene key="root" hideNavBar>
<Scene key="HomePage" component={HomePage} initial={true} /> <Scene key="HomePage" component={HomePage} />
<Scene key="PageOne" component={PageOne} /> <Scene key="PageOne" component={PageOne} />
<Scene key="PageTwo" component={PageTwo} /> <Scene key="PageTwo" component={PageTwo} />
<Scene key="LoginPage" component={LoginPage} /> <Scene key="LoginPage" component={LoginPage} initial={true} />
<Scene key="Register" component={Register} />
<Scene key="ForgotPass" component={ForgotPass} />
<Scene key="SendEmail" component={SendEmail} />
</Scene> </Scene>
</Router> </Router>
</Provider> </Provider>
......
src/screens/public/forgotPassword.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Text, Content, Input, View, Form, Item, Button } from 'native-base'; import { Container, Text, Content, Input, View, Form, Item, Button } from 'native-base';
import { theme } from '../../constants/Styles'; import { theme } from '../../constants/Styles';
import { Actions } from 'react-native-router-flux';
export default class forgotPassword extends Component { export default class forgotPassword extends Component {
render() { render() {
return ( return (
...@@ -19,7 +20,13 @@ export default class forgotPassword extends Component { ...@@ -19,7 +20,13 @@ export default class forgotPassword extends Component {
</Item> </Item>
</Form> </Form>
<Button full style={[theme.redRoundedBtn, { marginTop: 75 }]}> <Button
full
style={[theme.redRoundedBtn, { marginTop: 75 }]}
onPress={() => {
Actions.SendEmail();
}}
>
<Text>SEND</Text> <Text>SEND</Text>
</Button> </Button>
</Content> </Content>
......
src/screens/public/login.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Text, Content, Input, Radio, Form, Item, Left, Right, Button, Row } from 'native-base'; import { Container, Text, Content, Input, Radio, Form, Item, Left, Right, Button, Row } from 'native-base';
import { theme } from '../../constants/Styles'; import { theme } from '../../constants/Styles';
import { Actions } from 'react-native-router-flux';
export default class login extends Component { export default class login extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -47,14 +48,35 @@ export default class login extends Component { ...@@ -47,14 +48,35 @@ export default class login extends Component {
</Row> </Row>
</Left> </Left>
<Right> <Right>
<Text style={{ color: '#cacaca' }}>Forgot password?</Text> <Text
style={{ color: '#cacaca' }}
onPress={() => {
Actions.ForgotPass();
}}
>
Forgot password?
</Text>
</Right> </Right>
</Row> </Row>
<Button full style={[theme.redRoundedBtn, { marginTop: 75 }]}> <Button
full
style={[theme.redRoundedBtn, { marginTop: 75 }]}
onPress={() => {
Actions.HomePage();
}}
>
<Text>LOGIN</Text> <Text>LOGIN</Text>
</Button> </Button>
<Text style={{ color: '#4a4a4a', textAlign: 'center', marginTop: 20 }}> <Text style={{ color: '#4a4a4a', textAlign: 'center', marginTop: 20 }}>
Don't have an account? <Text style={{ color: '#f44c4c', fontWeight: 'bold' }}>Register</Text> Don't have an account?{' '}
<Text
style={{ color: '#f44c4c', fontWeight: 'bold' }}
onPress={() => {
Actions.Register();
}}
>
Register
</Text>
</Text> </Text>
</Content> </Content>
</Container> </Container>
......
src/screens/public/register.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Text, Content, Input, Form, Item, Left, Button, Row, CheckBox } from 'native-base'; import { Container, Text, Content, Left, Button, Row, CheckBox } from 'native-base';
import { theme } from '../../constants/Styles'; import { theme } from '../../constants/Styles';
import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/layout/InputField';
// validatioms
const required = value => (value ? undefined : 'This is a required field.');
const email = value =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,5}$/i.test(value)
? 'Please provide a valid email address.'
: undefined;
const phoneNum = value => (value && !/^[0][689][0-9]{8}$/i.test(value) ? 'Invalid number' : undefined);
const cfPassword = value => (value && value == this.password ? 'Password not match' : undefined); //how??
export default class register extends Component { export default class register extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
errors: [],
isCheck: false, isCheck: false,
name: '',
surName: '',
email: '',
password: '',
cfPassword: '',
phoneNum: '',
}; };
} }
submitForm() {
let submitResults = this.registerForm.validate();
let errors = [];
submitResults.forEach(item => {
errors.push({ field: item.fieldName, error: item.error });
});
this.setState({ errors: errors });
}
submitSuccess() {
console.log('Submit Success!');
}
submitFailed() {
console.log('Submit Failed!');
}
render() { render() {
const InputText = props => {
return (
<Item>
<Input
placeholder={props.placeholder}
secureTextEntry={props.isPass}
placeholderTextColor={'#cacaca'}
style={{ color: '#808080' }}
/>
</Item>
);
};
return ( return (
<Container> <Container>
<Content style={theme.startContainer}> <Content style={theme.startContainer}>
<Text style={theme.startTitle}>Register</Text> <Text style={theme.startTitle}>Register</Text>
<Form style={theme.startFormContainer}> <Form
<InputText placeholder={'Name'} /> ref={ref => (this.registerForm = ref)}
<InputText placeholder={'Surname'} /> validate={true}
<InputText placeholder={'E-mail'} /> submit={this.submitSuccess.bind(this)}
<InputText placeholder={'Password'} isPass={true} /> failed={this.submitFailed.bind(this)}
<InputText placeholder={'Confirm password'} isPass={true} /> errors={this.state.errors}
<InputText placeholder={'Phone number'} /> style={theme.startFormContainer}
>
{/* ---name--- */}
<Field
required
component={InputField}
validations={[required]}
name="name"
value={this.state.name}
onChangeText={val => this.setState({ name: val })}
customStyle={[theme.input, { marginTop: 0 }]}
placeholder="Name"
/>
{/* ---surName--- */}
<Field
required
component={InputField}
validations={[required]}
name="surName"
value={this.state.surName}
onChangeText={val => this.setState({ surName: val })}
customStyle={theme.input}
placeholder="Surname"
/>
{/* ---email--- */}
<Field
required
component={InputField}
validations={[required, email]}
name="email"
value={this.state.email}
onChangeText={val => this.setState({ email: val })}
customStyle={theme.input}
placeholder="E-mail"
/>
{/* ---password--- */}
<Field
required
component={InputField}
validations={[required]}
name="password"
value={this.state.password}
onChangeText={val => this.setState({ password: val })}
customStyle={theme.input}
placeholder="Password"
isPass={true}
/>
{/* ---cf password--- */}
<Field
required
component={InputField}
validations={[required, cfPassword]}
name="cfPassword"
value={this.state.cfPassword}
onChangeText={val => this.setState({ cfPassword: val })}
customStyle={theme.input}
placeholder="Confirm password"
isPass={true}
/>
{/* ---phone no--- */}
<Field
required
component={InputField}
validations={[required, phoneNum]}
name="phoneNum"
value={this.state.phoneNum}
onChangeText={val => this.setState({ phoneNum: val })}
customStyle={theme.input}
placeholder="Phone number"
/>
</Form> </Form>
<Row style={{ marginTop: 30 }}> <Row style={{ marginTop: 30 }}>
<Left> <Left>
...@@ -55,7 +150,7 @@ export default class register extends Component { ...@@ -55,7 +150,7 @@ export default class register extends Component {
</Row> </Row>
</Left> </Left>
</Row> </Row>
<Button full style={{ marginTop: 50, borderRadius: 40, backgroundColor: '#f97070' }}> <Button full style={[theme.redRoundedBtn, { marginTop: 50 }]} onPress={this.submitForm.bind(this)}>
<Text>CONTINUE</Text> <Text>CONTINUE</Text>
</Button> </Button>
</Content> </Content>
......
src/screens/public/sendEmail.js
...@@ -2,6 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { Container, Text, Content, View, Button } from 'native-base'; import { Container, Text, Content, View, Button } from 'native-base';
import { Image } from 'react-native'; import { Image } from 'react-native';
import { theme } from '../../constants/Styles'; import { theme } from '../../constants/Styles';
import { Actions } from 'react-native-router-flux';
export default class sendEmail extends Component { export default class sendEmail extends Component {
render() { render() {
return ( return (
...@@ -20,7 +21,13 @@ export default class sendEmail extends Component { ...@@ -20,7 +21,13 @@ export default class sendEmail extends Component {
We sent an email with instructions for resetting your password. We sent an email with instructions for resetting your password.
</Text> </Text>
</View> </View>
<Button full style={[theme.redRoundedBtn, { marginTop: 60 }]}> <Button
full
style={[theme.redRoundedBtn, { marginTop: 60 }]}
onPress={() => {
Actions.LoginPage();
}}
>
<Text>DONE</Text> <Text>DONE</Text>
</Button> </Button>
<Button transparent style={{ marginTop: 40, alignSelf: 'center' }}> <Button transparent style={{ marginTop: 40, alignSelf: 'center' }}>
......
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 to comment