Skip to content

S
safetcut-app
Commit e6e4f28c by Tonk
Options

add RegiterSuccess, update register form validate, add timer scroll tab

parent 24a28dab
Showing with 519 additions and 210 deletions
AppNavigation.js
...@@ -28,6 +28,7 @@ import OnboardingScreen from './screens/Public/OnboardingScreen'; ...@@ -28,6 +28,7 @@ import OnboardingScreen from './screens/Public/OnboardingScreen';
import ForgotPasswordScreen from './screens/Public/ForgotPasswordScreen'; import ForgotPasswordScreen from './screens/Public/ForgotPasswordScreen';
import LoginScreen from './screens/Public/LoginScreen'; import LoginScreen from './screens/Public/LoginScreen';
import RegisterScreen from './screens/Public/RegisterScreen'; import RegisterScreen from './screens/Public/RegisterScreen';
import RegisterSuccess from './screens/Public/RegisterSuccess';
import SendEmailScreen from './screens/Public/SendEmailScreen'; import SendEmailScreen from './screens/Public/SendEmailScreen';
const defaultNavigationOptions = { const defaultNavigationOptions = {
...@@ -219,6 +220,7 @@ const IntroStack = createStackNavigator( ...@@ -219,6 +220,7 @@ const IntroStack = createStackNavigator(
Forget: ForgotPasswordScreen, Forget: ForgotPasswordScreen,
Register: RegisterScreen, Register: RegisterScreen,
SendEmail: SendEmailScreen, SendEmail: SendEmailScreen,
Success: RegisterSuccess,
}, },
{ {
initialRouteName: 'Login', initialRouteName: 'Login',
...@@ -233,7 +235,7 @@ const AppStack = createSwitchNavigator( ...@@ -233,7 +235,7 @@ const AppStack = createSwitchNavigator(
Main: MainStack, Main: MainStack,
}, },
{ {
initialRouteName: 'Intro', initialRouteName: 'AuthLoading',
} }
); );
......
components/Form/RegisterForm.js 0 → 100644
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { View } from 'react-native';
import Input from './Input';
import { theme } from '../../constants/Styles';
import GradientBtn from '../GradientBtn';
// validaition
const required = value => (value ? undefined : 'This is a required field.');
const minChar = value => (value && !/(?=.{8,})/i.test(value) ? 'At least 8 characters' : undefined);
const email = value =>
value &&
!/^(([^<>()\[\]\\.,;:\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,}))$/i.test(
value
)
? 'Invalid E-mail'
: undefined;
const lowercase = value =>
value && !/^(?=.*[a-z])/i.test(value) ? 'Password must contain at least 1 lowercase character' : undefined;
const uppercase = value =>
value && !/^(?=.*[A-Z])/i.test(value) ? 'Password must contain at least 1 uppercase character' : undefined;
const number = value =>
value && !/^(?=.*[0-9])/i.test(value) ? 'Password must contain at least 1 numeric character' : undefined;
const special = value =>
value && !/^(?=.*[!@#\$%\^&\*])/i.test(value) ? 'Password must contain at least 1 special character' : undefined;
const cfpassword = (value, allValues) => (value !== allValues.password ? 'Password not match' : undefined);
const phoneNum = value => (value && !/^[0][689][0-9]{8}$/i.test(value) ? 'Invalid number' : undefined);
class Register extends Component {
state = {
passVisible: false,
};
render() {
return (
<>
<View style={theme.containerWithVerticalMargin}>
<Field
name="name"
keyboardType="default"
component={Input}
validate={[required]}
placeholder="Name"
/>
<Field
name="surname"
keyboardType="default"
component={Input}
validate={[required]}
placeholder="Surname"
/>
<Field
name="email"
keyboardType="email-address"
component={Input}
validate={[required, email]}
placeholder="E-mail"
/>
<Field
name="password"
keyboardType="default"
component={Input}
validate={[required, minChar, lowercase, uppercase, number, special]}
placeholder={'Password'}
isPass
passVisible={this.state.passVisible}
onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
/>
<Field
name="cfpassword"
keyboardType="default"
component={Input}
validate={[required, cfpassword]}
placeholder={'Confirm password'}
isPass
passVisible={this.state.passVisible}
onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
/>
<Field
name="phoneno"
keyboardType="phone-pad"
component={Input}
validate={[required, phoneNum]}
placeholder={'Phone number'}
/>
</View>
{this.props.children}
<GradientBtn onPress={this.props.handleSubmit} title={'continue'} />
</>
);
}
}
const RegisterForm = reduxForm({
form: 'register',
})(Register);
export default RegisterForm;
components/SwipeableRow.js
...@@ -25,7 +25,18 @@ const Row = ({ data }) => ( ...@@ -25,7 +25,18 @@ const Row = ({ data }) => (
{data.day.map((item, index) => ( {data.day.map((item, index) => (
<Text <Text
key={index} key={index}
style={[theme.description, { color: item.dayActive ? color.primary : color.grey }]} style={[
theme.description,
{
color: data.active
? item.dayActive
? color.primary
: color.grey
: item.dayActive
? color.grey
: color.darkGrey,
},
]}
> >
{item.day}{' '} {item.day}{' '}
</Text> </Text>
...@@ -34,14 +45,17 @@ const Row = ({ data }) => ( ...@@ -34,14 +45,17 @@ const Row = ({ data }) => (
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={[theme.title, { fontWeight: 'normal' }]}>{data.name}</Text> <Text style={[theme.title, { fontWeight: 'normal' }]}>{data.name}</Text>
<Text style={theme.description}>{data.active ? 'Active' : '???'} </Text> <Text style={theme.description}>{data.active ? 'Active' : 'Inactive'} </Text>
</View> </View>
<View style={{ flex: 1, alignItems: 'flex-end' }}> <View style={{ flex: 1, alignItems: 'flex-end' }}>
<View style={{ alignItems: 'center' }}> <View style={{ alignItems: 'center' }}>
<Text <Text
style={[ style={[
theme.title, theme.title,
{ color: data.power ? color.success : color.primary, fontWeight: 'normal' }, {
color: data.active ? (data.power ? color.success : color.primary) : color.grey,
fontWeight: 'normal',
},
]} ]}
> >
{data.power ? 'ON' : 'OFF'} {data.power ? 'ON' : 'OFF'}
......
screens/Public/ForgotPasswordScreen.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Text, Content, View } from 'native-base'; import { Container, Text, Content, View, Icon } from 'native-base';
import { theme } from '../../constants/Styles'; import { theme } from '../../constants/Styles';
import { Form, Field } from 'react-native-validate-form'; import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/InputField'; import InputField from '../../components/InputField';
...@@ -37,6 +37,11 @@ export default class ForgotPasswordScreen extends Component { ...@@ -37,6 +37,11 @@ export default class ForgotPasswordScreen extends Component {
render() { render() {
return ( return (
<Container> <Container>
<Icon
name={'arrow-round-back'}
style={{ position: 'absolute', top: '6%', left: '5%' }}
onPress={() => this.props.navigation.goBack()}
/>
<Content style={theme.introContainer}> <Content style={theme.introContainer}>
<Text style={[theme.title, theme.centerText]}>Forgot Password</Text> <Text style={[theme.title, theme.centerText]}>Forgot Password</Text>
<View style={{ marginTop: 40 }}> <View style={{ marginTop: 40 }}>
......
screens/Public/RegisterScreen.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Text, CheckBox } from 'native-base'; import { Container, Text, CheckBox, Icon } from 'native-base';
import { color, theme } from '../../constants/Styles'; import { color, theme } from '../../constants/Styles';
import { Form, Field } from 'react-native-validate-form'; import { KeyboardAvoidingView, View } from 'react-native';
import InputField from '../../components/InputField'; import RegisterForm from '../../components/Form/RegisterForm';
import { Alert, KeyboardAvoidingView, View } from 'react-native';
import GradientBtn from '../../components/GradientBtn';
// validations
const required = value => (value ? undefined : 'This is a required field.');
const minChar = value => (value && !/^.{6,}$/i.test(value) ? 'At least 6 characters' : undefined);
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 RegisterScreen extends Component { export default class RegisterScreen extends Component {
state = { state = {
errors: [],
isCheck: false, isCheck: false,
name: '',
surName: '',
email: '',
password: '',
cfPassword: '',
phoneNum: '',
passVisible: false,
cfPassVisible: false,
}; };
submitForm() {
let submitResults = this.registerForm.validate();
let errors = [];
submitResults.forEach(item => {
errors.push({ field: item.fieldName, error: item.error });
});
this.setState({ errors: errors });
}
submitSuccess() { submitSuccess() {
console.log('Submit Success!'); console.log('Submit Success!');
Alert.alert( if (this.state.isCheck == false) {
'Completed!', alert('You have to accept Terms and Conditions!');
'You have completed your registration', } else {
[ this.props.navigation.navigate('Success');
{ }
text: 'Go to Login',
onPress: () => {
this.props.navigation.navigate('Login');
},
},
],
{ cancelable: false }
);
} }
submitFailed() { submit = values => {
console.log('Submit Failed!'); this.submitSuccess();
} };
render() { render() {
return ( return (
<Container> <Container>
<Icon
name={'arrow-round-back'}
style={{ position: 'absolute', top: '6%', left: '5%' }}
onPress={() => this.props.navigation.goBack()}
/>
<KeyboardAvoidingView style={theme.introContainer} behavior="padding" enabled> <KeyboardAvoidingView style={theme.introContainer} behavior="padding" enabled>
<Text style={theme.title}>Register</Text> <Text style={theme.title}>Register</Text>
<Form <RegisterForm onSubmit={this.submit}>
ref={ref => (this.registerForm = ref)} <View style={theme.rowContainer}>
validate={true} <CheckBox
submit={this.submitSuccess.bind(this)} color={color.grey}
failed={this.submitFailed.bind(this)} checked={this.state.isCheck}
errors={this.state.errors} onPress={() =>
style={theme.containerWithVerticalMargin} this.setState(() => {
> return (this.state.isCheck = !this.state.isCheck);
{/* ---name--- */} })
<Field }
required style={{ left: 0 }}
component={InputField} />
validations={[required]} <Text style={[theme.description, { marginLeft: 5 }]}>
name="name" I have read the{' '}
value={this.state.name} <Text style={[theme.description, theme.linkText]}>Terms and Conditions</Text>.
onChangeText={val => this.setState({ name: val })} </Text>
placeholder="Name" </View>
/> </RegisterForm>
{/* ---surName--- */}
<Field
required
component={InputField}
validations={[required]}
name="surName"
value={this.state.surName}
onChangeText={val => this.setState({ surName: val })}
placeholder="Surname"
/>
{/* ---email--- */}
<Field
required
component={InputField}
validations={[required, email]}
name="email"
value={this.state.email}
onChangeText={val => this.setState({ email: val })}
placeholder="E-mail"
/>
{/* ---password--- */}
<Field
required
component={InputField}
validations={[required, minChar]}
name="password"
value={this.state.password}
onChangeText={val => this.setState({ password: val })}
placeholder="Password"
isPass={true}
passVisible={this.state.passVisible}
onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
/>
{/* ---cf password--- */}
<Field
required
component={InputField}
validations={[required, cfPassword, minChar]}
name="cfPassword"
value={this.state.cfPassword}
onChangeText={val => this.setState({ cfPassword: val })}
placeholder="Confirm password"
isPass={true}
passVisible={this.state.cfPassVisible}
onPressEye={() => this.setState({ cfPassVisible: !this.state.cfPassVisible })}
/>
{/* ---phone no--- */}
<Field
required
component={InputField}
validations={[required, phoneNum]}
name="phoneNum"
value={this.state.phoneNum}
onChangeText={val => this.setState({ phoneNum: val })}
placeholder="Phone number"
/>
</Form>
<View style={theme.rowContainer}>
<CheckBox
color={color.grey}
checked={this.state.isCheck}
onPress={() =>
this.setState(() => {
return (this.state.isCheck = !this.state.isCheck);
})
}
style={{ left: 0 }}
/>
<Text style={[theme.description, { marginLeft: 5 }]}>
I have read the{' '}
<Text style={[theme.description, theme.linkText]}>Terms and Conditions</Text>.
</Text>
</View>
<GradientBtn onPress={this.submitForm.bind(this)} title={'continue'} />
</KeyboardAvoidingView> </KeyboardAvoidingView>
</Container> </Container>
); );
......
screens/Public/RegisterSuccess.js 0 → 100644
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import { theme, color } from '../../constants/Styles';
import GradientBtn from '../../components/GradientBtn';
export default class RegisterSuccess extends Component {
render() {
return (
<View style={theme.introContainer}>
<Text style={[theme.title, theme.textSuccess, theme.centerText]}>Register Successfully</Text>
<Image
style={{
width: 135,
height: 135,
alignSelf: 'center',
marginVertical: 30,
tintColor: color.primary,
}}
source={{
uri: 'https://image.flaticon.com/icons/png/512/91/91848.png',
}}
/>
<Text style={[theme.title, theme.centerText]}>Check your email</Text>
<Text style={[theme.normalText, theme.centerText, theme.mt1]}>
Your registration was successful. {'\n'}Please check your registered email for email verification.
</Text>
<GradientBtn
onPress={() => {
this.props.navigation.navigate('Login');
}}
title={'ok'}
/>
</View>
);
}
}
screens/Public/SendEmailScreen.js
import React, { Component } from 'react'; 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, StyleSheet } from 'react-native'; import { Image, StyleSheet } from 'react-native';
import { theme } from '../../constants/Styles'; import { theme, color } from '../../constants/Styles';
import GradientBtn from '../../components/GradientBtn'; import GradientBtn from '../../components/GradientBtn';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
...@@ -23,12 +23,11 @@ export default class SendEmailScreen extends Component { ...@@ -23,12 +23,11 @@ export default class SendEmailScreen extends Component {
width: 135, width: 135,
height: 135, height: 135,
alignSelf: 'center', alignSelf: 'center',
borderRadius: 65, marginVertical: 30,
marginTop: 50, tintColor: color.primary,
}} }}
source={{ source={{
uri: uri: 'https://image.flaticon.com/icons/png/512/91/91848.png',
'https://constructioncompanieslebanon.com/wp-content/uploads/2018/02/6ba96ffc82c13a9c4271233ab23e9afe.jpg',
}} }}
/> />
<Text style={[theme.title, theme.centerText]}>Check you email</Text> <Text style={[theme.title, theme.centerText]}>Check you email</Text>
......
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