diff --git a/src/languages/en.js b/src/languages/en.js
index 62110ce7014f..31a9c476856d 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -339,6 +339,11 @@ export default {
newPassword: 'Your password must have at least 8 characters, 1 capital letter, 1 lowercase letter, and 1 number.',
},
},
+ passwordConfirmationScreen: {
+ passwordUpdated: 'Password updated!',
+ allSet: 'You’re all set. Keep your new password safe.',
+ gotIt: 'Got it',
+ },
addPayPalMePage: {
enterYourUsernameToGetPaidViaPayPal: 'Enter your username to get paid back via PayPal.',
payPalMe: 'PayPal.me/',
diff --git a/src/languages/es.js b/src/languages/es.js
index 145b326ca8c1..646631b14dc3 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -339,6 +339,11 @@ export default {
newPassword: 'Su contraseña debe tener al menos 8 caracteres, 1 letra mayúscula, 1 letra minúscula y 1 número.',
},
},
+ passwordConfirmationScreen: {
+ passwordUpdated: 'Contraseña actualizada!',
+ allSet: 'Todo está listo. Guarda tu contraseña en un lugar seguro.',
+ gotIt: 'Ok, entendido',
+ },
addPayPalMePage: {
enterYourUsernameToGetPaidViaPayPal: 'Escribe tu nombre de usuario para que otros puedan pagarte a través de PayPal.',
payPalMe: 'PayPal.me/',
diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index 373cc6c8a8fb..eb6603513dc3 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -56,7 +56,8 @@ function changePasswordAndNavigate(oldPassword, password) {
return;
}
- Navigation.goBack();
+ const success = lodashGet(response, 'message', 'Password changed successfully.');
+ Onyx.merge(ONYXKEYS.ACCOUNT, {success});
})
.finally(() => {
Onyx.merge(ONYXKEYS.ACCOUNT, {loading: false});
diff --git a/src/pages/settings/PasswordConfirmationScreen.js b/src/pages/settings/PasswordConfirmationScreen.js
new file mode 100644
index 000000000000..fbb2a5a0b008
--- /dev/null
+++ b/src/pages/settings/PasswordConfirmationScreen.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import {Image, View} from 'react-native';
+import Text from '../../components/Text';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import styles from '../../styles/styles';
+import confettiPop from '../../../assets/images/confetti-pop.gif';
+import Button from '../../components/Button';
+import FixedFooter from '../../components/FixedFooter';
+import Navigation from '../../libs/Navigation/Navigation';
+
+const propTypes = {
+ ...withLocalizePropTypes,
+};
+
+const PasswordConfirmationScreen = props => (
+ <>
+
+
+
+ {props.translate('passwordConfirmationScreen.passwordUpdated')}
+
+
+ {props.translate('passwordConfirmationScreen.allSet')}
+
+
+
+
+
+);
+
+PasswordConfirmationScreen.propTypes = propTypes;
+PasswordConfirmationScreen.displayName = 'PasswordConfirmationScreen';
+
+export default withLocalize(PasswordConfirmationScreen);
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index c6779c14e421..8e68e734ec29 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -3,10 +3,8 @@ import {View, ScrollView} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import _ from 'underscore';
-
import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
import ScreenWrapper from '../../components/ScreenWrapper';
import Text from '../../components/Text';
import styles from '../../styles/styles';
@@ -20,6 +18,7 @@ import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import FixedFooter from '../../components/FixedFooter';
import TextInput from '../../components/TextInput';
import * as Session from '../../libs/actions/Session';
+import PasswordConfirmationScreen from './PasswordConfirmationScreen';
const propTypes = {
/* Onyx Props */
@@ -152,77 +151,81 @@ class PasswordPage extends Component {
Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
+ onBackButtonPress={() => Navigation.goBack()}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
-
-
- {this.props.translate('passwordPage.changingYourPasswordPrompt')}
-
-
- this.currentPasswordInputRef = el}
- secureTextEntry
- autoCompleteType="password"
- textContentType="password"
- value={this.state.currentPassword}
- onChangeText={text => this.clearErrorAndSetValue('currentPassword', text)}
- returnKeyType="done"
- hasError={this.state.errors.currentPassword}
- errorText={this.getErrorText('currentPassword')}
- onSubmitEditing={this.submit}
- />
-
-
- this.clearErrorAndSetValue('newPassword', text, ['newPasswordSameAsOld'])}
- onSubmitEditing={this.submit}
- />
- {
-
- shouldShowNewPasswordPrompt && (
-
+ ) : (
+ <>
+
- {this.props.translate('passwordPage.newPasswordPrompt')}
-
- )
- }
-
- {_.every(this.state.errors, error => !error) && !_.isEmpty(this.props.account.error) && (
-
- {this.props.account.error}
-
+
+ {this.props.translate('passwordPage.changingYourPasswordPrompt')}
+
+
+ this.currentPasswordInputRef = el}
+ secureTextEntry
+ autoCompleteType="password"
+ textContentType="password"
+ value={this.state.currentPassword}
+ onChangeText={text => this.clearErrorAndSetValue('currentPassword', text)}
+ returnKeyType="done"
+ hasError={this.state.errors.currentPassword}
+ errorText={this.getErrorText('currentPassword')}
+ onSubmitEditing={this.submit}
+ />
+
+
+ this.clearErrorAndSetValue('newPassword', text, ['newPasswordSameAsOld'])}
+ onSubmitEditing={this.submit}
+ />
+ {shouldShowNewPasswordPrompt && (
+
+ {this.props.translate('passwordPage.newPasswordPrompt')}
+
+ )}
+
+ {_.every(this.state.errors, error => !error) && !_.isEmpty(this.props.account.error) && (
+
+ {this.props.account.error}
+
+ )}
+
+
+
+
+
)}
-
-
-
-
);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index f6d3f56dec4a..d022567aa233 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2512,6 +2512,13 @@ const styles = {
userSelectText: {
userSelect: 'text',
},
+
+ screenCenteredContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ marginBottom: 40,
+ padding: 16,
+ },
};
export default styles;