Anthony toggle show password

src/components/ExpensiTextInput/BaseExpensiTextInput.js

@@ -1,12 +1,18 @@
 import React, {Component} from 'react';
 import {
-    Animated, TextInput, View, TouchableWithoutFeedback,
+    Animated, TextInput, View, TouchableWithoutFeedback, Pressable,
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
 import ExpensiTextInputLabel from './ExpensiTextInputLabel';
 import {propTypes, defaultProps} from './propTypes';
 import themeColors from '../../styles/themes/default';
-import styles from '../../styles/styles';
+import styles, {getIconFillColor} from '../../styles/styles';
+import Icon from '../Icon';
+import {
+    Eye,
+    EyeDisabled,
+} from '../Icon/Expensicons';
+import getButtonState from '../../libs/getButtonState';
 
 const ACTIVE_LABEL_TRANSLATE_Y = -10;
 const ACTIVE_LABEL_TRANSLATE_X = (translateX = -22) => translateX;
@@ -28,6 +34,7 @@ class BaseExpensiTextInput extends Component {
             labelTranslateX: new Animated.Value(hasValue
                 ? ACTIVE_LABEL_TRANSLATE_X(props.translateX) : INACTIVE_LABEL_TRANSLATE_X),
             labelScale: new Animated.Value(hasValue ? ACTIVE_LABEL_SCALE : INACTIVE_LABEL_SCALE),
+            passwordHidden: props.defaultHidePassword && props.secureTextEntry,
         };
 
         this.input = null;
@@ -36,6 +43,7 @@ class BaseExpensiTextInput extends Component {
         this.onFocus = this.onFocus.bind(this);
         this.onBlur = this.onBlur.bind(this);
         this.setValue = this.setValue.bind(this);
+        this.secureTextEntry = props.secureTextEntry;
     }
 
     componentDidMount() {
@@ -107,6 +115,11 @@ class BaseExpensiTextInput extends Component {
         ]).start();
     }
 
