Remove in-app password requirement for passwordless users

src/languages/en.js

@@ -377,8 +377,8 @@ export default {
     addSecondaryLoginPage: {
         addPhoneNumber: 'Add phone number',
         addEmailAddress: 'Add email address',
-        enterPreferredPhoneNumberToSendValidationLink: 'Enter your preferred phone number and password to send a validation link.',
-        enterPreferredEmailToSendValidationLink: 'Enter your preferred email address and password to send a validation link.',
+        enterPreferredPhoneNumberToSendValidationLink: 'Enter your preferred phone number to send a validation link.',
+        enterPreferredEmailToSendValidationLink: 'Enter your preferred email address to send a validation link.',
         sendValidation: 'Send validation',
     },
     initialSettingsPage: {

src/languages/es.js

@@ -377,8 +377,8 @@ export default {
     addSecondaryLoginPage: {
         addPhoneNumber: 'Agregar número de teléfono',
         addEmailAddress: 'Agregar dirección de email',
-        enterPreferredPhoneNumberToSendValidationLink: 'Escribe tu número de teléfono y contraseña para recibir el enlace de validación.',
-        enterPreferredEmailToSendValidationLink: 'Escribe tu email y contraseña para recibir el enlace de validación.',
+        enterPreferredPhoneNumberToSendValidationLink: 'Escribe tu número de teléfono para recibir el enlace de validación.',
+        enterPreferredEmailToSendValidationLink: 'Escribe tu email para recibir el enlace de validación.',
         sendValidation: 'Enviar validación',
     },
     initialSettingsPage: {

src/pages/settings/Payments/AddDebitCardPage.js

@@ -21,20 +21,25 @@ import ONYXKEYS from '../../../ONYXKEYS';
 import AddressSearch from '../../../components/AddressSearch';
 import * as ComponentUtils from '../../../libs/ComponentUtils';
 import Form from '../../../components/Form';
+import Permissions from '../../../libs/Permissions';
 
 const propTypes = {
     /* Onyx Props */
     formData: PropTypes.shape({
         setupComplete: PropTypes.bool,
     }),
 
+    /** List of betas available to current user */
+    betas: PropTypes.arrayOf(PropTypes.string),
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     formData: {
         setupComplete: false,
     },
+    betas: [],
 };
 
 class DebitCardPage extends Component {
@@ -95,7 +100,7 @@ class DebitCardPage extends Component {
             errors.addressState = this.props.translate('addDebitCardPage.error.addressState');
         }
 
-        if (!values.password || _.isEmpty(values.password.trim())) {
+        if (!Permissions.canUsePasswordlessLogins(this.props.betas) && (!values.password || _.isEmpty(values.password.trim()))) {
             errors.password = this.props.translate('addDebitCardPage.error.password');
         }
 
@@ -176,15 +181,17 @@ class DebitCardPage extends Component {
                             />
                         </View>
                     </View>
-                    <View style={[styles.mt4]}>
-                        <TextInput
-                            inputID="password"
-                            label={this.props.translate('addDebitCardPage.expensifyPassword')}
-                            textContentType="password"
-                            autoCompleteType={ComponentUtils.PASSWORD_AUTOCOMPLETE_TYPE}
-                            secureTextEntry
-                        />
-                    </View>
+                    {!Permissions.canUsePasswordlessLogins(this.props.betas) && (
+                        <View style={[styles.mt4]}>
+                            <TextInput
+                                inputID="password"
+                                label={this.props.translate('addDebitCardPage.expensifyPassword')}
+                                textContentType="password"
+                                autoCompleteType={ComponentUtils.PASSWORD_AUTOCOMPLETE_TYPE}
+                                secureTextEntry
+                            />
+                        </View>
+                    )}
                     <CheckboxWithLabel
                         inputID="acceptedTerms"
                         LabelComponent={() => (
@@ -212,5 +219,8 @@ export default compose(
         formData: {
             key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM,
         },
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
     }),
 )(DebitCardPage);

src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

@@ -299,7 +299,7 @@ class BasePaymentsPage extends React.Component {
         LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));
     }
 
-    makeDefaultPaymentMethod(password) {
+    makeDefaultPaymentMethod(password = '') {
         // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors
         const paymentMethods = PaymentUtils.formatPaymentMethods(
             this.props.bankAccountList,
@@ -464,10 +464,14 @@ class BasePaymentsPage extends React.Component {
                                     // InteractionManager fires after the currently running animation is completed.
                                     // https://github.com/Expensify/App/issues/7768#issuecomment-1044879541
                                     InteractionManager.runAfterInteractions(() => {
-                                        this.setState({
-                                            shouldShowPasswordPrompt: true,
-                                            passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
-                                        });
+                                        if (Permissions.canUsePasswordlessLogins(this.props.betas)) {
+                                            this.makeDefaultPaymentMethod();
+                                        } else {
+                                            this.setState({
+                                                shouldShowPasswordPrompt: true,
+                                                passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
+                                            });
+                                        }
                                     });
                                 }}
                                 text={this.props.translate('paymentsPage.setDefaultConfirmation')}

src/pages/settings/Profile/Contacts/AddSecondaryLoginPage.js

@@ -20,6 +20,7 @@ import FixedFooter from '../../../../components/FixedFooter';
 import TextInput from '../../../../components/TextInput';
 import userPropTypes from '../../userPropTypes';
 import * as LoginUtils from '../../../../libs/LoginUtils';
+import Permissions from '../../../../libs/Permissions';
 
 const propTypes = {
     /* Onyx Props */
@@ -34,12 +35,16 @@ const propTypes = {
         }),
     }),
 
+    /** List of betas available to current user */
+    betas: PropTypes.arrayOf(PropTypes.string),
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     user: {},
     route: {},
+    betas: [],
 };
 
 class AddSecondaryLoginPage extends Component {
@@ -85,7 +90,11 @@ class AddSecondaryLoginPage extends Component {
             : this.state.login;
 
         const validationMethod = this.formType === CONST.LOGIN_TYPE.PHONE ? Str.isValidPhone : Str.isValidEmail;
-        return !this.state.password || !validationMethod(login);
+        if (!validationMethod(login)) {
+            return false;
+        }
+
+        return !Permissions.canUsePasswordlessLogins(this.props.betas) && !this.state.password;
     }
 
     render() {
@@ -127,17 +136,19 @@ class AddSecondaryLoginPage extends Component {
                             returnKeyType="done"
                         />
                     </View>
-                    <View style={styles.mb6}>
-                        <TextInput
-                            label={this.props.translate('common.password')}
-                            value={this.state.password}
-                            onChangeText={password => this.setState({password})}
-                            secureTextEntry
-                            autoCompleteType="password"
-                            textContentType="password"
-                            onSubmitEditing={this.submitForm}
-                        />
-                    </View>
+                    {!Permissions.canUsePasswordlessLogins(this.props.betas) && (
+                        <View style={styles.mb6}>
+                            <TextInput
+                                label={this.props.translate('common.password')}
+                                value={this.state.password}
+                                onChangeText={password => this.setState({password})}
+                                secureTextEntry
+                                autoCompleteType="password"
+                                textContentType="password"
+                                onSubmitEditing={this.submitForm}
+                            />
+                        </View>
+                    )}
                     {!_.isEmpty(this.props.user.error) && (
                         <Text style={styles.formError}>
                             {this.props.user.error}
@@ -168,5 +179,8 @@ export default compose(
         user: {
             key: ONYXKEYS.USER,
         },
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
     }),
 )(AddSecondaryLoginPage);