fix show/hide password

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,
+		secureTextEntry: PropTypes.bool
-		inputRef: PropTypes.func,
-		onChangeText: PropTypes.func,
-		onSubmitEditing: PropTypes.func
 	}
-
 	static defaultProps = {
-		label: 'Label',
+		showPassword: false,
 		error: {}
 	}
+	state = {
+		showPassword: false
+	}
+
+	get icon() { return <Icon name={this.state.showPassword ? 'eye-slash' : 'eye'} style={styles.icon} size={20} onPress={this.tooglePassword} />; }
+
+	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 (
 			<View style={styles.inputContainer}>
-				<Text style={[styles.label, error.error && styles.labelError]}>
+				{ label && <Text style={[styles.label, error.error && styles.labelError]}>{label}</Text> }
-					{label}
+				<View style={styles.wrap}>
-				</Text>
+					<TextInput
-				<TextInput
+						style={[styles.input, error.error && styles.inputError]}
-					ref={inputRef}
+						autoCorrect={false}
-					style={[styles.input, error.error && styles.inputError]}
+						autoCapitalize='none'
-					onChangeText={onChangeText}
+						underlineColorAndroid='transparent'
-					onSubmitEditing={onSubmitEditing}
+						secureTextEntry={secureTextEntry && !showPassword}
-					value={value}
+						{...inputProps}
-					autoCorrect={false}
+					/>
-					returnKeyType='next'
+					{secureTextEntry && this.icon}
-					autoCapitalize='none'
+				</View>
-					underlineColorAndroid='transparent'
-					{...inputProps}
-				/>
 				{error.error && <Text style={sharedStyles.error}>{error.reason}</Text>}
 			</View>
 		);

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'}
 								/>
-								<View style={styles.passInput}>
+
-									<TextInput
+								<TextInput
-										ref={(e) => { this.password = e; }}
+									ref={(e) => { this.password = e; }}
-										style={styles.input_white}
+									style={styles.input_white}
-										onChangeText={password => this.setState({ password })}
+									onChangeText={password => this.setState({ password })}
-										secureTextEntry={!this.state.showPassword}
+									secureTextEntry
-										autoCorrect={false}
+									autoCorrect={false}
-										returnKeyType='done'
+									returnKeyType='done'
-										autoCapitalize='none'
+									autoCapitalize='none'
-										underlineColorAndroid='transparent'
+									underlineColorAndroid='transparent'
-										onSubmitEditing={this.submit}
+									onSubmitEditing={this.submit}
-										placeholder={this.props.Accounts_PasswordPlaceholder || 'Password'}
+									placeholder={this.props.Accounts_PasswordPlaceholder || 'Password'}
-									/>
+								/>
-									<Icon name='eye' style={styles.passIcon} size={20} onPress={() => { this.setState({ showPassword: !this.state.showPassword }); }}/>
+
-								</View>
 								{this.renderTOTP()}
 
 								<TouchableOpacity

app/views/RoomInfoEditView/index.js

@@ -262,7 +262,7 @@ export default class RoomInfoEditView extends React.Component {
 					<SafeAreaView>
 						<View style={sharedStyles.formContainer}>
 							<RCTextInput
-								inputRef={(e) => { 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}
 							/>
 							<RCTextInput
-								inputRef={(e) => { 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 }}
 							/>
 							<RCTextInput
-								inputRef={(e) => { 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 }}
 							/>
 							<RCTextInput
-								inputRef={(e) => { 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 }}
 							/>
 							<RCTextInput
-								inputRef={(e) => { this.joinCode = e; }}
+								ref={(e) => { this.joinCode = e; }}
 								label='Password'
 								value={joinCode}
 								onChangeText={value => this.setState({ joinCode: value })}

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,