Setup input validation handlers

1 files changed, 82 insertions, 8 deletions

diff --git a/App.tsx b/App.tsx
index dc5a9f77..8eb4efea 100644
--- a/App.tsx
+++ b/App.tsx
@@ -41,8 +41,71 @@ const App = () => {
   const [data, setData] = React.useState({
     username: '',
     password: '',
+    isValidUser: true,
+    isValidPassword: true,
   })
 
+  const validUserCheck = (val:string) => {
+    var validLength:boolean = val.trim().length >= 6
+
+    if (validLength) {
+      setData({
+        ...data,
+        isValidUser: true
+      });
+    }
+    else {
+      setData({
+        ...data,
+        isValidUser: false
+      })
+    }
+  }
+
+  const handleUsernameUpdate = (val:string) => {
+    var validLength:boolean = val.trim().length >= 6
+
+    if (validLength) {
+      setData({
+        ...data,
+        username: val,
+        isValidUser: true
+      })
+    }
+    else {
+      setData({
+        ...data,
+        username: val,
+        isValidUser: false
+      })
+    }
+  }
+
+  const handlePasswordUpdate = (val:string) => {
+    var validLength:boolean = val.trim().length >= 8
+
+    if (validLength) {
+      setData({
+        ...data,
+        password: val,
+        isValidPassword: true
+      })
+    }
+    else {
+      setData({
+        ...data,
+        password: val,
+        isValidPassword: false
+      })
+     }
+  }
+
+  const handleLogin = () => {
+    if (data.isValidUser && data.isValidPassword) {
+      Alert.alert(`My favorite Girl Scout Cookies are taggalongs! What are yours ${data.username}?`)
+    }
+  }
+
   return (
     <>
       <StatusBar
@@ -69,11 +132,15 @@ const App = () => {
               textContentType='username'
               returnKeyType='next'
               keyboardType='ascii-capable'
-              onChangeText={user => setData({...data, username: user})}
+              onChangeText={user => handleUsernameUpdate(user)}
               defaultValue={data.username}
+              onEndEditing={(val) => validUserCheck(val.nativeEvent.text)}
               onSubmitEditing={() => {passwordInput.current.focus()}}
               blurOnSubmit={false}
             />
+            { data.isValidUser ? null : 
+              <Text style={styles.invalidCredentials}>Username must be at least 6 characters long.</Text>
+            }
             <TextInput
               accessibilityLabel="Password text entry box"
               accessibilityHint="Enter your tagg password here"
@@ -83,12 +150,15 @@ const App = () => {
               autoCompleteType='password'
               textContentType='password'
               returnKeyType='go'
-              onChangeText={pass => setData({...data, password: pass})}
+              onChangeText={pass => handlePasswordUpdate(pass)}
               defaultValue={data.password}
-              onSubmitEditing={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}
+              onSubmitEditing={() => handleLogin()}
               ref={passwordInput}
               secureTextEntry={true}
             />
+            { 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"
@@ -100,7 +170,7 @@ const App = () => {
               accessibilityLabel="Let's start button"
               accessibilityHint="Select this after entering your tagg username and password"
               style={styles.start}
-              onPress={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}>
+              onPress={() => handleLogin()}>
                 <Text style={styles.startText}>Let's Start!</Text>
             </TouchableOpacity>
             <Text accessible={true} accessibilityLabel="New to tagg?" style={styles.newUser}>
@@ -127,7 +197,7 @@ const styles = StyleSheet.create({
     height: 149,
   },
   credentials: {
-    top: 215,
+    top: 190,
     width: 248,
     height: 40,
     fontSize: 20,
@@ -139,7 +209,7 @@ const styles = StyleSheet.create({
     marginVertical: 15,
   },
   forgotPassword: {
-    top: 215,
+    top: 190,
     left: -60,
   },
   forgotPasswordText: {
@@ -148,7 +218,7 @@ const styles = StyleSheet.create({
     textDecorationLine: 'underline',
   },
   start: {
-    top: 220,
+    top: 195,
     width: 144,
     height: 36,
     justifyContent: 'center',
@@ -167,8 +237,12 @@ const styles = StyleSheet.create({
     textDecorationLine: 'underline'
   },
   newUser: {
-    top: 235,
+    top: 240,
     color: '#F4DDFF',
+  },
+  invalidCredentials: {
+    top: 180,
+    color: '#F4DDFF'
   }
 });