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

/**
 * 忘记密码-重置密码LUMI版
 * @邠心vbe on 2024/06/05
 */
import React, { Component } from 'react';
import { View, ScrollView, StyleSheet, TextInput } from 'react-native';
import apiUser from '../../api/apiUser';
import Dialog from '../../components/Dialog';
import TextView from '../../components/TextView';
import { getStorageJsonSync, setStorage, setStorageJson } from '../../utils/storage';
import { PageList } from '../Router';

export default class ForgotPwdVL extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      strength: 0,
      password: '',
      sendMinutes: 0,
      isChange: false,
      strengthCheck: {
        minLength: false,
        wordCase: false,
        oneNumber: false,
        allCheck: false
      },
      showPassword: false,
      confirmStatusColor: "#F5F5F5"
    };
    this.formInfo = {
      email: '',
      password: '',
      verificationCode: ''
    }
  }

  componentDidMount() {
    const action = this.props.route?.params?.action ?? "";
    if (action == "change") {
      this.setState({
        isChange: true
      });
      const email = userInfo.email;
      this.formInfo.email = email;
      this.setState({
        email: email
      });
    }
  }

  changeInfo(key, value) {
    this.formInfo[key] = value;
  }

  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
    });
  }

  sendVerification() {
    var info = this.formInfo;
    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.sendVerificationCode(info.email).then(res => {
      Dialog.dismissLoading()
      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);
    }
  }

  onResetPassword() {
    var info = this.formInfo;
    console.log('reset info', info);
    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 (!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;
    }
    Dialog.showProgressDialog()
    apiUser.updatePassword(this.formInfo).then(res => {
      Dialog.dismissLoading()
      toastShort($t('sign.resetPasswordSuccess'));
      if (this.isChange) {
        this.requestLogout();
      } else {
        goBack();
      }
    }).catch(err => {
      Dialog.dismissLoading()
      toastShort(err);
    });
  }

  async requestLogout() {
    const data = await getStorageJsonSync('loginData');
    if (data && data.email) {
      delete data.password
      setStorageJson('loginData', data);
      setStorage('RegisterTokenDate', "");
    }
    global.userInfo = {}
    /*this.setState({
      isLogin: false,
      userInfo: {}
    });*/
    setAccessToken('');
    routeUtil.bridge2Page(PageList.login);
  }

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

  render() {
    return (
      <ScrollView
        style={styles.scollView}
        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}>
        <View style={styles.resetView}>
          <TextView style={styles.inputLabel}>Email Address</TextView>
          <View style={styles.signInput}>
            { this.state.isChange
            ? <TextInput
                style={styles.inputView}
                placeholder={$t('sign.labelEmail')}
                placeholderTextColor={textPlacehoder}
                value={this.state.email}
                editable={false}
                maxLength={50}/>
            : <TextInput
                style={styles.inputView}
                placeholder={$t('sign.labelEmail')}
                placeholderTextColor={textPlacehoder}
                maxLength={50}
                keyboardType="email-address"
                textContentType='emailAddress'
                clearButtonMode='while-editing'
                onChangeText={v => this.changeInfo('email', v)}/>
            }
          </View>
          {/* <Text style={styles.inputLabel}>Verification Code</Text>
          <View style={ui.flexc}>
            <View style={[styles.signInput, ui.flex2]}>
              <TextInput
                style={[styles.inputView, {flex: 2.6, marginLeft: 2}]}
                placeholder={$t('sign.labelOtp')}
                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> */}
          <TextView style={styles.inputLabel}>New Password</TextView>
          <View style={styles.signInput}>
            <TextInput
              secureTextEntry={!this.state.showPassword}
              style={styles.inputView}
              placeholder={$t('sign.labelNewPassword')}
              placeholderTextColor={textPlacehoder}
              maxLength={20}
              onChangeText={(value) => this.applyStrength(value)}/>
            <MaterialCommunityIcons
              name={this.state.showPassword ? "eye" : "eye-off"}
              size={16}
              color={"#DADADA"}
              onPress={() => this.changeSecurety()}/>
          </View>
          <View style={styles.passwordTipView}>
            <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>
          <TextView style={styles.inputLabel}>{$t('sign.labelConfirmPassword')}</TextView>
          <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.changeSecurety()}/>
          </View>
          <Button
            text={$t('common.confirm')}
            style={styles.resetButton}
            onClick={() => this.onResetPassword()}
          />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  scollView: {
    flex: 1,
    backgroundColor: colorLight
  },
  resetView: {
    padding: 16,
    backgroundColor: colorLight
  },
  inputLabel: {
    color: textPrimary,
    fontSize: 14,
    paddingBottom: 8
  },
  signInput: {
    marginBottom: 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,
    marginBottom: 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'
  },
  passwordTipView: {
    marginTop: -8,
    paddingBottom: 16
  },
  passwordTipText: {
    color: "#666",
    fontSize: 14,
    paddingTop: 2,
    paddingLeft: 8,
    paddingBottom: 2
  },
  resetButton: {
    marginTop: 32,
    marginBottom: 16,
    borderRadius: 4,
    backgroundColor: colorPrimary
  }
})