From 6811b89dd09bd18c8258e8f57d254a7f531ae8ee Mon Sep 17 00:00:00 2001 From: b1tjoy <103875612+b1tjoy@users.noreply.github.com> Date: Tue, 21 Jun 2022 23:01:10 +0800 Subject: [PATCH 1/5] fix: secure text become visible keep keyboard unchanged --- src/components/TextInput/BaseTextInput.js | 2 ++ src/components/TextInput/index.android.js | 24 +++++++++++++++++++ .../{index.native.js => index.ios.js} | 0 src/pages/signin/PasswordForm.js | 1 + 4 files changed, 27 insertions(+) create mode 100644 src/components/TextInput/index.android.js rename src/components/TextInput/{index.native.js => index.ios.js} (100%) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 02ebf0d3cda7..14b61972c231 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -199,6 +199,7 @@ class BaseTextInput extends Component { !this.props.hideFocusedState && this.state.isFocused && styles.borderColorFocus, (this.props.hasError || this.props.errorText) && styles.borderColorDanger, ], (finalStyles, s) => ({...finalStyles, ...s}), {}); + const keyboardType = this.props.getKeyboardType ? this.props.getKeyboardType(this.state.passwordHidden) : this.props.keyboardType; return ( <> @@ -272,6 +273,7 @@ class BaseTextInput extends Component { secureTextEntry={this.state.passwordHidden} onPressOut={this.props.onPress} showSoftInputOnFocus={!this.props.disableKeyboard} + keyboardType={keyboardType} /> {this.props.secureTextEntry && ( ( + (props.secureTextEntry && !passwordHidden ? 'visible-password' : props.keyboardType)} + /> +)); + +TextInput.propTypes = baseTextInputPropTypes.propTypes; +TextInput.defaultProps = baseTextInputPropTypes.defaultProps; +TextInput.displayName = 'TextInput'; + +export default TextInput; diff --git a/src/components/TextInput/index.native.js b/src/components/TextInput/index.ios.js similarity index 100% rename from src/components/TextInput/index.native.js rename to src/components/TextInput/index.ios.js diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js index 0801487c8803..af4c659783b5 100755 --- a/src/pages/signin/PasswordForm.js +++ b/src/pages/signin/PasswordForm.js @@ -137,6 +137,7 @@ class PasswordForm extends React.Component { onChangeText={text => this.setState({password: text})} onSubmitEditing={this.validateAndSubmitForm} blurOnSubmit={false} + autoCapitalize="none" /> Date: Tue, 28 Jun 2022 21:51:56 +0800 Subject: [PATCH 2/5] define visible-password as constant --- src/CONST.js | 1 + src/components/TextInput/index.android.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/CONST.js b/src/CONST.js index e5b6657ebddd..6f35ea81aa3a 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -415,6 +415,7 @@ const CONST = { PHONE_PAD: 'phone-pad', NUMBER_PAD: 'number-pad', DECIMAL_PAD: 'decimal-pad', + VISIBLE_PASSWORD: 'visible-password', }, ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source', diff --git a/src/components/TextInput/index.android.js b/src/components/TextInput/index.android.js index d3a67cca3b0b..840ab222a30d 100644 --- a/src/components/TextInput/index.android.js +++ b/src/components/TextInput/index.android.js @@ -2,6 +2,7 @@ import React, {forwardRef} from 'react'; import styles from '../../styles/styles'; import BaseTextInput from './BaseTextInput'; import * as baseTextInputPropTypes from './baseTextInputPropTypes'; +import CONST from '../../CONST'; const TextInput = forwardRef((props, ref) => ( ( autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType} innerRef={ref} inputStyle={[styles.baseTextInput, ...props.inputStyle]} - getKeyboardType={passwordHidden => (props.secureTextEntry && !passwordHidden ? 'visible-password' : props.keyboardType)} + getKeyboardType={passwordHidden => (props.secureTextEntry && !passwordHidden ? CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD : props.keyboardType)} /> )); From d9ce1fa75dfedf57d0cb0f319dbe702e784f036a Mon Sep 17 00:00:00 2001 From: b1tjoy <103875612+b1tjoy@users.noreply.github.com> Date: Mon, 4 Jul 2022 23:41:27 +0800 Subject: [PATCH 3/5] move getKeyboardType function to libs and refactor code --- src/components/TextInput/BaseTextInput.js | 4 +-- src/components/TextInput/index.android.js | 25 ------------------- .../{index.ios.js => index.native.js} | 0 src/libs/getKeyboardType/index.android.js | 15 +++++++++++ src/libs/getKeyboardType/index.ios.js | 12 +++++++++ src/libs/getKeyboardType/index.js | 12 +++++++++ 6 files changed, 41 insertions(+), 27 deletions(-) delete mode 100644 src/components/TextInput/index.android.js rename src/components/TextInput/{index.ios.js => index.native.js} (100%) create mode 100644 src/libs/getKeyboardType/index.android.js create mode 100644 src/libs/getKeyboardType/index.ios.js create mode 100644 src/libs/getKeyboardType/index.js diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 14b61972c231..88c5d490f405 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -14,6 +14,7 @@ import * as Expensicons from '../Icon/Expensicons'; import Text from '../Text'; import * as styleConst from './styleConst'; import * as StyleUtils from '../../styles/StyleUtils'; +import getKeyboardType from '../../libs/getKeyboardType'; class BaseTextInput extends Component { constructor(props) { @@ -199,7 +200,6 @@ class BaseTextInput extends Component { !this.props.hideFocusedState && this.state.isFocused && styles.borderColorFocus, (this.props.hasError || this.props.errorText) && styles.borderColorDanger, ], (finalStyles, s) => ({...finalStyles, ...s}), {}); - const keyboardType = this.props.getKeyboardType ? this.props.getKeyboardType(this.state.passwordHidden) : this.props.keyboardType; return ( <> @@ -273,7 +273,7 @@ class BaseTextInput extends Component { secureTextEntry={this.state.passwordHidden} onPressOut={this.props.onPress} showSoftInputOnFocus={!this.props.disableKeyboard} - keyboardType={keyboardType} + keyboardType={getKeyboardType(this.props.secureTextEntry, this.state.passwordHidden, this.props.keyboardType)} /> {this.props.secureTextEntry && ( ( - (props.secureTextEntry && !passwordHidden ? CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD : props.keyboardType)} - /> -)); - -TextInput.propTypes = baseTextInputPropTypes.propTypes; -TextInput.defaultProps = baseTextInputPropTypes.defaultProps; -TextInput.displayName = 'TextInput'; - -export default TextInput; diff --git a/src/components/TextInput/index.ios.js b/src/components/TextInput/index.native.js similarity index 100% rename from src/components/TextInput/index.ios.js rename to src/components/TextInput/index.native.js diff --git a/src/libs/getKeyboardType/index.android.js b/src/libs/getKeyboardType/index.android.js new file mode 100644 index 000000000000..d8d7b1737509 --- /dev/null +++ b/src/libs/getKeyboardType/index.android.js @@ -0,0 +1,15 @@ +import CONST from '../../CONST'; + +/** + * Return visible-password keyboard type when secure text is visible, + * otherwise return keyboardType prop provided by parent component + * @param {Boolean} secureTextEntry + * @param {Boolean} passwordHidden + * @param {String} keyboardType + * @return {String} + */ +function getKeyboardType(secureTextEntry, passwordHidden, keyboardType) { + return secureTextEntry && !passwordHidden ? CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD : keyboardType; +} + +export default getKeyboardType; diff --git a/src/libs/getKeyboardType/index.ios.js b/src/libs/getKeyboardType/index.ios.js new file mode 100644 index 000000000000..a552f1b94af6 --- /dev/null +++ b/src/libs/getKeyboardType/index.ios.js @@ -0,0 +1,12 @@ +/** + * Return keyboardType prop provided by parent component on iOS + * @param {Boolean} secureTextEntry + * @param {Boolean} passwordHidden + * @param {String} keyboardType + * @return {String} + */ +function getKeyboardType(secureTextEntry, passwordHidden, keyboardType) { + return keyboardType; +} + +export default getKeyboardType; diff --git a/src/libs/getKeyboardType/index.js b/src/libs/getKeyboardType/index.js new file mode 100644 index 000000000000..245d4af96e25 --- /dev/null +++ b/src/libs/getKeyboardType/index.js @@ -0,0 +1,12 @@ +/** + * Return keyboardType prop provided by parent component on Web/Desktop + * @param {Boolean} secureTextEntry + * @param {Boolean} passwordHidden + * @param {String} keyboardType + * @return {String} + */ +function getKeyboardType(secureTextEntry, passwordHidden, keyboardType) { + return keyboardType; +} + +export default getKeyboardType; From 416566e212abad7f9a0cd98b0e6c629894e63a6a Mon Sep 17 00:00:00 2001 From: b1tjoy <103875612+b1tjoy@users.noreply.github.com> Date: Wed, 13 Jul 2022 13:03:21 +0800 Subject: [PATCH 4/5] refactor code and revert unrelated change --- src/components/TextInput/BaseTextInput.js | 4 ++-- src/libs/getKeyboardType/index.android.js | 6 +++--- src/libs/getKeyboardType/index.ios.js | 12 ------------ src/libs/getKeyboardType/index.js | 6 +++--- src/pages/signin/PasswordForm.js | 1 - 5 files changed, 8 insertions(+), 21 deletions(-) delete mode 100644 src/libs/getKeyboardType/index.ios.js diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 88c5d490f405..ea54f17e62cd 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -14,7 +14,7 @@ import * as Expensicons from '../Icon/Expensicons'; import Text from '../Text'; import * as styleConst from './styleConst'; import * as StyleUtils from '../../styles/StyleUtils'; -import getKeyboardType from '../../libs/getKeyboardType'; +import getSecureEntryKeyboardType from '../../libs/getKeyboardType'; class BaseTextInput extends Component { constructor(props) { @@ -273,7 +273,7 @@ class BaseTextInput extends Component { secureTextEntry={this.state.passwordHidden} onPressOut={this.props.onPress} showSoftInputOnFocus={!this.props.disableKeyboard} - keyboardType={getKeyboardType(this.props.secureTextEntry, this.state.passwordHidden, this.props.keyboardType)} + keyboardType={getSecureEntryKeyboardType(this.props.secureTextEntry, this.state.passwordHidden, this.props.keyboardType)} /> {this.props.secureTextEntry && ( this.setState({password: text})} onSubmitEditing={this.validateAndSubmitForm} blurOnSubmit={false} - autoCapitalize="none" /> Date: Wed, 13 Jul 2022 22:15:36 +0800 Subject: [PATCH 5/5] use arrow function instead and remove unused parameters --- src/components/TextInput/BaseTextInput.js | 4 ++-- src/libs/getKeyboardType/index.android.js | 15 --------------- src/libs/getKeyboardType/index.js | 12 ------------ .../getSecureEntryKeyboardType/index.android.js | 11 +++++++++++ src/libs/getSecureEntryKeyboardType/index.js | 6 ++++++ 5 files changed, 19 insertions(+), 29 deletions(-) delete mode 100644 src/libs/getKeyboardType/index.android.js delete mode 100644 src/libs/getKeyboardType/index.js create mode 100644 src/libs/getSecureEntryKeyboardType/index.android.js create mode 100644 src/libs/getSecureEntryKeyboardType/index.js diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index ea54f17e62cd..a083af0f2e16 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -14,7 +14,7 @@ import * as Expensicons from '../Icon/Expensicons'; import Text from '../Text'; import * as styleConst from './styleConst'; import * as StyleUtils from '../../styles/StyleUtils'; -import getSecureEntryKeyboardType from '../../libs/getKeyboardType'; +import getSecureEntryKeyboardType from '../../libs/getSecureEntryKeyboardType'; class BaseTextInput extends Component { constructor(props) { @@ -273,7 +273,7 @@ class BaseTextInput extends Component { secureTextEntry={this.state.passwordHidden} onPressOut={this.props.onPress} showSoftInputOnFocus={!this.props.disableKeyboard} - keyboardType={getSecureEntryKeyboardType(this.props.secureTextEntry, this.state.passwordHidden, this.props.keyboardType)} + keyboardType={getSecureEntryKeyboardType(this.props.keyboardType, this.props.secureTextEntry, this.state.passwordHidden)} /> {this.props.secureTextEntry && ( (secureTextEntry && !passwordHidden ? CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD : keyboardType); diff --git a/src/libs/getSecureEntryKeyboardType/index.js b/src/libs/getSecureEntryKeyboardType/index.js new file mode 100644 index 000000000000..4e6ae86fc9aa --- /dev/null +++ b/src/libs/getSecureEntryKeyboardType/index.js @@ -0,0 +1,6 @@ +/** + * Return keyboardType passed as function parameter on Web/Desktop/iOS + * @param {String} keyboardType + * @return {String} + */ +export default keyboardType => keyboardType;