From ff9dba9a4241a799970ef36866b595d6f6940531 Mon Sep 17 00:00:00 2001
From: Justin Shillingford <jgs272@cornell.edu>
Date: Mon, 29 Jun 2020 19:36:50 -0400
Subject: Added validationWarnings to LoginInput component

---
 src/components/common/LoginInput.tsx | 117 +++++++++++++++++++----------------
 src/screens/Login.tsx                |  14 ++---
 2 files changed, 68 insertions(+), 63 deletions(-)

(limited to 'src')

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;
diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx
index 618507d8..77bc1b61 100644
--- a/src/screens/Login.tsx
+++ b/src/screens/Login.tsx
@@ -117,24 +117,18 @@ const Login = ({navigation}: LoginProps) => {
             isUsername={true}
             onChangeText={(user) => handleUsernameUpdate(user)}
             onSubmitEditing={() => handleUsernameSubmit()}
+            isValid={data.isValidUser}
+            validationWarning={'Username must be at least 6 characters long.'}
           />
-          {data.isValidUser ? null : (
-            <Text style={styles.invalidCredentials}>
-              Username must be at least 6 characters long.
-            </Text>
-          )}
           <LoginInput
             type={data.password}
             isPassword={true}
             onChangeText={(user) => handlePasswordUpdate(user)}
             focusPasswordInput={data.focusPasswordInput}
             onSubmitEditing={() => handleLogin()}
+            isValid={data.isValidPassword}
+            validationWarning={'Password must be at least 8 characters long.'}
           />
-          {data.isValidPassword ? null : (
-            <Text style={styles.invalidCredentials}>
-              Password must be at least 8 characters long.
-            </Text>
-          )}
           <TouchableOpacity
             accessibilityLabel="Forgot password button"
             accessibilityHint="Select this if you forgot your tagg password"
-- 
cgit v1.2.3-70-g09d2