add app/pages/signLumi/ForgotPwdVL.js

Strides-SPAPP/app/pages/signLumi/ForgotPwdVL.js

@@ -0,0 +1,366 @@
+/**
+ * 忘记密码-重置密码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 utils from '../../utils/utils';
+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 (!utils.isValidEmail(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 (!utils.isValidEmail(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
+  }
+})