413 lines
15 KiB
JavaScript
413 lines
15 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import {StyleSheet,Text,View,Image,ScrollView} from 'react-native';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
||
|
|
import { responsiveHeight,responsiveWidth,responsiveFontSize } from 'react-native-responsive-dimensions';
|
||
|
|
import {Fumi,Kaede} from 'react-native-textinput-effects'
|
||
|
|
import * as Animatable from 'react-native-animatable'
|
||
|
|
import Button from 'apsl-react-native-button'
|
||
|
|
import {categoryChild} from './../../webservice/AuthApi'
|
||
|
|
let theme=require('./../../utils/theme.json')
|
||
|
|
let route=require('./../../route.json')
|
||
|
|
import I18n from 'react-native-i18n';
|
||
|
|
|
||
|
|
export default class CreateAccount extends Component{
|
||
|
|
static navigatorStyle = {
|
||
|
|
drawUnderNavBar: true,
|
||
|
|
navBarHidden:true,
|
||
|
|
drawUnderStatusBar: false,
|
||
|
|
statusBarHidden: true,
|
||
|
|
statusBarTextColorScheme: 'light',
|
||
|
|
};
|
||
|
|
|
||
|
|
static options(passProps){
|
||
|
|
return {
|
||
|
|
topBar:{
|
||
|
|
visible:false,
|
||
|
|
enabled:false,
|
||
|
|
drawBehind: true,
|
||
|
|
|
||
|
|
},
|
||
|
|
statusBar:{
|
||
|
|
drawBehind: true,
|
||
|
|
enabled:false,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor(props){
|
||
|
|
super(props);
|
||
|
|
this.state=this.initState();
|
||
|
|
const { navigation } = this.props;
|
||
|
|
this.type = navigation.getParam('type', 0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
initState() {
|
||
|
|
return {
|
||
|
|
password: null,
|
||
|
|
enterPhone: null,
|
||
|
|
nameanim: null,
|
||
|
|
surnameanim: null,
|
||
|
|
passwordanim: null,
|
||
|
|
confirmpassanim: null,
|
||
|
|
isLoging: false,
|
||
|
|
snackVisible: false,
|
||
|
|
snackText: '',
|
||
|
|
user: {category:this.type===0?'user':'geolocated'}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render(){
|
||
|
|
return this.type===1?this.renderUserGeoAccount():this.renderUserAccount()
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
renderUserGeoAccount() {
|
||
|
|
return (<ScrollView style={styles.container}>
|
||
|
|
<View style={{flexDirection:"row"}}>
|
||
|
|
<Icon.Button name={"keyboard-backspace"}
|
||
|
|
color={"white"}
|
||
|
|
size={24}
|
||
|
|
backgroundColor={'transparent'}
|
||
|
|
onPress={()=>this.props.navigation.pop()}
|
||
|
|
/>
|
||
|
|
<Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_AGENT_1')}</Text>
|
||
|
|
</View>
|
||
|
|
<Text style={styles.subbigtitle}>{I18n.t('TEXT_SUBTITLE_CREATE_1')}</Text>
|
||
|
|
<Animatable.View ref={(comp)=>{this.nameanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'user'}
|
||
|
|
label={I18n.t('NAME')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.lastname=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.surnameanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'user-md'}
|
||
|
|
label={I18n.t('ADDRESS')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
keyboardType={"email-address"}
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.address=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.mailanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon}
|
||
|
|
iconName={'envelope'}
|
||
|
|
label={I18n.t('EMAIL')}
|
||
|
|
keyboardType={"email-address"}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.email=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.memberanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon}
|
||
|
|
iconName={'unlock-alt'}
|
||
|
|
label={I18n.t('SPONSOR_CODE')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.member=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
|
||
|
|
iconSize={20}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.passanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon}
|
||
|
|
iconName={'lock'}
|
||
|
|
label={I18n.t('PASSWORD')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
secureTextEntry={true}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.password=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
iconSize={20}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.confirmanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon}
|
||
|
|
iconName={'lock'}
|
||
|
|
secureTextEntry={true}
|
||
|
|
|
||
|
|
label={I18n.t('CONFIRM_PASSWORD')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.confirmpass=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
|
||
|
|
iconSize={20}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Button style={styles.btnvalide}
|
||
|
|
textStyle={styles.textbtnvalide}
|
||
|
|
isLoading={this.state.isLoging}
|
||
|
|
onPress={()=>{this.checkUserGeolocated()}}>
|
||
|
|
{I18n.t('NEXT')}</Button>
|
||
|
|
|
||
|
|
</ScrollView>)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
renderUserAccount() {
|
||
|
|
return (<ScrollView style={styles.container}>
|
||
|
|
<View style={{flexDirection:'row'}}>
|
||
|
|
<Icon.Button name={"keyboard-backspace"}
|
||
|
|
color={"white"}
|
||
|
|
size={24}
|
||
|
|
backgroundColor={'transparent'}
|
||
|
|
onPress={()=>this.props.navigation.pop()}
|
||
|
|
/>
|
||
|
|
<Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_1')}</Text>
|
||
|
|
</View>
|
||
|
|
<Text style={styles.subbigtitle}>{I18n.t('TEXT_SUBTITLE_CREATE_1')}</Text>
|
||
|
|
<Animatable.View ref={(comp)=>{this.nameanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'user'}
|
||
|
|
label={I18n.t('NAME')}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.lastname=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.surnameanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'user-md'}
|
||
|
|
label={I18n.t('ADDRESS')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
|
||
|
|
keyboardType={"email-address"}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.address=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.mailanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon}
|
||
|
|
iconName={'envelope'}
|
||
|
|
keyboardType={"email-address"}
|
||
|
|
label={I18n.t('EMAIL')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.email=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.passanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon}
|
||
|
|
iconName={'lock'}
|
||
|
|
label={I18n.t('PASSWORD')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
secureTextEntry={true}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.password=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.confirmanim=comp}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon}
|
||
|
|
iconName={'lock'}
|
||
|
|
secureTextEntry={true}
|
||
|
|
label={I18n.t('CONFIRM_PASSWORD')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let use=this.state.user;
|
||
|
|
use.confirmpass=text;
|
||
|
|
this.setState({user:use})}}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
|
||
|
|
onPress={()=>{this._onUserCreateAccount()}}>{I18n.t('NEXT')}</Button>
|
||
|
|
|
||
|
|
</ScrollView>)
|
||
|
|
}
|
||
|
|
|
||
|
|
_onUserCreateAccount() {
|
||
|
|
let { user }=this.state;
|
||
|
|
console.log(user)
|
||
|
|
if(user!==undefined) {
|
||
|
|
if (this.checkOrShake(user.lastname, this.nameanim)) {
|
||
|
|
if (this.checkOrShake(user.address, this.surnameanim)) {
|
||
|
|
if (this.checkOrShake(user.email, this.mailanim)) {
|
||
|
|
if (this.checkOrShake(user.password, this.passanim)) {
|
||
|
|
if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
|
||
|
|
if (user.confirmpass === user.password) {
|
||
|
|
this.props.navigation.push(route.creationstep2,{
|
||
|
|
type: this.type,
|
||
|
|
user: user
|
||
|
|
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
this.passanim.shake(800)
|
||
|
|
this.confirmanim.shake(800)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
}else{
|
||
|
|
/*this.props.navigator.showSnackbar({
|
||
|
|
text:"impossible de trouvé l'utilisateur"
|
||
|
|
})
|
||
|
|
console.log(user)
|
||
|
|
*/}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
checkUserGeolocated() {
|
||
|
|
let { user }=this.state;
|
||
|
|
this.setState({isLoging:true})
|
||
|
|
if(user!==undefined) {
|
||
|
|
if (this.checkOrShake(user.lastname, this.nameanim)) {
|
||
|
|
if (this.checkOrShake(user.address, this.surnameanim)) {
|
||
|
|
if (this.checkOrShake(user.email, this.mailanim)) {
|
||
|
|
if (this.checkOrShake(user.member, this.memberanim)) {
|
||
|
|
categoryChild(user.member).then((codes)=>{
|
||
|
|
if (codes!==undefined && codes!==null&& codes.child !== undefined) {
|
||
|
|
let user = this.state.user;
|
||
|
|
user.category = codes.child;
|
||
|
|
this.setState({user: user})
|
||
|
|
} this.setState({isLoging:false})
|
||
|
|
if (this.checkOrShake(user.password, this.passanim)) {
|
||
|
|
if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
|
||
|
|
if (user.password === user.confirmpass) {
|
||
|
|
this.props.navigation.push(route.creationstep2, {
|
||
|
|
type: this.type,
|
||
|
|
user: user
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
this.passanim.shake(800)
|
||
|
|
this.confirmanim.shake(800)
|
||
|
|
this.setState({isLoging:false})
|
||
|
|
}
|
||
|
|
}else {
|
||
|
|
this.setState({isLoging:false})
|
||
|
|
}
|
||
|
|
}else this.setState({isLoging:false})
|
||
|
|
|
||
|
|
}).catch((e)=>{ this.setState({isLoging:false})
|
||
|
|
})
|
||
|
|
|
||
|
|
}else this.setState({isLoging:false})
|
||
|
|
|
||
|
|
}else this.setState({isLoging:false})
|
||
|
|
|
||
|
|
}else this.setState({isLoging:false})
|
||
|
|
|
||
|
|
}else this.setState({isLoging:false})
|
||
|
|
|
||
|
|
}else{
|
||
|
|
this.setState({isLoging:false})
|
||
|
|
/*this.props.navigator.showSnackbar({
|
||
|
|
text:"impossible de trouvé la variable user"
|
||
|
|
})*/
|
||
|
|
console.log(user)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
checkOrShake(champ,view) {
|
||
|
|
let res=false;
|
||
|
|
if(champ!==undefined && champ.length>0) {
|
||
|
|
res = true;
|
||
|
|
}else{
|
||
|
|
view.shake(800)
|
||
|
|
}
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles=StyleSheet.create({
|
||
|
|
container:{
|
||
|
|
flex:1,
|
||
|
|
backgroundColor:theme.primaryDark,
|
||
|
|
},
|
||
|
|
textbtnvalide:{
|
||
|
|
color:'white',
|
||
|
|
fontWeight:'bold'
|
||
|
|
},
|
||
|
|
bigtitle:{
|
||
|
|
color:'white',
|
||
|
|
fontSize:20,
|
||
|
|
flex:1,
|
||
|
|
fontWeight:'bold',
|
||
|
|
textAlign:'center',
|
||
|
|
margin:20,
|
||
|
|
},
|
||
|
|
subbigtitle:{
|
||
|
|
color:'white',
|
||
|
|
fontSize:17,
|
||
|
|
textAlign:'center',
|
||
|
|
margin:5,
|
||
|
|
},
|
||
|
|
btnvalide:{
|
||
|
|
marginTop:20,
|
||
|
|
marginLeft:20,
|
||
|
|
marginRight:20,
|
||
|
|
borderColor:'transparent',
|
||
|
|
backgroundColor:theme.accentLight,
|
||
|
|
height:52
|
||
|
|
},
|
||
|
|
input:{
|
||
|
|
height:60,
|
||
|
|
marginTop:responsiveHeight(2),
|
||
|
|
marginLeft:responsiveWidth(5),
|
||
|
|
marginRight:responsiveWidth(5),
|
||
|
|
borderRadius:5,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|