ChargEco/Strides-SPAPP/app/pages/sign/ResetPassword.js

/**
 * 忘记密码-重置密码页面
 * @邠心vbe on 2021/10/18
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Image, TextInput } from 'react-native';
import apiUser from '../../api/apiUser';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import { BackIcon } from '../../components/Toolbar';
import utils from '../../utils/utils';
import { StrengthView } from './Register';

export default class ResetPassword extends Component {
  constructor(props) {
    super(props);
    this.state = {
      strength: 0,
      password: '',
      wrongCount: 0,
      sendMinutes: 0
    };
    this.formInfo = {
      email: '',
      password: '',
      verificationCode: ''
    }
  }

  componentWillUnmount() {
    this.setState({
      sendMinutes: 0
    })
  }

  getBackTopPosition() {
    return isIOS ? statusHeight - 18 : 12;
  }

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

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

  sendVerification() {
    var info = this.formInfo;
    if (!info.email) {
      toastShort($t('sign.plsInputEmail'));
      return;
    }
    if (!utils.isValidEmail(info.email)) {
      toastShort($t('sign.errEmailFormat'));
      return;
    }
    Dialog.showProgressDialog()
    apiUser.sendVerificationCode(info.email).then(res => {
      Dialog.dismissLoading()
      this.state.sendMinutes = 60;
      toastShort('Send verification code successfully');
      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 (!utils.isValidEmail(info.email)) {
      toastShort($t('sign.errEmailFormat'));
      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');
      return;
    }
    if (!info.verificationCode) {
      toastShort('Please enter verification code');
      return;
    }
    Dialog.showProgressDialog()
    apiUser.updatePassword(this.formInfo).then(res => {
      Dialog.dismissLoading()
      toastShort('Reset password successfully');
      goBack();
    }).catch(err => {
      Dialog.dismissLoading()
      toastShort(err);
    });
  }

  render() {
    return (
      <View style={StyleSheet.absoluteFillObject}>
        <ScrollView
          style={styles.scollView}
          keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}>
          <View style={styles.header}>
            <View style={styles.logoView}>
              <Image
                style={styles.logoImg}
                resizeMode="contain"
                source={require('../../images/app-logo.png')}/>
            </View>
          </View>
          <View style={{...styles.backView, top: this.getBackTopPosition()}}>
            <Button
              style={styles.backButton}
              viewStyle={styles.backButtonView}
              onClick={() => goBack()}>
              <BackIcon/>
              <Text style={{color: textPrimary,fontSize: 16,paddingLeft: 8}}>Back to Login</Text>
            </Button>
          </View>
          <View style={styles.resetView}>
            <Text style={styles.title}>Reset Password</Text>
            <View style={styles.signInput}>
              <Text style={styles.inputLabel}>Email Address</Text>
              <TextInput
                style={styles.inputView}
                placeholder='Email Address'
                placeholderTextColor={textPlacehoder}
                maxLength={50}
                onChangeText={v => this.changeInfo('email', v)}
              />
            </View>
            <View style={styles.signInput}>
              <Text style={styles.inputLabel}>New 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}>
                <View style={styles.strengthView}>
                  <Text style={{fontSize:12, paddingRight: 4, color: textPrimary}}>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'
                placeholderTextColor={textPlacehoder}
                maxLength={20}
                onChangeText={v => this.changeInfo('password', v)}
              />
            </View>
            <View style={styles.signInput}>
              <Text style={[styles.inputLabel, ui.flex2]}>Verification Code</Text>
              <TextInput
                style={[styles.inputView, {flex: 2.6, marginLeft: 2}]}
                placeholder='Verification Code'
                placeholderTextColor={textPlacehoder}
                maxLength={6}
                onChangeText={v => this.changeInfo('verificationCode', v)}
              />
              <Button
                text={this.state.sendMinutes > 0 ? this.state.sendMinutes : 'Get Code'}
                style={styles.sendBtn}
                disabled={this.state.sendMinutes > 0}
                viewStyle={styles.sendBtnView}
                textStyle={styles.sendBtnText}
                onClick={() => this.sendVerification()}
              />
            </View>
          </View>
          <Text style={styles.divideText}>We will send you an email with the verification code.</Text>
          <Button
            text='Reset Password'
            style={styles.resetButton}
            onClick={() => this.onResetPassword()}
          />
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  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,
    backgroundColor: pageBackground
  },
  logoView: {
    paddingTop: 40,
    paddingBottom: 56,
    alignItems: 'center'
  },
  logoImg: {
    width:165.09,
    height: 51.94,
  },
  resetView: {
    flex: 1,
    padding: 16,
    marginTop: -30,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    backgroundColor: colorLight
  },
  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
  },
  inputView: {
    flex: 2,
    color: textPrimary,
    fontSize: 14,
    borderRadius: 5,
    minHeight: 40,
    paddingTop: 6,
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 6,
    backgroundColor: '#F5F5F5'
  },
  passwordView: {
    flex: 2,
    marginTop: -8,
  },
  strengthView: {
    marginTop: -4,
    alignItems: 'center',
    paddingBottom: 4,
    flexDirection: 'row'
  },
  passwordRole: {
    color: '#999',
    fontSize: 10,
    lineHeight: 13
  },
  sendBtn: {
    flex: 1.4,
    marginLeft: 6
  },
  sendBtnView: {
    flex: 1,
    height: 40,
    paddingLeft: 4,
    paddingRight: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  sendBtnText: {
    color: textPrimary,
    fontSize: 13,
    fontWeight: 'bold'
  },
  divideText: {
    color: textPrimary,
    fontSize: 14,
    padding: 58,
    textAlign: 'center'
  },
  resetButton: {
    margin: 16
  }
})