diff --git a/app/containers/TextInput.js b/app/containers/TextInput.js
index 73f2ccabf..c6b289942 100644
--- a/app/containers/TextInput.js
+++ b/app/containers/TextInput.js
@@ -2,6 +2,8 @@ import React from 'react';
import { View, StyleSheet, Text, TextInput } from 'react-native';
import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
import sharedStyles from '../views/Styles';
import { COLOR_DANGER } from '../constants/colors';
@@ -29,46 +31,57 @@ const styles = StyleSheet.create({
inputError: {
color: COLOR_DANGER,
borderColor: COLOR_DANGER
+ },
+ wrap: {
+ flex: 1,
+ position: 'relative'
+ },
+ icon: {
+ position: 'absolute',
+ right: 0,
+ padding: 10,
+ color: 'rgba(0,0,0,.45)'
}
});
+
export default class RCTextInput extends React.PureComponent {
static propTypes = {
label: PropTypes.string,
- value: PropTypes.string,
error: PropTypes.object,
- inputProps: PropTypes.object,
- inputRef: PropTypes.func,
- onChangeText: PropTypes.func,
- onSubmitEditing: PropTypes.func
+ secureTextEntry: PropTypes.bool
}
-
static defaultProps = {
- label: 'Label',
+ showPassword: false,
error: {}
}
+ state = {
+ showPassword: false
+ }
+
+ get icon() { return ; }
+
+ tooglePassword = () => this.setState({ showPassword: !this.state.showPassword })
render() {
const {
- label, value, error, inputRef, onChangeText, onSubmitEditing, inputProps
+ label, error, secureTextEntry, ...inputProps
} = this.props;
+ const { showPassword } = this.state;
return (
-
- {label}
-
-
+ { label && {label} }
+
+
+ {secureTextEntry && this.icon}
+
{error.error && {error.reason}}
);
diff --git a/app/views/LoginView.js b/app/views/LoginView.js
index 6aa06772c..d6b7e3c9f 100644
--- a/app/views/LoginView.js
+++ b/app/views/LoginView.js
@@ -1,7 +1,7 @@
import React from 'react';
import Spinner from 'react-native-loading-spinner-overlay';
import PropTypes from 'prop-types';
-import { Keyboard, Text, TextInput, View, ScrollView, TouchableOpacity, SafeAreaView, WebView, Platform, LayoutAnimation } from 'react-native';
+import { Keyboard, Text, View, ScrollView, TouchableOpacity, SafeAreaView, WebView, Platform, LayoutAnimation } from 'react-native';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -10,6 +10,7 @@ import Modal from 'react-native-modal';
import { loginSubmit, open, close } from '../actions/login';
import KeyboardView from '../presentation/KeyboardView';
+import TextInput from '../containers/TextInput';
import styles from './Styles';
import scrollPersistTaps from '../utils/scrollPersistTaps';
@@ -65,7 +66,6 @@ export default class LoginView extends React.Component {
username: '',
password: '',
modalVisible: false,
- showPassword: false,
oAuthUrl: ''
};
this.redirectRegex = new RegExp(`(?=.*(${ this.props.server }))(?=.*(credentialToken))(?=.*(credentialSecret))`, 'g');
@@ -239,21 +239,20 @@ export default class LoginView extends React.Component {
onSubmitEditing={() => { this.password.focus(); }}
placeholder={this.props.Accounts_EmailOrUsernamePlaceholder || 'Email or username'}
/>
-
- { this.password = e; }}
- style={styles.input_white}
- onChangeText={password => this.setState({ password })}
- secureTextEntry={!this.state.showPassword}
- autoCorrect={false}
- returnKeyType='done'
- autoCapitalize='none'
- underlineColorAndroid='transparent'
- onSubmitEditing={this.submit}
- placeholder={this.props.Accounts_PasswordPlaceholder || 'Password'}
- />
- { this.setState({ showPassword: !this.state.showPassword }); }}/>
-
+
+ { this.password = e; }}
+ style={styles.input_white}
+ onChangeText={password => this.setState({ password })}
+ secureTextEntry
+ autoCorrect={false}
+ returnKeyType='done'
+ autoCapitalize='none'
+ underlineColorAndroid='transparent'
+ onSubmitEditing={this.submit}
+ placeholder={this.props.Accounts_PasswordPlaceholder || 'Password'}
+ />
+
{this.renderTOTP()}
{ this.name = e; }}
+ ref={(e) => { this.name = e; }}
label='Name'
value={name}
onChangeText={value => this.setState({ name: value })}
@@ -270,7 +270,7 @@ export default class RoomInfoEditView extends React.Component {
error={nameError}
/>
{ this.description = e; }}
+ ref={(e) => { this.description = e; }}
label='Description'
value={description}
onChangeText={value => this.setState({ description: value })}
@@ -278,7 +278,7 @@ export default class RoomInfoEditView extends React.Component {
inputProps={{ multiline: true }}
/>
{ this.topic = e; }}
+ ref={(e) => { this.topic = e; }}
label='Topic'
value={topic}
onChangeText={value => this.setState({ topic: value })}
@@ -286,7 +286,7 @@ export default class RoomInfoEditView extends React.Component {
inputProps={{ multiline: true }}
/>
{ this.announcement = e; }}
+ ref={(e) => { this.announcement = e; }}
label='Announcement'
value={announcement}
onChangeText={value => this.setState({ announcement: value })}
@@ -294,7 +294,7 @@ export default class RoomInfoEditView extends React.Component {
inputProps={{ multiline: true }}
/>
{ this.joinCode = e; }}
+ ref={(e) => { this.joinCode = e; }}
label='Password'
value={joinCode}
onChangeText={value => this.setState({ joinCode: value })}
diff --git a/app/views/Styles.js b/app/views/Styles.js
index f3b1c026d..63c17bac6 100644
--- a/app/views/Styles.js
+++ b/app/views/Styles.js
@@ -32,16 +32,6 @@ export default StyleSheet.create({
justifyContent: 'center',
flex: 1
},
- passInput: {
- flex: 1,
- position: 'relative'
- },
- passIcon: {
- position: 'absolute',
- right: 0,
- padding: 10,
- color: 'rgba(0,0,0,.45)'
- },
loginLogo: {
width: Dimensions.get('window').width - 150,
height: Dimensions.get('window').width - 150,