Added validationWarnings to LoginInput component

1 files changed, 64 insertions, 53 deletions

diff --git a/src/components/common/LoginInput.tsx b/src/components/common/LoginInput.tsx
index 12bf0b3c..ba519480 100644
--- a/src/components/common/LoginInput.tsx
+++ b/src/components/common/LoginInput.tsx
@@ -1,61 +1,66 @@
 import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
+import {Text, TextInput, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 
 const LoginInput = (props: LoginInputProps) => {
   return (
-    <TextInput
-      accessibilityLabel={
-        props.isUsername
-          ? 'Username text entry box'
-          : props.isPassword
-          ? 'Password text entry box'
-          : undefined
-      }
-      accessibilityHint={
-        props.isUsername
-          ? 'Enter your tagg username here'
-          : props.isPassword
-          ? 'Enter your tagg password here'
-          : undefined
-      }
-      style={styles.credentials}
-      placeholder={
-        props.isUsername
-          ? 'Username'
-          : props.isPassword
-          ? 'Password'
-          : undefined
-      }
-      placeholderTextColor="#FFFFFF"
-      autoCompleteType={
-        props.isUsername ? 'username' : props.isPassword ? 'password' : 'off'
-      }
-      textContentType={
-        props.isUsername ? 'username' : props.isPassword ? 'password' : 'none'
-      }
-      returnKeyType={
-        props.isUsername ? 'next' : props.isPassword ? 'go' : 'default'
-      }
-      keyboardType={
-        props.isUsername
-          ? 'ascii-capable'
-          : props.isPassword
-          ? 'default'
-          : undefined
-      }
-      onChangeText={(input) => props.onChangeText(input)}
-      defaultValue={props.type}
-      onSubmitEditing={props.onSubmitEditing}
-      blurOnSubmit={
-        props.isUsername ? false : props.isPassword ? undefined : undefined
-      }
-      //   ref={props.isUsername ? undefined : useRef()}
-      secureTextEntry={
-        props.isUsername ? false : props.isPassword ? true : false
-      }
-      //   focus={props.isUsername ? undefined : props.focusPasswordInput}
-    />
+    <>
+      <TextInput
+        accessibilityLabel={
+          props.isUsername
+            ? 'Username text entry box'
+            : props.isPassword
+            ? 'Password text entry box'
+            : undefined
+        }
+        accessibilityHint={
+          props.isUsername
+            ? 'Enter your tagg username here'
+            : props.isPassword
+            ? 'Enter your tagg password here'
+            : undefined
+        }
+        style={styles.credentials}
+        placeholder={
+          props.isUsername
+            ? 'Username'
+            : props.isPassword
+            ? 'Password'
+            : undefined
+        }
+        placeholderTextColor="#FFFFFF"
+        autoCompleteType={
+          props.isUsername ? 'username' : props.isPassword ? 'password' : 'off'
+        }
+        textContentType={
+          props.isUsername ? 'username' : props.isPassword ? 'password' : 'none'
+        }
+        returnKeyType={
+          props.isUsername ? 'next' : props.isPassword ? 'go' : 'default'
+        }
+        keyboardType={
+          props.isUsername
+            ? 'ascii-capable'
+            : props.isPassword
+            ? 'default'
+            : undefined
+        }
+        onChangeText={(input) => props.onChangeText(input)}
+        defaultValue={props.type}
+        onSubmitEditing={props.onSubmitEditing}
+        blurOnSubmit={
+          props.isUsername ? false : props.isPassword ? undefined : undefined
+        }
+        //   ref={props.isUsername ? undefined : useRef()}
+        secureTextEntry={
+          props.isUsername ? false : props.isPassword ? true : false
+        }
+        //   focus={props.isUsername ? undefined : props.focusPasswordInput}
+      />
+      {!props.isValid && (
+        <Text style={styles.invalidCredentials}>{props.validationWarning}</Text>
+      )}
+    </>
   );
 };
 
@@ -72,6 +77,10 @@ const styles = StyleSheet.create({
     paddingLeft: 13,
     marginVertical: 15,
   },
+  invalidCredentials: {
+    top: 180,
+    color: '#F4DDFF',
+  },
 });
 
 LoginInput.propTypes = {
@@ -82,6 +91,8 @@ LoginInput.propTypes = {
   onSubmitEditing: PropTypes.func,
   //   ref: PropTypes.any,
   focusPasswordInput: PropTypes.bool,
+  isValid: PropTypes.bool,
+  validationWarning: PropTypes.string,
 };
 
 export default LoginInput;