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

/**
 * 密码强度验证组件
 * @邠心vbe on 2023/02/01
 */
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import TextView from '../../components/TextView';

const getStyle = (strength, num) => {
  if (strength >= num) {
    return {...styles.strengthItem, backgroundColor: colorAccent};
  } else {
    return styles.strengthItem;
  }
}

const applyStrength = (text, version, back) => {
  var strength = 0;
  if (text.length >= 8) {
    strength += 1;
  }
  if (/\d{1,}/.test(text)) {
    strength += 1;
  }
  if (version == 1 || version == 2) {
    if (/[a-z]{1,}/.test(text)) {
      strength += 1;
    }
    if (/[A-Z]{1,}/.test(text)) {
      strength += 1;
    }
  } else {
    if (/[A-z]{1,}/.test(text)) {
      strength += 1;
    }
  }
  if (version == 1 || version == 3) {
    if (/\W{1,}/.test(text)) {
      strength += 1;
    }
  }
  back(strength);
}

/**
 * 密码强度组件
 * @param {*} param0 动态强度
 * @returns 组件
 */
const StrengthView = ({version, strength}) => (
  <View>
    <View style={styles.strengthView}>
      <TextView style={styles.labelText}>{$t('sign.passwordStrength')}</TextView>
      <>
        <Text style={getStyle(strength, 1)}></Text>
        <Text style={getStyle(strength, 2)}></Text>
        <Text style={getStyle(strength, 3)}></Text>
        { version < 4 && <>
          <Text style={getStyle(strength, 4)}></Text>
          { version < 2 &&
            <Text style={getStyle(strength, 5)}></Text>
          }
        </>
        }
      </>
    </View>
    <View>
      <TextView style={styles.passwordRole}>{$t('sign.passwordMustHave')}</TextView>
      <TextView style={styles.passwordRole}>- {$t('sign.password8more')}</TextView>
      { (version == 1 || version == 2) &&
        <TextView style={styles.passwordRole}>- {$t('sign.passwordUpperLower')}</TextView>
      }
      { (version == 1 || version == 3)
      ? <TextView style={styles.passwordRole}>- {$t('sign.passwordLeastNumberAndSpecial')}</TextView>
      : <TextView style={styles.passwordRole}>- {$t('sign.passwordLeastNumber')}</TextView>
      }
    </View>
  </View>
)

export default {
  /**
   * 最严格的密码强度组件(5)
   */
  V1: {
    VIEW: (props) => <StrengthView version={1} {...props}/>,
    maxStrength: 5,
    apply: (text, back) => applyStrength(text, 1, back)
  },
  /**
   * 去掉特殊符号限制的密码强度组件(4)
   */
  V2: {
    VIEW: (props) => <StrengthView version={2} {...props}/>,
    maxStrength: 4,
    apply: (text, back) => applyStrength(text, 2, back)
  },
  /**
   * 去掉大小写字母限制的密码强度组件(4)
   */
  V3: {
    VIEW: (props) => <StrengthView version={3} {...props}/>,
    maxStrength: 4,
    apply: (text, back) => applyStrength(text, 3, back)
  },
  /**
   * 去掉大小写字母和特殊符号限制的密码强度组件(3)
   */
  V4: {
    VIEW: (props) => <StrengthView version={4} {...props}/>,
    maxStrength: 3,
    apply: (text, back) => applyStrength(text, 4, back)
  },
}

const styles = StyleSheet.create({
  strengthView: {
    marginTop: -4,
    alignItems: 'center',
    paddingBottom: 4,
    flexDirection: 'row'
  },
  labelText: {
    fontSize:12,
    paddingRight: 4, 
    color: textPrimary
  },
  passwordRole: {
    color: '#999',
    fontSize: 10,
    lineHeight: 13
  },
  strengthItem: {
    width: 14,
    height: 2.5,
    marginLeft: 8,
    borderRadius: 3,
    backgroundColor: '#CCC'
  },
})