[TMA-62] Basic Login Input Validation (#11)

* Updated createRef() to useRef()

* Animated invalid input hint

Also removed useless focusPasswordInput prop

* Users can no longer submit without typing

* Added basic input validation for Username

* Fixed username input validation 😅

* Removed autocapitalize from keyboard

* Trim username input as early as possible

Also removed trim from password

* Adjusted styling to accomodate longer hint message

* Lint cleaning

* Updated documentation of update methods

* Forgot to include periods in the error message 😅

* Modified styling to accomodate longer hint

1 files changed, 15 insertions, 6 deletions

diff --git a/src/components/common/LoginInput.tsx b/src/components/common/LoginInput.tsx
index e4d6b957..2a1768a7 100644
--- a/src/components/common/LoginInput.tsx
+++ b/src/components/common/LoginInput.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {Text, TextInput, StyleSheet} from 'react-native';
+import {TextInput, StyleSheet} from 'react-native';
+import * as Animatable from 'react-native-animatable';
 
 const LoginInput = (props: LoginInputProps) => {
   return (
@@ -44,6 +45,7 @@ const LoginInput = (props: LoginInputProps) => {
             ? 'default'
             : undefined
         }
+        autoCapitalize="none"
         onChangeText={(input) => props.onChangeText(input)}
         defaultValue={props.type}
         onSubmitEditing={props.onSubmitEditing}
@@ -55,8 +57,13 @@ const LoginInput = (props: LoginInputProps) => {
         }
         ref={props.input_ref}
       />
-      {!props.isValid && (
-        <Text style={styles.invalidCredentials}>{props.validationWarning}</Text>
+      {props.attempt_submit && !props.isValid && (
+        <Animatable.Text
+          animation="shake"
+          duration={500}
+          style={styles.invalidCredentials}>
+          {props.validationWarning}
+        </Animatable.Text>
       )}
     </>
   );
@@ -64,7 +71,7 @@ const LoginInput = (props: LoginInputProps) => {
 
 const styles = StyleSheet.create({
   credentials: {
-    top: 190,
+    top: 175,
     width: 248,
     height: 40,
     fontSize: 20,
@@ -76,8 +83,10 @@ const styles = StyleSheet.create({
     marginVertical: 15,
   },
   invalidCredentials: {
-    top: 180,
+    top: 165,
     color: '#F4DDFF',
+    paddingHorizontal: 30,
+    textAlign: 'center',
   },
 });
 
@@ -87,8 +96,8 @@ interface LoginInputProps {
   isPassword?: boolean;
   onChangeText: (input: string) => void;
   onSubmitEditing?: () => void;
+  attempt_submit?: boolean;
   input_ref?: object;
-  focusPasswordInput?: boolean;
   isValid?: boolean;
   validationWarning?: string;
 }