309 lines
9.9 KiB
JavaScript
Executable File
309 lines
9.9 KiB
JavaScript
Executable File
import React, { Component } from "react";
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
View,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
SafeAreaView,
|
|
Keyboard,
|
|
TouchableWithoutFeedback,
|
|
Linking
|
|
} from "react-native";
|
|
import { observable } from "mobx";
|
|
import { observer, inject } from "mobx-react/native";
|
|
import Text from "react-native-text";
|
|
import Header from "../../components/Public/signInUpHeader";
|
|
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
|
import Size from "../../config/size";
|
|
import { width, height } from "../../config/screen";
|
|
import { Button } from "react-native-elements";
|
|
import CheckBox from "react-native-check-box";
|
|
import CommonTextInput from "../../components/Public/commonTextInput";
|
|
import api from "../../stores/api";
|
|
import theme from "../../config/colors";
|
|
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
|
|
import { Fonts } from "../../config/fonts";
|
|
const size = new Size();
|
|
import Toast, { DURATION } from "react-native-easy-toast";
|
|
import SignUpVerify from "./signUpVerify";
|
|
import Loader from "../../components/Public/loader";
|
|
@inject(["userStore"])
|
|
@observer
|
|
export default class SignUpInformation extends Component {
|
|
@observable
|
|
signInData = {
|
|
email: "",
|
|
countryCode: "852",
|
|
mobile: "",
|
|
pwd: "",
|
|
name: "",
|
|
verificationCode: ""
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.store = this.props.userStore;
|
|
}
|
|
|
|
state = { checked: false, confrimPassword: "" };
|
|
|
|
navigatieAction(page) {
|
|
this.props.navigation.navigate(page);
|
|
}
|
|
|
|
signupAction() {
|
|
console.log(this.signInData);
|
|
if(this.signInData.mobile.length>=8){
|
|
if (this.state.checked) {
|
|
if (this.signInData.pwd != null || this.signInData.pwd != "") {
|
|
if (this.signInData.pwd.length >= 8) {
|
|
if (this.state.confrimPassword != null || this.state.confrimPassword != "") {
|
|
if (this.state.confrimPassword == this.signInData.pwd) {
|
|
this.store.checkMember(this.signInData, this);
|
|
} else {
|
|
this.refs.toast.show(
|
|
"Password and confirm password is not match"
|
|
);
|
|
}
|
|
} else {
|
|
this.refs.toast.show("Please enter confirm password");
|
|
}
|
|
} else {
|
|
this.refs.toast.show("your password must be at least 8 characters");
|
|
}
|
|
} else {
|
|
this.refs.toast.show("Please enter password");
|
|
}
|
|
} else {
|
|
this.refs.toast.show("Please accept the privacy policy");
|
|
}}else{
|
|
this.refs.toast.show('Please input your right mobile phone number')
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
|
|
<Loader loading={this.store.loading} />
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
|
|
<View style={styles.container}>
|
|
<View style={{ flex: 1, width: width }}>
|
|
<Header navigation={this.props.navigation} back={true} />
|
|
|
|
<View style={styles.mainContainer}>
|
|
<CommonTextInput
|
|
value={this.signInData.name}
|
|
onChangeText={name => (this.signInData.name = name)}
|
|
placeholder="Full Name"
|
|
secureTextEntry={false}
|
|
returnKeyType={"next"}
|
|
onSubmitEditing={event => {
|
|
this.emailInput.focus();
|
|
}}
|
|
/>
|
|
|
|
<CommonTextInput
|
|
value={this.signInData.email}
|
|
onChangeText={email => (this.signInData.email = email)}
|
|
placeholder="Email address"
|
|
secureTextEntry={false}
|
|
returnKeyType={"next"}
|
|
onSubmitEditing={event => {
|
|
this.mobileInput.focus();
|
|
}}
|
|
inputRef={input => {
|
|
this.emailInput = input;
|
|
}}
|
|
/>
|
|
|
|
<CommonTextInput
|
|
value={this.signInData.mobile}
|
|
onChangeText={mobile => (this.signInData.mobile = mobile)}
|
|
placeholder="Mobile number"
|
|
secureTextEntry={false}
|
|
returnKeyType={"next"}
|
|
inputRef={input => {
|
|
this.mobileInput = input;
|
|
}}
|
|
onSubmitEditing={event => {
|
|
this.passwordInput.focus();
|
|
}}
|
|
|
|
/>
|
|
|
|
<CommonTextInput
|
|
value={this.signInData.pwd}
|
|
onChangeText={pwd => (this.signInData.pwd = pwd)}
|
|
placeholder="Password"
|
|
secureTextEntry={true}
|
|
returnKeyType={"next"}
|
|
inputRef={input => {
|
|
this.passwordInput = input;
|
|
}}
|
|
onSubmitEditing={event => {
|
|
this.confrimPasswordInput.focus();
|
|
}}
|
|
|
|
/>
|
|
|
|
<CommonTextInput
|
|
value={this.state.confrimPassword}
|
|
onChangeText={pwd => this.setState({ confrimPassword: pwd })}
|
|
placeholder="Confirm Password"
|
|
secureTextEntry={true}
|
|
inputRef={input => {
|
|
this.confrimPasswordInput = input;
|
|
}}
|
|
returnKeyType={"done"}
|
|
onSubmitEditing={event => {
|
|
Keyboard.dismiss()
|
|
}}
|
|
/>
|
|
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
marginTop: 15,
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
justifyContent: "space-between",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<CheckBox
|
|
checkedImage={
|
|
<Icon
|
|
color={theme.foodNameColor}
|
|
size={size.getSize(35)}
|
|
name="checkbox-marked-outline"
|
|
/>
|
|
}
|
|
unCheckedImage={
|
|
<Icon
|
|
color={theme.foodNameColor}
|
|
size={size.getSize(35)}
|
|
name="square-outline"
|
|
/>
|
|
}
|
|
onClick={() =>
|
|
this.setState({ checked: !this.state.checked })
|
|
}
|
|
checkBoxColor={theme.foodNameColor}
|
|
isChecked={this.state.checked}
|
|
/>
|
|
<View style={{ paddingRight: 10 }}>
|
|
<Text
|
|
style={{
|
|
fontFamily: Fonts.century,
|
|
color: theme.foodNameColor
|
|
}}
|
|
// onPress={() => {
|
|
// // this.navigatieAction("SignUpVerify");
|
|
// Linking.openURL(
|
|
// "https://www.hangryfood.co/privacy-statement"
|
|
// );
|
|
// }}
|
|
>
|
|
By registering you agree to our
|
|
<Text
|
|
style={{
|
|
fontFamily: Fonts.century,
|
|
color: theme.mainColor
|
|
}}
|
|
onPress={() => {
|
|
Linking.openURL(
|
|
"https://www.hangryfood.co/terms-and-conditions"
|
|
);
|
|
}}
|
|
>
|
|
{" T&Cs "}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: Fonts.century,
|
|
color: theme.foodNameColor
|
|
}}
|
|
>
|
|
and
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: Fonts.century,
|
|
color: theme.mainColor
|
|
}}
|
|
onPress={() => {
|
|
Linking.openURL(
|
|
"https://www.hangryfood.co/privacy-statement"
|
|
);
|
|
}}
|
|
>
|
|
{" Privacy Policy."}
|
|
</Text>
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={styles.signupButton}
|
|
onPress={() => {
|
|
this.signupAction();
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 18,
|
|
fontFamily: Fonts.century,
|
|
color: "white",
|
|
fontWeight: "bold"
|
|
}}
|
|
>
|
|
Register
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
fontFamily: Fonts.century,
|
|
color: "white",
|
|
fontWeight: "bold"
|
|
}}
|
|
>
|
|
No More Hangry
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<Toast ref="toast" />
|
|
</View>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
backgroundColor: "white"
|
|
},
|
|
|
|
mainContainer: {
|
|
flex: 1
|
|
},
|
|
|
|
loginButton: {
|
|
width: scale(200),
|
|
height: verticalScale(50),
|
|
marginTop: moderateScale(30)
|
|
},
|
|
|
|
signupButton: {
|
|
backgroundColor: theme.mainColor,
|
|
|
|
height: verticalScale(60),
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}
|
|
});
|