auth helper fixes for android

Author: bleonard

App/Components/Button.js

@@ -48,7 +48,7 @@ const Button = React.createClass({
         <Text
           key={index}
           allowFontScaling={false}
-          style={[{flex: 0, paddingHorizontal: 5, textAlign: 'center'}, styles.text, disabledStateStyle, this._stylesFromType('text'), this.props.textStyle]}
+          style={[{flex: 0, marginHorizontal: 5, textAlign: 'center'}, styles.text, disabledStateStyle, this._stylesFromType('text'), this.props.textStyle]}
         >
           {children}
         </Text>

App/Components/TextInput.js

@@ -2,44 +2,49 @@ import React from 'react';
 
 import {
   PixelRatio,
-  TextInput,
   StyleSheet,
+  TextInput,
 } from 'react-native';
 
 import cssVar from '../Lib/cssVar';
 
-var _TextInput = React.createClass({
-  propTypes: TextInput.propTypes,
+class _TextInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  setNativeProps(...args) {
+    this.refs.input.setNativeProps(...args);
+  }
+
+  blur() {
+    this.refs.input.blur();
+  }
 
   focus() {
     this.refs.input.focus();
-  },
-
-  setNativeProps() {
-    var input = this.refs.input;
-    input.setNativeProps.apply(input, arguments);
-  },
+  }
 
   render() {
     return (
       <TextInput
+        ref='input'
         {...this.props}
-        ref="input"
-        style={[styles.input, this.props.style || {}]}
+        style={[styles.input, this.props.style]}
       />
     );
   }
-})
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   input: {
     borderWidth: 1 / PixelRatio.get(),
     borderColor: cssVar('gray50'),
     padding: 10,
     fontFamily: cssVar('fontRegular'),
     color: cssVar('gray90'),
-    fontSize: 8                           // make it small to know it's not set
-  }
+    fontSize: 8, // make it small to know it's not set
+  },
 });
 
 export default _TextInput;

App/Mixins/AuthHelper.js

@@ -79,26 +79,32 @@ var AuthHelper = {
     return (
       <View style={styles.container}>
         <View style={styles.flex} />
-        <TextInput ref="username"
-          placeholder={i18n.t('username')}
-          keyboardType="default"
-          style={[styles.input, styles.username]}
-          enablesReturnKeyAutomatically={true}
-          returnKeyType='next'
-          onChange={(event) => this.state.username = event.nativeEvent.text }
-          onSubmitEditing={() => this.refs.password.focus() }
+        <View style={styles.inputContainer}>
+          <TextInput ref="username"
+            placeholder={i18n.t('username')}
+            keyboardType="default"
+            style={[styles.input, styles.username]}
+            enablesReturnKeyAutomatically={true}
+            autoCapitalize='none'
+            autoCorrect={false}
+            returnKeyType='next'
+            onChange={(event) => this.state.username = event.nativeEvent.text }
+            onSubmitEditing={() => this.refs.password.focus() }
+            />
+        </View>
+        <View style={styles.inputContainer}>
+          <TextInput ref="password"
+            placeholder={i18n.t('password')}
+            secureTextEntry={true}
+            autoCorrect={false}
+            keyboardType="default"
+            style={[styles.input, styles.password]}
+            enablesReturnKeyAutomatically={true}
+            returnKeyType='done'
+            onChange={(event) => this.state.password = event.nativeEvent.text }
+            onSubmitEditing={this.onAuthButton}
           />
-        <TextInput ref="password"
-          placeholder={i18n.t('password')}
-          password={true}
-          autoCorrect={false}
-          keyboardType="default"
-          style={[styles.input, styles.password]}
-          enablesReturnKeyAutomatically={true}
-          returnKeyType='done'
-          onChange={(event) => this.state.password = event.nativeEvent.text }
-          onSubmitEditing={this.onAuthButton}
-        />
+        </View>
         <Button type='blue' onPress={this.onAuthButton}>
           {this.getButtonText()}
         </Button>
@@ -153,8 +159,12 @@ var styles = StyleSheet.create({
     fontSize: 13,
     height: 50,
     padding: 10,
+    flex: 1,
     marginHorizontal: 30
   },
+  inputContainer: {
+    flexDirection: 'row'
+  },
   bottom: {
     flexDirection: 'row'
   },

android/app/app.iml

@@ -84,6 +84,7 @@
       <sourceFolder url="file://$MODULE_DIR$/src/androidTest/shaders" isTestSource="true" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/assets" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/blame" />
+      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/builds" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/classes" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/dependency-cache" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.0.1/jars" />