Created LoginInput Component

1 files changed, 58 insertions, 0 deletions

diff --git a/src/components/common/LoginInput.tsx b/src/components/common/LoginInput.tsx
new file mode 100644
index 00000000..ca33db92
--- /dev/null
+++ b/src/components/common/LoginInput.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import PropTypes from 'prop-types';
+
+const LoginInput = (props: LoginInputProps) => {
+  return (
+    <TextInput
+      accessibilityLabel={
+        props.isUsername ? 'Username text entry box' : 'Password text entry box'
+      }
+      accessibilityHint={
+        props.isUsername
+          ? 'Enter your tagg username here'
+          : 'Enter your tagg password here'
+      }
+      style={styles.credentials}
+      placeholder={props.isUsername ? 'Username' : 'Password'}
+      placeholderTextColor="#FFFFFF"
+      autoCompleteType={props.isUsername ? 'username' : 'password'}
+      textContentType={props.isUsername ? 'username' : 'password'}
+      returnKeyType={props.isUsername ? 'next' : 'go'}
+      keyboardType={props.isUsername ? 'ascii-capable' : 'default'}
+      onChangeText={(input) => props.onChangeText(input)}
+      defaultValue={props.type}
+      onSubmitEditing={props.onSubmitEditing}
+      blurOnSubmit={props.isUsername ? false : undefined}
+      //   ref={props.isUsername ? undefined : useRef()}
+      secureTextEntry={props.isUsername ? false : true}
+      focus={props.isUsername ? undefined : props.focusPasswordInput}
+    />
+  );
+};
+
+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,
+  },
+});
+
+LoginInput.propTypes = {
+  type: PropTypes.string.isRequired,
+  isUsername: PropTypes.bool.isRequired,
+  onChangeText: PropTypes.func.isRequired,
+  onSubmitEditing: PropTypes.func,
+  ref: PropTypes.any,
+  focusPasswordInput: PropTypes.bool,
+};
+
+export default LoginInput;