ChargEco/Strides-APP/app/pages/signLumi/RegisterVL.js

/**
 * LUMI版本Register页面
 * @邠心vbe on 2024/05/31
 */
import React, { Component } from 'react';
import { View, ScrollView, StyleSheet, TextInput, Pressable } from 'react-native';
import apiUser from '../../api/apiUser';
import Button from '../../components/Button';
import { PageList } from '../Router';
import Dialog from '../../components/Dialog';
import Dropdown from '../../components/Dropdown';
import { CountryDropNum, GetCountryList } from '../../components/CountryIcon';
import CheckBox from '../../components/CheckBox';
import TextView from '../../components/TextView';

export default class RegisterVL extends Component {
  constructor(props) {
    super(props);
    this.state = {
      agree: true,
      countryNum: '65',
      countryCode: "SG",
      userInfo: {
        email: "",
        phone: "",
        vehicle: {},
        password: "",
        verificationCode: ""
      },
      countryList: [],
      params: {...this.props.route.params},
      email: '',
      password: '',
      sendMinutes: 0,
      strengthCheck: {
        minLength: false,
        wordCase: false,
        oneNumber: false,
        allCheck: false
      },
      showPassword: false
    };
  }

  componentDidMount() {
    this.getCountryList();
  }

  togglePassword() {
    this.setState({
      showPassword: !this.state.showPassword
    })
  }

  applyStrength(text) {
    const strength = this.state.strengthCheck;
    strength.allCheck = true;
    if (text.length >= 8) {
      strength.minLength = true;
    } else {
      strength.minLength = false;
      strength.allCheck = false;
    }
    if (/\d{1,}/.test(text)) {
      strength.oneNumber = true;
    } else {
      strength.oneNumber = false;
      strength.allCheck = false;
    }
    if (/[a-z]{1,}/.test(text) && /[A-Z]{1,}/.test(text)) {
      strength.wordCase = true;
    } else {
      strength.wordCase = false;
      strength.allCheck = false;
    }
    this.setState({
      password: text,
      strengthCheck: strength
    });
  }

  changeInfo(key, value) {
    var info = this.state.userInfo;
    info[key] = value;
    this.setState({
      'userInfo': info
    });
  }

  changeAgree(ag) {
    this.setState({
      agree: ag
    })
  }

  changeCountry(value, index) {
    this.setState({
      countryCode: value
    })
    if (this.canChangeCalling) {
      const country = this.state.countryList[index]
      this.changeCalling(country.countryNum, -1);
    }
  }

  changeCalling(value, index) {
    this.setState({
      countryNum: value
    })
    if (index >= 0) {
      this.canChangeCalling = false;
    }
  }

  getCountryList() {
    GetCountryList(list => {
      this.setState({
        countryList: list
      })
    })
  }

  sendVerification() {
    var info = this.state.userInfo;
    if (!info.email) {
      toastShort($t('sign.plsInputEmail'));
      return;
    }
    if (!/^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/.test(info.email)) {
      toastShort($t('sign.errEmailFormat'));
      return;
    }
    Dialog.showProgressDialog()
    apiUser.sendVerificationCodeV2({email: info.email, type: "register"}).then(res => {
      Dialog.dismissLoading()
      //this.state.sendMinutes = 60;
      this.state.sendMinutes = res.data?.resendTime ?? 60;
      toastShort($t('sign.sendOTPSuccess'));
      this.contdownTime();
    }).catch(err => {
      Dialog.dismissLoading()
      toastShort(err);
    });
  }

  contdownTime() {
    if (this.state.sendMinutes > 0) {
      this.setState({
        sendMinutes: this.state.sendMinutes - 1
      })
      setTimeout(() => {
        this.contdownTime();
      }, 1000);
    }
  }

