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

/**
 * 忘记密码-重置密码页面V2
 * @邠心vbe on 2022/12/23
 */
 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 { 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('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;
     }
     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('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 (!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={'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.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'
                 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'
                 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>
             <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'
                 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: colorThemes
   },
   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,
     backgroundColor: 'white'
   },
   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: 'white'
   },
   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
   },
   inputView: {
     flex: 2,
     color: '#333',
     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: '#fff',
     fontSize: 13,
     fontWeight: 'bold'
   },
   divideText: {
     color: '#333',
     fontSize: 14,
     padding: 58,
     textAlign: 'center'
   },
   resetButton: {
     margin: 16
   }
 })