ChargEco/Strides-APP/app/pages/sign/RegisterV2.js

/**
 * 注册页面V2
 * @邠心vbe on 2022/12/23
 */
 import React from 'react';
 import { View, Text, ScrollView, StyleSheet, TextInput, Pressable, Image } from 'react-native';
 import { BackIcon } from '../../components/Toolbar';
 import apiUser from '../../api/apiUser';
 import Button from '../../components/Button';
 import { PageList } from '../Router';
 import Dialog from '../../components/Dialog';
 import Modal from 'react-native-modal';
 import { RegisterDialog } from '../charge/InfoDialog';
 import Dropdown from '../../components/Dropdown';
 import ImagePicker from 'react-native-image-crop-picker';
 import apiUpload from '../../api/apiUpload';
 import { host } from '../../api/http';
 import { ModalProps } from '../../components/BottomModal';
 import { CountryDropNum, GetCountryList } from '../../components/CountryIcon';
import CheckBox from '../../components/CheckBox';
 
 const options = {
   width: 300,
   height: 200,
   cropping: true,
   multiple: false,
   mediaType: 'photo',
   writeTempFile: false,
   compressImageQuality: 0.8,
   compressImageMaxWidth: 720,
   compressImageMaxHeight: 1280,
   cropperStatusBarColor: colorAccent,
   cropperToolbarColor: colorAccent,
   cropperActiveWidgetColor: colorAccent
 }
 
 export const StrengthView = ({strength}) => {
   const getStyle = (num) => {
     if (strength >= num) {
       return {...styles.strengthItem, backgroundColor: colorAccent};
     } else {
       return styles.strengthItem;
     }
   }
   return (
     <>
       <Text style={getStyle(1)}></Text>
       <Text style={getStyle(2)}></Text>
       <Text style={getStyle(3)}></Text>
       {/* <Text style={getStyle(4)}></Text> */}
       {/* <Text style={getStyle(5)}></Text> */}
     </>
   );
 };
 
 export default class Register extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       agree: true,
       strength: 0,
       countryNum: '65',
       countryShow: false,
       userInfo: {},
       countryNums: [],
       wrongCount: 0,
       params: {...this.props.route.params},
       email: '',
       password: '',
       fleetCompanyId: '',
       visible: false,
       isFleetDriver: false,
       pdvImages: ['', ''],
       companyList: []
     };
   }
 
   componentDidMount() {
     //console.log(this.state.params);
     this.getCountryList();
     this.getCompanyList();
   }
 
   applyStrength(text) {
     var strength = 0;
     if (text.length >= 8) {
       strength += 1;
     }
     if (/\d{1,}/.test(text)) {
       strength += 1;
     }
     if (/[A-z]{1,}/.test(text)) {
       strength += 1;
     }
     /*if (/[A-Z]{1,}/.test(text)) {
       strength += 1;
     }
     /*if (/\W{1,}/.test(text)) {
       strength += 1;
     }*/
     if (this.state.strength != strength) {
       this.setState({
         password: text,
         strength: strength
       });
     } else {
       this.setState({
         password: text
       });
     }
   }
 
   changeInfo(key, value) {
     var info = this.state.userInfo;
     info[key] = value;
     this.setState({
       'userInfo': info
     });
   }
 
   changeTab(type) {
     this.setState({
       isFleetDriver: type
     })
   }
 
   getCountryList() {
     GetCountryList(list => {
       this.setState({
         countryNums: list
       })
     })
   }
 
   getCompanyList() {
     apiUser.getConmpany().then(res => {
       if (res.data) {
         this.setState({
           companyList: res.data
         })
       }
     }).catch(err => [
       toastShort(err)
     ])
   }
 
   onRegister() {
     //console.log('sign up', this.state);
     var info = this.state.userInfo;
     if (!info.nickName) {
       toastShort('Please enter display name');
       return;
     }
     if (!info.email) {
       toastShort('Please enter email address');
       return;
     }
     if (!/^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/.test(info.email)) {
       toastShort('Email is incorrect format');
       return;
     }
     if (!info.phone) {
       toastShort('Please enter contact number');
       return;
     }
     if (!/^\d{6,15}$/.test(info.phone)) {
       toastShort('Phone Number is incorrect format');
       return;
     }
     if (!this.state.password) {
       toastShort('Please enter password');
       return;
     }
     if (this.state.strength < 3) {
       toastShort('Password is not strong');
       return;
     }
     if (!info.password) {
       toastShort('Please enter confirm password');
       return;
     }
     if (info.password != this.state.password) {
       toastShort('The twice passwords are inconsistent');
       if (this.state.wrongCount < 3) {
         this.setState({
           wrongCount: this.state.wrongCount + 1
         })
       }
       return;
     }
     if (this.state.isFleetDriver) {
       if (!info.pdvLicence) {
         toastShort('Please enter PDV Licence');
         return;
       }
       if (this.state.pdvImages[0] == '' || this.state.pdvImages[1] == '') {
         toastShort('Please upload PDV Licence Photos');
         return;
       }
     }
     let param = Object.assign({}, info);
     //param.phone = this.state.countryNum + info.phone
     param.callingCode = this.state.countryNum;
     if (this.state.isFleetDriver) {
       param.userType = 'Driver';
       param.pdvLicencePictures = this.state.pdvImages;
       param.fleetCompanyId = this.state.fleetCompanyId;
     } else {
       param.userType = 'Public';
     }
     console.log('params', param);
     Dialog.showProgressDialog();
     apiUser.register(param).then(res => {
       Dialog.dismissLoading();
       //toastShort('Sign up successfully!');
       this.setState({
         email: param.email,
         visible: true
       });
       //this.backToLogin();
     }).catch(err => {
       toastShort(err);
       Dialog.dismissLoading();
     });
   }
   
   getBackTopPosition() {
     return isIOS ? statusHeight - 16 : 8;
   }
   
   backToLogin() {
     if (this.state.params.actionLogin) {
       goBack()
       startPage(PageList.login);
     } else {
       goBack();
     }
   }
 
   uploadImage(index) {
     ImagePicker.openPicker(options).then(image => {
       if (image.path) {
         apiUpload.uploadImage(image.path, image.mime, 'PDVL').then(res => {
           if (res.success && res.data.picturePath) {
             let imageUrl = this.state.pdvImages;
             imageUrl[index] = res.data.picturePath;
             this.setState({
               pdvImages: imageUrl
             });
           } else {
             toastShort('Upload failed, please retry');
           }
         }).catch(err => {
           toastShort(err);
         });
       }
     }).catch(err => {
       //console.log(err);
     });
   }
 
   changeAgree(ag) {
     this.setState({
       agree: ag
     })
   }
 
   hideDialog() {
     this.setState({
       visible: false
     });
     this.backToLogin();
   }
 
   render() {
     return (
       <View style={StyleSheet.absoluteFillObject}>
         <ScrollView
           style={styles.scollView}
           keyboardShouldPersistTaps={'handled'}>
           <View style={styles.header}>
             <View style={styles.logoView}>
               {/* <Image
                 style={styles.logoImg}
                 source={require('../../images/tool-logo.png')}/> */}
             </View>
           </View>
           <View style={{...styles.backView, top: this.getBackTopPosition()}}>
             <Button
               style={styles.backButton}
               viewStyle={styles.backButtonView}
               onClick={() => goBack()}>
               <BackIcon/>
               <Text style={{color: '#333',fontSize: 16,paddingLeft: 8}}>Back to Login</Text>
             </Button>
           </View>
           <View style={styles.signView}>
             <View style={styles.tabView}>
               <Text 
                 style={[
                   styles.tabText, 
                   this.state.isFleetDriver ? {} : styles.tabActive
                 ]}
                 onPress={() => this.changeTab(false)}
               >Public Users</Text>
               <Text
                 style={[
                   styles.tabText,
                   this.state.isFleetDriver ? styles.tabActive: {}
                 ]}
                 onPress={() => this.changeTab(true)}
               >Fleet/PH Drivers</Text>
             </View>
             <Text style={styles.title}>Registration</Text>
             <View style={styles.signInput}>
               <Text style={styles.inputLabel}>Display Name</Text>
               <TextInput
                 style={styles.inputView} 
                 placeholder='Display Name'
                 maxLength={50}
                 onChangeText={v => this.changeInfo('nickName', v)}
               />
             </View>
             <View style={styles.signInput}>
               <Text style={styles.inputLabel}>Email Address</Text>
               <TextInput
                 style={styles.inputView}
                 placeholder='Email Address'
                 maxLength={50}
                 onChangeText={v => this.changeInfo('email', v)}
               />
             </View>
             <View style={styles.signInput}>
               <Text style={styles.inputLabel}>Phone Number</Text>
               <View style={styles.mobileView}>
                 <View style={styles.dropView}>
                   <TextInput style={styles.dropInput} editable={false}/>
                   <Text style={styles.countryText}>{"+" + this.state.countryNum}</Text>
                   <MaterialIcons name={'arrow-drop-down'} size={24} color={'#333'}/>
                   <Dropdown
                     style={styles.dropLayer}
                     title='Country'
                     prefixText="+"
                     list={this.state.countryNums}
                     value={this.state.countryNum}
                     nameKey='countryNum'
                     valueKey='countryNum'
                     onChange={(value, index)=> {
                       this.setState({
                         countryNum: value
                       })
                     }}
                     customerItemView={
                       (item, index, onClick) => 
                       <CountryDropNum
                         key={index} 
                         country={item}
                         value={this.state.countryNum}
                         onClick={onClick}/>
                     }/>
                 </View>
                 <TextInput
                   style={styles.contactView}
                   placeholder='Mobile Number'
                   keyboardType='phone-pad'
                   maxLength={15}
                   onChangeText={v => this.changeInfo('phone', v)}
                 />
               </View>
             </View>
             <View style={styles.signInput}>
               <Text style={styles.inputLabel}>Create Password</Text>
               <TextInput
                 secureTextEntry={this.state.wrongCount < 3}
                 style={styles.inputView}
                 placeholder='Password'
                 maxLength={20}
                 onChangeText={(value) => {
                   this.applyStrength(value);
                 }}
               />
             </View>
             <View style={styles.signInput}>
               <Text style={styles.inputLabel}></Text>
               <View style={styles.passwordView}>
                 <View style={styles.strengthView}>
                   <Text style={{fontSize:12, paddingRight: 4, color: '#333'}}>Password Strength</Text>
                   <StrengthView {...this.state}/>
                 </View>
                 <View>
                   <Text style={styles.passwordRole}>Your Password Must Have:</Text>
                   <Text style={styles.passwordRole}>- 8 or more characters</Text>
                   {/* <Text style={styles.passwordRole}>- upper and lower case letters</Text> */}
                   <Text style={styles.passwordRole}>- at least one number</Text>
                 </View>
               </View>
             </View>
             <View style={styles.signInput}>
               <Text style={styles.inputLabel}>Confirm Password</Text>
               <TextInput
                 secureTextEntry={this.state.wrongCount < 3}
                 style={styles.inputView}
                 placeholder='Password'
                 maxLength={20}
                 onChangeText={v => this.changeInfo('password', v)}
               />
             </View>
             { this.state.isFleetDriver &&
               <>
               <View style={styles.signInput}>
                 <Text style={styles.inputLabel}>Your Company</Text>
                 <Dropdown
                   style={[styles.inputView, ui.flexc]}
                   title='Company'
                   list={this.state.companyList}
                   value={this.state.fleetCompanyId}
                   valueKey='fleetCompanyId'
                   nameKey='fleetCompanyName'
                   onChange={(value, index)=> {
                     this.setState({
                       fleetCompanyId: value
                     })
                   }}/>
               </View>
               <View style={styles.signInput}>
                 <Text style={styles.inputLabel}>{'PDV Licence'}</Text>
                 <TextInput
                   style={styles.inputView}
                   placeholder='PH Driver Vocational Licence'
                   maxLength={20}
                   onChangeText={v => this.changeInfo('pdvLicence', v)}
                 />
               </View>
               <View style={styles.signInput}>
                 <Text style={styles.inputLabel}>{'  PDV Photos\n(Front & Back)'}</Text>
                 <View style={styles.uploadGroup}>
                   { this.state.pdvImages.map((item, index) => (
                     <UploadView
                       key={index}
                       onPress={() => this.uploadImage(index)}
                       url={item}/>
                     )) 
                   }
                 </View>
               </View>
               </>
             }
             <View style={styles.referView}>
               <Text style={styles.referTitle}>Have a referral code?</Text>
               <View style={styles.referText}>
                 <Text>You'll get</Text>
                 <Text style={styles.weight}>$5</Text>
                 <Text>Credit as registration bonus!</Text>
               </View>
               <View style={styles.codeView}>
                 <Text style={{ color: '#333', fontSize: 16 }}>Referral Code</Text>
                 <TextInput
                   style={styles.codeText}
                   maxLength={6}
                   placeholder='Referral Code'
                   onChangeText={v => this.changeInfo('referralCode', v)}
                 />
               </View>
             </View>
             <View style={styles.agreeView}>
               <CheckBox
                 value={this.state.agree}
                 onValueChange={v => this.changeAgree(v)}
               />
               <View style={styles.agreeTextRow}>
                 <Text style={styles.agreeText} onPress={() => this.changeAgree(!this.state.agree)}>
                   {'I have read and I agree with the '}
                 </Text>
                 <Text style={styles.agreeLink} onPress={() => startPage(PageList.condition)}>Terms of Use</Text>
                 <Text style={styles.agreeText}>{' '}</Text>
                 <Text style={styles.agreeText}>{'and '}</Text>
                 <Text style={styles.agreeLink} onPress={() => startPage(PageList.privacy)}>Privacy Policy</Text>
                 <Text style={styles.agreeText}>.</Text>
               </View>
             </View>
             <Button
               style={styles.signButton}
               elevation={1.5}
               disabled={!this.state.agree}
               text='SIGN UP'
               fontSize={14}
               onClick={() => {
                 this.onRegister();
               }}
             />
           </View>
         </ScrollView>
         <Modal
           isVisible={this.state.visible}
           onBackButtonPress={() => this.hideDialog()}
           {...ModalProps}>
           <RegisterDialog
             address={this.state.email}
             onClose={() => this.hideDialog()}
           />
         </Modal>
       </View>
     );
   }
 }
 
 const UploadView = ({url, onPress}) => (
   <Pressable
     style={styles.uploadView}
     onPress={onPress}>
     { url == ''
     ? <Image
         style={styles.uploadIcon}
         source={require('../../images/icon/ic-add-photo.png')}/>
     : <Image
         style={styles.uploadIcon}
         defaultSource={require('../../images/icon/icon-upload-default.png')}
         source={{uri: host + url}}/>
     }
   </Pressable>
 )
 
 const styles = StyleSheet.create({
   header: {
     paddingTop: 56,
     backgroundColor: colorThemes
   },
   backView: {
     top: 12,
     zIndex: 5,
     padding: 16,
     position: 'absolute',
     flexDirection: 'row'
   },
   backButton: {
     borderRadius: 60,
     backgroundColor: 'white'
   },
   backButtonView: {
     height: 43,
     paddingLeft: 16,
     paddingRight: 16,
     alignItems: 'center',
     flexDirection: 'row'
   },
   scollView: {
     flex: 1
   },
   logoView: {
     paddingTop: 32,
     paddingBottom: 56,
     alignItems: 'center'
   },
   logoImg: {
     width:165.09,
     height: 51.94,
   },
   signView: {
     flex: 1,
     padding: 16,
     marginTop: -30,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     backgroundColor: 'white'
   },
   tabView: {
     marginBottom: 4,
     borderWidth: 1,
     borderRadius: 6,
     overflow: 'hidden',
     alignItems: 'center',
     flexDirection: 'row',
     borderColor: colorPrimary,
   },
   tabText: {
     flex: 1,
     color: '#333',
     fontSize: 15,
     textAlign: 'center',
     ...$padding(10, 0),
   },
   tabActive: {
     color: '#fff',
     fontWeight: 'bold',
     backgroundColor: colorPrimary
   },
   title: {
     color: '#333',
     fontSize: 18,
     fontWeight: '700',
     paddingTop: 4,
     paddingBottom: 6,
   },
   signInput: {
     marginTop: 16,
     alignItems: 'center',
     flexDirection: 'row'
   },
   inputLabel: {
     flex: 1,
     color: '#333',
     fontSize: 14,
     marginRight: 4
   },
   inputView: {
     flex: 2,
     color: '#333',
     fontSize: 14,
     borderRadius: 5,
     minHeight: 40,
     paddingTop: 6,
     paddingLeft: 12,
     paddingRight: 12,
     paddingBottom: 6,
     backgroundColor: '#F5F5F5'
   },
   mobileView: {
     flex: 2,
     marginLeft: -12,
     alignItems: 'center',
     flexDirection: 'row'
   },
   dropView: {
     fontSize: 16,
     borderRadius: 4,
     paddingRight: 4,
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: '#F5F5F5'
   },
   dropInput: {
     width: 12,
     padding: 6,
     color: '#333',
     minHeight: 40,
   },
   countryText: {
     color: '#333',
     fontSize: 14,
     paddingRight: 4
   },
   dropLayer: {
     left: 0,
     right: 0,
     opacity: 0,
     position: 'absolute'
   },
   contactView: {
     flex: 1,
     color: '#333',
     fontSize: 15,
     borderRadius: 4,
     minHeight: 40,
     paddingTop: 6,
     paddingLeft: 12,
     paddingRight: 12,
     paddingBottom: 6,
     marginLeft: 10,
     backgroundColor: '#F5F5F5'
   },
   passwordView: {
     flex: 2,
     marginTop: -8,
   },
   strengthView: {
     marginTop: -4,
     alignItems: 'center',
     paddingBottom: 4,
     flexDirection: 'row'
   },
   passwordRole: {
     color: '#999',
     fontSize: 10,
     lineHeight: 13
   },
   strengthItem: {
     width: 14,
     height: 2.5,
     marginLeft: 8,
     borderRadius: 3,
     backgroundColor: '#CCC'
   },
   referView: {
     padding: 16,
     marginTop: 24,
     borderRadius: 6,
     alignItems: 'center',
     backgroundColor: '#F5F5F5'
   },
   referTitle: {
     color: '#333',
     fontSize: 18,
     fontWeight: 'bold'
   },
   referText: {
     color: '#333',
     paddingTop: 4,
     alignItems: 'flex-end',
     flexDirection: 'row'
   },
   weight: {
     fontSize: 18,
     paddingLeft: 4,
     paddingRight: 4,
     color: colorAccent,
     fontWeight: 'bold'
   },
   codeView: {
     paddingTop: 16,
     alignItems: 'center',
     flexDirection: 'row'
   },
   codeText: {
     color: '#333',
     fontSize: 16,
     paddingTop: 6,
     paddingLeft: 12,
     paddingRight: 12,
     paddingBottom: 6,
     minHeight: 40,
     marginLeft: 16,
     borderRadius: 6,
     textAlign: 'center',
     backgroundColor: 'white'
   },
   signButton: {
     marginTop: 24,
     marginBottom: 8,
   },
   uploadGroup: {
     flex: 2,
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'center'
   },
   uploadView: {
     flex: 1,
     alignItems: 'center'
   },
   uploadIcon: {
     width: $vw(28),
     height: $vw(28),
     borderRadius: 6
   },
   agreeView: {
     marginTop: 24,
     marginBottom: 16,
     flexDirection: 'row',
     alignItems: 'flex-start',
   },
   agreeTextRow: {
     flex: 1,
     paddingTop: 4,
     paddingLeft: 8,
     flexWrap: 'wrap',
     flexDirection: 'row'
   },
   agreeText: {
     color: '#333',
     fontSize: 14,
     paddingTop: 2,
     paddingBottom: 2
   },
   agreeLink: {
     ...ui.link,
     fontSize: 14,
     paddingTop: 2,
     paddingBottom: 2,
     textDecorationLine: 'underline'
   }
 });