add app/pages/sign/RegisterPublic.js

Strides-SPAPP/app/pages/sign/RegisterPublic.js

@@ -0,0 +1,701 @@
+/**
+ * 司机用户注册页面
+ * @邠心vbe on 2023/02/01
+ */
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet, TextInput, Pressable, Image } from 'react-native';
+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 StrengthView from './StrengthView';
+import CheckBox from '../../components/CheckBox';
+import { UploadThemes } from '../../components/ThemesConfig';
+import utils from '../../utils/utils';
+ 
+const options = {
+  width: 300,
+  height: 200,
+  cropping: true,
+  multiple: false,
+  mediaType: 'photo',
+  writeTempFile: false,
+  compressImageQuality: 0.8,
+  compressImageMaxWidth: 720,
+  compressImageMaxHeight: 1280,
+  ...UploadThemes
+}
+
+export default class RegisterPublic extends React.Component {
+  constructor(props) {
+    super(props);
+    this.StrengthView = StrengthView.V1
+    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) {
+    this.StrengthView.apply(text, strength => {
+      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
+    });
+  }
+
+  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 (!utils.isValidEmail(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 < this.StrengthView.maxStrength) {
+      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={styles.container}>
+        <ScrollView
+          style={styles.scollView}
+          keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}>
+          <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> */}
+            <View style={styles.signInput}>
+              <Text style={styles.inputLabel}>Display Name</Text>
+              <TextInput
+                style={styles.inputView} 
+                placeholder='Display Name'
+                placeholderTextColor={textPlacehoder}
+                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'
+                placeholderTextColor={textPlacehoder}
+                maxLength={50}
+                keyboardType="email-address"
+                textContentType='emailAddress'
+                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={colorDark}/>
+                  <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'
+                  placeholderTextColor={textPlacehoder}
+                  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'
+                placeholderTextColor={textPlacehoder}
+                maxLength={20}
+                onChangeText={(value) => {
+                  this.applyStrength(value);
+                }}
+              />
+            </View>
+            <View style={styles.signInput}>
+              <Text style={styles.inputLabel}></Text>
+              <View style={styles.passwordView}>
+                <this.StrengthView.VIEW strength={this.state.strength}/>
+              </View>
+            </View>
+            <View style={styles.signInput}>
+              <Text style={styles.inputLabel}>Confirm Password</Text>
+              <TextInput
+                secureTextEntry={this.state.wrongCount < 3}
+                style={styles.inputView}
+                placeholder='Password'
+                placeholderTextColor={textPlacehoder}
+                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'
+                  placeholderTextColor={textPlacehoder}
+                  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: textPrimary, fontSize: 16 }}>Referral Code</Text>
+                <TextInput
+                  style={styles.codeText}
+                  maxLength={6}
+                  placeholder='Referral Code'
+                  placeholderTextColor={textPlacehoder}
+                  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({
+  container: {
+    flex: 1,
+    backgroundColor: colorLight
+  },
+  header: {
+    paddingTop: 56,
+    backgroundColor: colorAccent
+  },
+  backView: {
+    top: 12,
+    zIndex: 5,
+    padding: 16,
+    position: 'absolute',
+    flexDirection: 'row'
+  },
+  backButton: {
+    borderRadius: 60,
+    backgroundColor: colorLight
+  },
+  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: colorLight
+  },
+  tabView: {
+    marginBottom: 4,
+    borderWidth: 1,
+    borderRadius: 6,
+    overflow: 'hidden',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderColor: colorAccent,
+  },
+  tabText: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 15,
+    textAlign: 'center',
+    ...$padding(10, 0),
+  },
+  tabActive: {
+    fontWeight: 'bold',
+    backgroundColor: colorAccent
+  },
+  title: {
+    color: textPrimary,
+    fontSize: 18,
+    fontWeight: '700',
+    paddingTop: 4,
+    paddingBottom: 6,
+  },
+  signInput: {
+    marginTop: 16,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  inputLabel: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 14,
+    marginRight: 4
+  },
+  inputView: {
+    flex: 2,
+    color: textPrimary,
+    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: textPrimary,
+    minHeight: 40,
+  },
+  countryText: {
+    color: textPrimary,
+    fontSize: 14,
+    paddingRight: 4
+  },
+  dropLayer: {
+    left: 0,
+    right: 0,
+    opacity: 0,
+    position: 'absolute'
+  },
+  contactView: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 15,
+    borderRadius: 4,
+    minHeight: 40,
+    paddingTop: 6,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingBottom: 6,
+    marginLeft: 10,
+    backgroundColor: '#F5F5F5'
+  },
+  passwordView: {
+    flex: 2,
+    marginTop: -8,
+  },
+  referView: {
+    padding: 16,
+    marginTop: 24,
+    borderRadius: 6,
+    alignItems: 'center',
+    backgroundColor: '#F5F5F5'
+  },
+  referTitle: {
+    color: textPrimary,
+    fontSize: 18,
+    fontWeight: 'bold'
+  },
+  referText: {
+    color: textPrimary,
+    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: textPrimary,
+    fontSize: 16,
+    paddingTop: 6,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingBottom: 6,
+    minHeight: 40,
+    marginLeft: 16,
+    borderRadius: 6,
+    textAlign: 'center',
+    backgroundColor: colorLight
+  },
+  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: textPrimary,
+    fontSize: 14,
+    paddingTop: 2,
+    paddingBottom: 2
+  },
+  agreeLink: {
+    ...ui.link,
+    fontSize: 14,
+    paddingTop: 2,
+    paddingBottom: 2,
+    textDecorationLine: 'underline'
+  }
+});