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

/**
 * 注册页面
 * @邠心vbe on 2021/03/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 CheckBox from '@react-native-community/checkbox';
import { ModalProps } from '../../components/BottomModal';
import { CountryDropNum, GetCountryList } from '../../components/CountryIcon';

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}
                onTintColor={colorAccent}
                onCheckColor={colorAccent}
                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: colorAccent
  },
  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: colorAccent,
  },
  tabText: {
    flex: 1,
    color: '#333',
    fontSize: 15,
    textAlign: 'center',
    ...$padding(10, 0),
  },
  tabActive: {
    fontWeight: 'bold',
    backgroundColor: colorAccent
  },
  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'
  }
});