add app/pages/sign/StrengthView.js

Strides-SPAPP/app/pages/sign/StrengthView.js

@@ -0,0 +1,140 @@
+/**
+ * 密码强度验证组件
+ * @邠心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'
+  },
+})