Merge pull request #9 from JustinShillingford/tma42-Login-Page-UI

[TMA-61] Login Page UI with no real functionality

1 files changed, 96 insertions, 0 deletions

diff --git a/src/components/common/LoginInput.tsx b/src/components/common/LoginInput.tsx
new file mode 100644
index 00000000..e4d6b957
--- /dev/null
+++ b/src/components/common/LoginInput.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import {Text, TextInput, StyleSheet} from 'react-native';
+
+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
+        }
+        secureTextEntry={
+          props.isUsername ? false : props.isPassword ? true : false
+        }
+        ref={props.input_ref}
+      />
+      {!props.isValid && (
+        <Text style={styles.invalidCredentials}>{props.validationWarning}</Text>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  credentials: {
+    top: 190,
+    width: 248,
+    height: 40,
+    fontSize: 20,
+    color: '#FFFFFF',
+    borderColor: '#FFFDFD',
+    borderWidth: 2,
+    borderRadius: 20,
+    paddingLeft: 13,
+    marginVertical: 15,
+  },
+  invalidCredentials: {
+    top: 180,
+    color: '#F4DDFF',
+  },
+});
+
+interface LoginInputProps {
+  type: string;
+  isUsername?: boolean;
+  isPassword?: boolean;
+  onChangeText: (input: string) => void;
+  onSubmitEditing?: () => void;
+  input_ref?: object;
+  focusPasswordInput?: boolean;
+  isValid?: boolean;
+  validationWarning?: string;
+}
+
+export default LoginInput;