From a9225280a93121c1d56fb68ed9365c61f93fa3aa Mon Sep 17 00:00:00 2001 From: abhishek71994 Date: Fri, 30 Mar 2018 10:53:57 +0530 Subject: [PATCH 1/2] password show/hide feature --- app/views/LoginView.js | 29 +++---- app/views/Styles.js | 10 +++ package-lock.json | 172 +++++++++-------------------------------- 3 files changed, 64 insertions(+), 147 deletions(-) diff --git a/app/views/LoginView.js b/app/views/LoginView.js index d1647cfff..6aa06772c 100644 --- a/app/views/LoginView.js +++ b/app/views/LoginView.js @@ -65,6 +65,7 @@ export default class LoginView extends React.Component { username: '', password: '', modalVisible: false, + showPassword: false, oAuthUrl: '' }; this.redirectRegex = new RegExp(`(?=.*(${ this.props.server }))(?=.*(credentialToken))(?=.*(credentialSecret))`, 'g'); @@ -238,19 +239,21 @@ 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 - autoCorrect={false} - returnKeyType='done' - autoCapitalize='none' - underlineColorAndroid='transparent' - onSubmitEditing={this.submit} - placeholder={this.props.Accounts_PasswordPlaceholder || 'Password'} - /> - + + { 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.renderTOTP()} Date: Sat, 31 Mar 2018 21:45:15 -0300 Subject: [PATCH 2/2] fix show/hide password --- app/containers/TextInput.js | 59 ++++++++++++++++++----------- app/views/LoginView.js | 33 ++++++++-------- app/views/RoomInfoEditView/index.js | 10 ++--- app/views/Styles.js | 10 ----- 4 files changed, 57 insertions(+), 55 deletions(-) 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,