  onRegister() {
    //console.log('sign up', this.state);
    var info = this.state.userInfo;
    if (!info.nickName) {
      toastShort($t('sign.plsInputDiaplayName'));
      return;
    }
    if (!info.email) {
      toastShort($t('sign.plsInputEmail'));
      return;
    }
    if (!/^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/.test(info.email)) {
      toastShort($t('sign.errEmailFormat'));
      return;
    }
    /*if (!info.verificationCode) {
      toastShort($t('sign.plsInputOTP'));
      return;
    }*/
    if (!info.phone) {
      toastShort($t('sign.plsInputContactNo'));
      return;
    }
    if (!/^\d{6,15}$/.test(info.phone)) {
      toastShort($t('sign.errContactNoFormat'));
      return;
    }
    if (!this.state.password) {
      toastShort($t('sign.plsInputPassword'));
      return;
    }
    if (!this.state.strengthCheck.allCheck) {
      toastShort($t('sign.errPasswordStrong'));
      return;
    }
    if (!info.password) {
      toastShort($t('sign.plsInputPassword2'));
      return;
    }
    if (info.password != this.state.password) {
      toastShort($t('sign.errPasswordConfirm'));
      return;
    }
    if (this.state.isFleetDriver) {
      if (!info.pdvLicence) {
        toastShort($t('sign.plsInputPDVLicence'));
        return;
      }
      if (this.state.pdvImages[0] == '' || this.state.pdvImages[1] == '') {
        toastShort($t('sign.plsUploadLicencePhotos'));
        return;
      }
    }
    let param = Object.assign({}, info);
    //param.phone = this.state.countryNum + info.phone
    param.callingCode = this.state.countryNum;
    param.countryCode = this.state.countryCode;
    if (this.state.isFleetDriver) {
      param.userType = 'Driver';
      param.pdvLicencePictures = this.state.pdvImages;
      param.fleetCompanyId = this.state.fleetCompanyId;
    } else {
      param.userType = 'Public';
    }
    param.otp = param.verificationCode;
    param.vehicle = this.state.vehicleInfo;
    console.log('params', param);
    Dialog.showProgressDialog();
    apiUser.register(param).then(res => {
      Dialog.dismissLoading();
      //toastShort('Sign up successfully!');
      if (isIOS) {
        setTimeout(() => {
          this.showSuccessDialog();
        }, 600);
      } else {
        this.showSuccessDialog();
      }
    }).catch(err => {
      toastShort(err);
      Dialog.dismissLoading();
    });
  }

