Password verification done

6376275.txt

@@ -0,0 +1 @@
+ksanc159@fiu.edu

src/Components/SignUpPassword.jsx

@@ -1,34 +1,33 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Keyboard,
   Text,
   TextInput as TextBox,
   TouchableOpacity,
   View,
   TouchableHighlight,
-  Platform,
   KeyboardAvoidingView,
   StyleSheet,
+  Alert,
+  Platform,
 } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import {MaterialCommunityIcons as Icon} from '@expo/vector-icons';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import appStyles from './AppStyles';
 import Button from './Button';
 import translate from './getLocalizedText';
+import poorPasswords from './poorPasswords';
 
 export default SignUpPassword = (props) => {
   const [password, setPassword] = useState('');
   const [repeat, setRepeat] = useState('');
-  const {liveMiami} = props.route.params;
-  const {name} = props.route.params;
-  const {dob} = props.route.params;
-  const {email} = props.route.params;
-  const {phone} = props.route.params;
+  const { liveMiami, name, dob, email, phone } = props.route.params;
   const [isSecureEntry, setIsSecureEntry] = useState(true);
   const [show, setShow] = React.useState(false);
   const [showRepeat, setShowRepeat] = React.useState(false);
   const [visible, setVisible] = React.useState(true);
   const [visibleRepeat, setVisibleRepeat] = React.useState(true);
+  const [passwordStrength, setPasswordStrength] = useState(0);
   const special_chars = ['!', '#', '$', '*', '%'];
   let containsSpecialChar = false;
 
@@ -41,13 +40,35 @@ export default SignUpPassword = (props) => {
     });
   }, []);
 
+  const checkPasswordStrength = (password) => {
+    const lowerCase = /[a-z]/.test(password);
+    const upperCase = /[A-Z]/.test(password);
+    const number = /[0-9]/.test(password);
+    const symbol = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const isPoor = password.length <= 4 || poorPasswords.includes(password);
+    const isMedium = password.length >= 5 && [lowerCase, upperCase, number, symbol].filter(Boolean).length === 3 && !poorPasswords.includes(password);
+    const isHigh = password.length >= 5 && [lowerCase, upperCase, number, symbol].filter(Boolean).length === 4 && !poorPasswords.includes(password);
+
+    if (isPoor) return 0;
+    if (isMedium) return 1;
+    if (isHigh) return 2;
+    return 0;
+  };
+
   let onPress = () => {
+    if (passwordStrength === 0) {
+      alert(translate('passwordTooWeak'));
+      return;
+    }
+
     for (let i = 0; i < password.length; i++) {
       if (special_chars.includes(password[i])) {
         containsSpecialChar = true;
         break;
       }
     }
+
     if (password !== repeat) {
       alert(translate('passwordMismatch'));
     } else if (!password || !repeat) {
@@ -56,10 +77,34 @@ export default SignUpPassword = (props) => {
       alert(translate('passwordTooShort'));
     } else if (!containsSpecialChar) {
       alert(translate('passwordWeak'));
+    } else if (passwordStrength === 1) {
+      Alert.alert(
+        "Warning",
+        "The password entered has a medium level of strength we suggest that a good password must have at least 6 characters, a lowercase, an uppercase, a number, and a symbol. Do you want to improve it or continue with the one that you have?",
+        [
+          {
+            text: 'Edit',
+            onPress: () => { },
+            style: 'cancel'
+          },
+          {
+            text: 'Continure',
+            onPress: () => {
+              props.navigation.navigate('SignUpYesorNoPregnant', {
+                liveMiami,
+                name,
+                dob,
+                email,
+                phone,
+                password,
+                question: translate('areYouPregnant'),
+                value: 'pregnant',
+              });
+            }
+          }
+        ]
+      );
     } else {
-      // props.setUserInfo({password});
-      // AsyncStorage.setItem('pass', password);
-      // AsyncStorage.setItem('repeat', repeat);
       props.navigation.navigate('SignUpYesorNoPregnant', {
         liveMiami,
         name,
@@ -72,6 +117,19 @@ export default SignUpPassword = (props) => {
       });
     }
   };
+
+  const getPasswordStrengthColor = () => {
+    if (passwordStrength === 0) return 'pink';
+    if (passwordStrength === 1) return 'blue';
+    if (passwordStrength === 2) return '#298000';
+  };
+
+  const getPasswordStrengthText = () => {
+    if (passwordStrength === 0) return 'Poor';
+    if (passwordStrength === 1) return 'Medium';
+    if (passwordStrength === 2) return 'High';
+  };
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -96,14 +154,17 @@ export default SignUpPassword = (props) => {
               <Text style={appStyles.titleBlue}>
                 {translate('createPassword')}
               </Text>
-              <View style={{paddingTop: appStyles.win.height * 0.05}}>
+              <View style={{ paddingTop: appStyles.win.height * 0.05 }}>
                 <View>
                   <TextBox
                     placeholderTextColor={appStyles.DefaultPlaceholderTextColor}
                     style={appStyles.TextInputMask}
                     secureTextEntry={visible}
                     placeholder={translate('passwordInput')}
-                    onChangeText={setPassword}
+                    onChangeText={(text) => {
+                      setPassword(text);
+                      setPasswordStrength(checkPasswordStrength(text));
+                    }}
                   />
                   <TouchableOpacity
                     style={styles.eyeShowPassword}
@@ -137,14 +198,19 @@ export default SignUpPassword = (props) => {
                     }}
                   >
                     <Icon
-                      name={
-                        showRepeat === false ? 'eye-outline' : 'eye-off-outline'
-                      }
+                      name={showRepeat === false ? 'eye-outline' : 'eye-off-outline'}
                       size={26}
                       color={appStyles.pinkColor}
                     />
                   </TouchableOpacity>
                 </View>
+
+                <View style={{ paddingTop: 20, paddingLeft: 15 }}>
+                  <Text style={{ color: getPasswordStrengthColor(), fontSize: 20 }}>
+                    {getPasswordStrengthText()}
+                  </Text>
+                </View>
+
               </View>
             </View>
           </View>
@@ -173,4 +239,4 @@ const styles = StyleSheet.create({
     right: 30,
     top: 25,
   },
-});
+});