+    togglePasswordVisibility() {
+        this.setState(prevState => ({passwordHidden: !prevState.passwordHidden}));
+    }
+
+
     render() {
         const {
             label,
@@ -118,6 +131,7 @@ class BaseExpensiTextInput extends Component {
             ignoreLabelTranslateX,
             innerRef,
             autoFocus,
+            secureTextEntry,
             ...inputProps
         } = this.props;
 
@@ -145,22 +159,43 @@ class BaseExpensiTextInput extends Component {
                                 labelScale={this.state.labelScale}
                             />
                         ) : null}
-                        <TextInput
-                            ref={(ref) => {
-                                if (typeof innerRef === 'function') { innerRef(ref); }
-                                this.input = ref;
-                            }}
+                        <View style={styles.flexRow}>
+                            <TextInput
+                                ref={(ref) => {
+                                    if (typeof innerRef === 'function') { innerRef(ref); }
+                                    this.input = ref;
+                                }}
                             // eslint-disable-next-line
                             {...inputProps}
-                            value={value}
-                            placeholder={(this.state.isFocused || !label) ? placeholder : null}
-                            placeholderTextColor={themeColors.placeholderText}
-                            underlineColorAndroid="transparent"
-                            style={inputStyle}
-                            onFocus={this.onFocus}
-                            onBlur={this.onBlur}
-                            onChangeText={this.setValue}
-                        />
+                                value={value}
+                                placeholder={(this.state.isFocused || !label) ? placeholder : null}
+                                placeholderTextColor={themeColors.placeholderText}
+                                underlineColorAndroid="transparent"
+                                style={[...inputStyle, styles.flex1, styles.pt3, !hasLabel && styles.pv0]}
+                                onFocus={this.onFocus}
+                                onBlur={this.onBlur}
+                                onChangeText={this.setValue}
+                                secureTextEntry={this.state.passwordHidden}
+                            />
+                            {secureTextEntry && (
+                            <Pressable
+                                accessibilityRole="button"
+                            // eslint-disable-next-line lines-around-comment
+                            // accessibilityLabel={this.props.translate('sidebarScreen.buttonSearch')}
+                                style={[
+                                    styles.secureInputEyeButton,
+                                ]}
+                                onPress={() => this.togglePasswordVisibility()}
+                            >
+                                {({hovered, pressed}) => (
+                                    <Icon
+                                        src={this.state.passwordHidden ? EyeDisabled : Eye}
+                                        fill={getIconFillColor(getButtonState(hovered, pressed))}
+                                    />
+                                )}
+                            </Pressable>
+                            )}
+                        </View>
                     </View>
                 </TouchableWithoutFeedback>
             </View>

src/components/ExpensiTextInput/index.js

@@ -10,6 +10,7 @@ const ExpensiTextInput = forwardRef((props, ref) => (
         innerRef={ref}
         inputStyle={[styles.expensiTextInput, styles.expensiTextInputDesktop]}
         ignoreLabelTranslateX
+        defaultHidePassword
     />
 ));
 

src/components/Icon/Expensicons.js

@@ -17,6 +17,7 @@ import Download from '../../../assets/images/download.svg';
 import Emoji from '../../../assets/images/emoji.svg';
 import Exclamation from '../../../assets/images/exclamation.svg';
 import Eye from '../../../assets/images/eye.svg';
+import EyeDisabled from '../../../assets/images/eye-disabled.svg';
 import ExpensifyCard from '../../../assets/images/expensifycard.svg';
 import Gallery from '../../../assets/images/gallery.svg';
 import Gear from '../../../assets/images/gear.svg';
@@ -74,6 +75,7 @@ export {
     Emoji,
     Exclamation,
     Eye,
+    EyeDisabled,
     ExpensifyCard,
     Gallery,
     Gear,

src/languages/en.js

@@ -252,7 +252,6 @@ export default {
         currentPassword: 'Current Password',
         newPassword: 'New Password',
         newPasswordPrompt: 'New password must be different than your old password, have at least 8 characters,\n1 capital letter, 1 lowercase letter, 1 number.',
-        confirmNewPassword: 'Confirm New Password',
     },
     addPayPalMePage: {
         enterYourUsernameToGetPaidViaPayPal: 'Enter your username to get paid back via PayPal.',
@@ -345,9 +344,7 @@ export default {
     },
     setPasswordPage: {
         enterPassword: 'Enter a password',
-        confirmNewPassword: 'Confirm the password',
         setPassword: 'Set Password',
-        passwordsDontMatch: 'Passwords must match',
         newPasswordPrompt: 'Your password must have at least 8 characters,\n1 capital letter, 1 lowercase letter, 1 number.',
         passwordFormTitle: 'Welcome back to the New Expensify! Please set your password.',
     },

src/languages/es.js

@@ -252,7 +252,6 @@ export default {
         currentPassword: 'Contraseña Actual',
         newPassword: 'Nueva contraseña',
         newPasswordPrompt: 'La nueva contraseña tiene que ser diferente de la antigua, tener al menos 8 letras,\n1 letra mayúscula, 1 letra minúscula y 1 número.',
-        confirmNewPassword: 'Confirma la Nueva Contraseña',
     },
     addPayPalMePage: {
         enterYourUsernameToGetPaidViaPayPal: 'Escribe tu nombre de usuario para que otros puedan pagarte a través de PayPal.',
@@ -345,9 +344,7 @@ export default {
     },
     setPasswordPage: {
         enterPassword: 'Escribe una contraseña',
-        confirmNewPassword: 'Confirma la contraseña',
         setPassword: 'Configura tu Contraseña',
-        passwordsDontMatch: 'Las contraseñas deben coincidir',
         newPasswordPrompt: 'Su contraseña debe tener al menos 8 caracteres, \n1 letra mayúscula, 1 letra minúscula, 1 número.',
         passwordFormTitle: '¡Bienvenido de vuelta al Nuevo Expensify! Por favor, elige una contraseña.',
     },

src/pages/settings/NewPasswordForm.js

@@ -29,17 +29,14 @@ class NewPasswordForm extends React.Component {
         super(props);
 
         this.state = {
-            confirmNewPassword: '',
             passwordHintError: false,
-            shouldShowPasswordConfirmError: false,
         };
     }
 
-    componentDidUpdate(prevProps, prevState) {
-        const eitherPasswordChanged = (this.props.password !== prevProps.password)
-        || this.state.confirmNewPassword !== prevState.confirmNewPassword;
-        if (eitherPasswordChanged) {
-            this.props.updateIsFormValid(this.isValidForm());
+    componentDidUpdate(prevProps) {
+        const passwordChanged = (this.props.password !== prevProps.password);
+        if (passwordChanged) {
+            this.props.updateIsFormValid(this.isValidPassword());
         }
     }
 
@@ -52,34 +49,11 @@ class NewPasswordForm extends React.Component {
         }
     }
 
-    onBlurConfirmPassword() {
-        if (this.state.shouldShowPasswordConfirmError) {
-            return;
-        }
-        if (this.state.confirmNewPassword && !this.doPasswordsMatch()) {
-            this.setState({shouldShowPasswordConfirmError: true});
-        }
-    }
 
     isValidPassword() {
         return this.props.password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
     }
 
-    doPasswordsMatch() {
-        return this.props.password === this.state.confirmNewPassword;
-    }
-
-    isValidForm() {
-        return this.isValidPassword() && this.doPasswordsMatch();
-    }
-
-    showPasswordMatchError() {
-        return Boolean(
-            !this.doPasswordsMatch()
-            && this.state.shouldShowPasswordConfirmError
-            && this.state.confirmNewPassword,
-        );
-    }
 
     render() {
         let passwordHintStyle;
@@ -100,29 +74,13 @@ class NewPasswordForm extends React.Component {
                         textContentType="password"
                         value={this.props.password}
                         onChangeText={password => this.props.updatePassword(password)}
+                        onSubmitEditing={() => this.props.onSubmitEditing()}
                         onBlur={() => this.onBlurNewPassword()}
                     />
                     <Text style={[styles.textLabelSupporting, styles.mt1, passwordHintStyle]}>
                         {this.props.translate('setPasswordPage.newPasswordPrompt')}
                     </Text>
                 </View>
-                <View style={styles.mb6}>
-                    <ExpensiTextInput
-                        label={`${this.props.translate('setPasswordPage.confirmNewPassword')}*`}
-                        secureTextEntry
-                        autoCompleteType="password"
-                        textContentType="password"
-                        value={this.state.confirmNewPassword}
-                        onChangeText={confirmNewPassword => this.setState({confirmNewPassword})}
-                        onSubmitEditing={() => this.props.onSubmitEditing()}
-                        onBlur={() => this.onBlurConfirmPassword()}
-                    />
-                    {this.showPasswordMatchError() && (
-                    <Text style={[styles.formError, styles.mt1]}>
-                        {this.props.translate('setPasswordPage.passwordsDontMatch')}
-                    </Text>
-                    )}
-                </View>
             </>
         );
     }

src/pages/settings/PasswordPage.js

@@ -48,7 +48,6 @@ class PasswordPage extends Component {
         this.state = {
             currentPassword: '',
             newPassword: '',
-            confirmNewPassword: '',
             isPasswordRequirementsVisible: false,
             shouldShowPasswordConfirmError: false,
         };
@@ -62,29 +61,11 @@ class PasswordPage extends Component {
     }
 
     onBlurNewPassword() {
-        const stateToUpdate = {};
-        if (!this.state.newPassword || !this.isValidPassword()) {
-            stateToUpdate.isPasswordRequirementsVisible = true;
-        } else {
-            stateToUpdate.isPasswordRequirementsVisible = false;
-        }
-
-        if (this.state.newPassword && this.state.confirmNewPassword && !this.doPasswordsMatch()) {
-            stateToUpdate.shouldShowPasswordConfirmError = true;
-        } else {
-            stateToUpdate.shouldShowPasswordConfirmError = false;
-        }
-
-        this.setState(stateToUpdate);
+        this.setState(prevState => (
+            {isPasswordRequirementsVisible: !prevState.newPassword || !this.isValidPassword()}
+        ));
     }
 
-    onBlurConfirmPassword() {
-        if ((this.state.newPassword && !this.state.confirmNewPassword) || !this.doPasswordsMatch()) {
-            this.setState({shouldShowPasswordConfirmError: true});
-        } else {
-            this.setState({shouldShowPasswordConfirmError: false});
-        }
-    }
 
     isValidPassword() {
         return this.state.newPassword.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
@@ -100,9 +81,6 @@ class PasswordPage extends Component {
             });
     }
 
-    doPasswordsMatch() {
-        return this.state.newPassword === this.state.confirmNewPassword;
-    }
 
     render() {
         return (
@@ -143,6 +121,7 @@ class PasswordPage extends Component {
                                 textContentType="password"
                                 value={this.state.newPassword}
                                 onChangeText={newPassword => this.setState({newPassword})}
+                                onSubmitEditing={this.handleChangePassword}
                                 onFocus={() => this.setState({isPasswordRequirementsVisible: true})}
                                 onBlur={() => this.onBlurNewPassword()}
                             />
@@ -152,36 +131,17 @@ class PasswordPage extends Component {
                                 </Text>
                             )}
                         </View>
-                        <View style={styles.mb6}>
-                            <ExpensiTextInput
-                                label={`${this.props.translate('passwordPage.confirmNewPassword')}*`}
-                                secureTextEntry
-                                autoCompleteType="password"
-                                textContentType="password"
-                                value={this.state.confirmNewPassword}
-                                onChangeText={confirmNewPassword => this.setState({confirmNewPassword})}
-                                onSubmitEditing={this.handleChangePassword}
-                                onBlur={() => this.onBlurConfirmPassword()}
-                            />
-                        </View>
                         {!this.state.shouldShowPasswordConfirmError && !isEmpty(this.props.account.error) && (
                             <Text style={styles.formError}>
                                 {this.props.account.error}
                             </Text>
                         )}
-                        {this.state.shouldShowPasswordConfirmError && (
-                            <Text style={[styles.formError, styles.mt1]}>
-                                {this.props.translate('setPasswordPage.passwordsDontMatch')}
-                            </Text>
-                        )}
                     </ScrollView>
                     <FixedFooter style={[styles.flexGrow0]}>
                         <Button
                             success
                             style={[styles.mb2]}
                             isDisabled={!this.state.currentPassword || !this.state.newPassword
-                                || !this.state.confirmNewPassword
-                                || (this.state.newPassword !== this.state.confirmNewPassword)
                                 || (this.state.currentPassword === this.state.newPassword)
                                 || !this.state.newPassword.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING)}
                             isLoading={this.props.account.loading}

src/styles/styles.js

@@ -513,7 +513,7 @@ const styles = {
         borderWidth: 1,
         borderRadius: variables.componentBorderRadiusNormal,
         borderColor: themeColors.border,
-        paddingTop: 25,
+        paddingTop: 12,
         paddingBottom: 8,
         paddingHorizontal: 12,
         justifyContent: 'center',
@@ -548,6 +548,14 @@ const styles = {
         padding: 0,
         left,
     }),
+    secureInputEyeButton: {
+        right: 0,
+        top: 0,
+        borderRadius: 6,
+        height: 32,
+        margin: 3,
+        justifyContent: 'center',
+    },
     textInput: {
         backgroundColor: themeColors.componentBG,
         borderRadius: variables.componentBorderRadiusNormal,