  render() {
    return (
      <ScrollView
        style={styles.container}
        contentContainerStyle={$padding(16)}
        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}>
        {/* <TextView style={styles.textTitle}>Registration details</TextView>
        <TextView style={styles.textSubTitle}>Please input relevant info as stated</TextView> */}
        <View style={styles.signInput}>
          <TextInput
            style={styles.inputView} 
            placeholder={$t('sign.labelDisplayName')}
            placeholderTextColor={textPlacehoder}
            maxLength={50}
            onChangeText={v => this.changeInfo('nickName', v)}
          />
        </View>
        <View style={styles.signInput}>
          <TextInput
            style={styles.inputView}
            placeholder={$t('sign.labelEmail')}
            placeholderTextColor={textPlacehoder}
            maxLength={50}
            keyboardType="email-address"
            textContentType='emailAddress'
            onChangeText={v => this.changeInfo('email', v)}
          />
        </View>
        {/* <View style={ui.flexc}>
          <View style={[styles.signInput, ui.flex2]}>
            <TextInput
              style={[styles.inputView, {flex: 2.2, marginLeft: 2}]}
              placeholder={"Validate OTP"}
              placeholderTextColor={textPlacehoder}
              maxLength={6}
              keyboardType="number-pad"
              textContentType="telephoneNumber"
              onChangeText={v => this.changeInfo('verificationCode', v)}
            />
          </View>
          <Button
            text={this.state.sendMinutes > 0 ? (this.state.sendMinutes + " s") : $t('sign.btnSendOTP')}
            style={styles.sendBtn}
            disabled={this.state.sendMinutes > 0}
            viewStyle={styles.sendBtnView}
            textStyle={styles.sendBtnText}
            onClick={() => this.sendVerification()}
          />
        </View> */}
        <View style={ui.flexc}>
          <View style={[styles.signInput, styles.dropView]}>
            <TextInput style={styles.dropInput} editable={false}/>
            <TextView style={styles.countryText}>{"+" + this.state.countryNum}</TextView>
            <MaterialIcons name={'keyboard-arrow-down'} size={24} color={colorDark}/>
            <Dropdown
              style={styles.dropLayer}
              prefixText="+"
              list={this.state.countryList}
              value={this.state.countryNum}
              nameKey='countryNum'
              valueKey='countryNum'
              onChange={(value, index)=> this.changeCalling(value, index)}
              customerItemView={
                (item, index, onClick) => 
                <CountryDropNum
                  key={index} 
                  country={item}
                  value={this.state.countryNum}
                  onClick={onClick}/>
              }/>
          </View>
          <View style={[styles.signInput, ui.flex2]}>
            <TextInput
              style={styles.inputView}
              placeholder={$t('sign.labelMobileNumber')}
              placeholderTextColor={textPlacehoder}
              keyboardType='phone-pad'
              maxLength={15}
              onChangeText={v => this.changeInfo('phone', v)}
            />
          </View>
        </View>
        <View style={styles.signInput}>
          <TextInput
            secureTextEntry={!this.state.showPassword}
            style={styles.inputView}
            placeholder={$t('sign.labelPassword')}
            placeholderTextColor={textPlacehoder}
            maxLength={20}
            onChangeText={(value) => this.applyStrength(value)}/>
          <MaterialCommunityIcons
            name={this.state.showPassword ? "eye" : "eye-off"}
            size={16}
            color={"#DADADA"}
            onPress={() => this.togglePassword()}/>
        </View>
        <View style={styles.passwordTipView}>
          {/* <TextView style={styles.passwordTipText}>Your password must have:</TextView> */}
          <View style={ui.flexc}>
            <MaterialIcons
              name="check-circle-outline"
              color={this.state.strengthCheck.minLength ? colorAccent : colorCancel}
              size={18}/>
            <TextView style={styles.passwordTipText}>8 or more characters</TextView>
          </View>
          <View style={ui.flexc}>
            <MaterialIcons
              name="check-circle-outline"
              color={this.state.strengthCheck.wordCase ? colorAccent : colorCancel}
              size={18}/>
            <TextView style={styles.passwordTipText}>Upper and Lower case letters</TextView>
          </View>
          <View style={ui.flexc}>
            <MaterialIcons
              name="check-circle-outline"
              color={this.state.strengthCheck.oneNumber ? colorAccent : colorCancel}
              size={18}/>
            <TextView style={styles.passwordTipText}>At least one number</TextView>
          </View>
        </View>
        <View style={styles.signInput}>
          <TextInput
            secureTextEntry={!this.state.showPassword}
            style={styles.inputView}
            placeholder={$t('sign.labelConfirmPassword')}
            placeholderTextColor={textPlacehoder}
            maxLength={20}
            onChangeText={v => this.changeInfo('password', v)}/>
          <MaterialCommunityIcons
            name={this.state.showPassword ? "eye" : "eye-off"}
            size={16}
            color={"#DADADA"}
            onPress={() => this.togglePassword()}/>
        </View>
        <EndView/><EndView half/>
        {/* <TextView style={styles.textTitle}>Got A Referral Code?</TextView>
        <TextView style={styles.textSubTitle}>Please input the code from your referrer</TextView>
        <View style={styles.signInput}>
          <TextInput
            style={styles.inputView}
            placeholder={"Referral Code"}
            placeholderTextColor={textPlacehoder}
            maxLength={6}
            onChangeText={v => this.changeInfo('referralCode', v)}/>
        </View> */}
        <View style={styles.agreeView}>
          <CheckBox
            value={this.state.agree}
            onValueChange={v => this.changeAgree(v)}
          />
          <View style={styles.agreeTextRow}>
            <TextView style={styles.agreeText} onPress={() => this.changeAgree(!this.state.agree)}>
              {$t('sign.iHaveReadAndAgree')}
            </TextView>
            <TextView style={styles.agreeLink} onPress={() => startPage(PageList.condition)}>{$t('drawer.termsOfUse')}</TextView>
            <TextView style={styles.agreeText}>{' '}</TextView>
            <TextView style={styles.agreeText}>{$t('sign.linkAndLink')}</TextView>
            <TextView style={styles.agreeLink} onPress={() => startPage(PageList.privacy)}>{$t('drawer.privacyPolicy')}</TextView>
            <TextView style={styles.agreeText}>{$t('sign.linkAndLinkEnd')}</TextView>
          </View>
        </View>
        <Button
          style={styles.signButton}
          elevation={0}
          disabled={!this.state.agree}
          text={$t('sign.btnRegister')}
          fontSize={14}
          onClick={() => this.onRegister()}/>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colorLight
  },
  textTitle: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: "bold"
  },
  textSubTitle: {
    color: textSecondary,
    fontSize: 12
  },
  signInput: {
    marginTop: 16,
    borderRadius: 0,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row',
    borderWidth: 1,
    borderRadius: 4,
    borderColor: "#DADADA"
  },
  inputView: {
    flex: 1,
    height: 48,
    color: textPrimary,
    fontSize: 12
  },
  sendBtn: {
    flex: 1.2,
    marginLeft: 16,
    marginRight: 0,
    marginTop: 16,
    borderRadius: 6,
    backgroundColor: colorPrimary
  },
  sendBtnView: {
    flex: 1,
    height: 48,
    paddingLeft: 4,
    paddingRight: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  sendBtnText: {
    color: textButton,
    fontSize: 13,
    fontWeight: 'bold'
  },
  dropView: {
    flex: 1,
    marginRight: 16,
    paddingRight: 8,
    alignItems: "center",
    flexDirection: "row"
  },
  dropLayer: {
    left: 0,
    right: 0,
    opacity: 0,
    position: 'absolute'
  },
  dropInput: {
    width: 8,
    color: textPrimary,
    height: 48
  },
  countryText: {
    flex: 1,
    color: "#9D9D9D",
    fontSize: 14,
    paddingRight: 4
  },
  passwordTipView: {
    paddingTop: 8
  },
  passwordTipText: {
    color: "#666",
    fontSize: 14,
    paddingTop: 2,
    paddingLeft: 8,
    paddingBottom: 2
  },
  agreeView: {
    marginTop: 48,
    marginBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  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'
  },
  signButton: {
    marginBottom: 24,
    borderRadius: 4,
    backgroundColor: colorPrimary
  }
})