From a9ba0e25472a0784469a3311f15a5b050ddb74e9 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Wed, 4 Aug 2021 21:10:08 +0530
Subject: [PATCH 1/5] fix(change-password): Handle confirm password validation
 in Change Password screen

---
 src/pages/settings/PasswordPage.js | 46 +++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index a10c43c9d877..effff730e9bf 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -49,6 +49,7 @@ class PasswordPage extends Component {
             newPassword: '',
             confirmNewPassword: '',
             isPasswordRequirementsVisible: false,
+            shouldShowPasswordConfirmError: false,
         };
 
         this.handleChangePassword = this.handleChangePassword.bind(this);
@@ -59,6 +60,31 @@ class PasswordPage extends Component {
         Onyx.merge(ONYXKEYS.ACCOUNT, {error: '', success: ''});
     }
 
+    onBlurNewPassword() {
+        if (!this.state.newPassword || !this.isValidPassword()) {
+            this.setState({isPasswordRequirementsVisible: true});
+        } else {
+            this.setState({isPasswordRequirementsVisible: false});
+        }
+
+        if (this.state.newPassword && this.state.confirmNewPassword && !this.doPasswordsMatch()) {
+            this.setState({shouldShowPasswordConfirmError: true});
+        }
+    }
+
+    onBlurConfirmPassword() {
+        if (!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);
+    }
+
+
     handleChangePassword() {
         changePassword(this.state.currentPassword, this.state.newPassword)
             .then((response) => {
@@ -68,6 +94,18 @@ class PasswordPage extends Component {
             });
     }
 
+    doPasswordsMatch() {
+        return this.state.newPassword === this.state.confirmNewPassword;
+    }
+
+    showPasswordMatchError() {
+        return Boolean(
+            !this.doPasswordsMatch()
+            && this.state.shouldShowPasswordConfirmError
+            && this.state.confirmNewPassword,
+        );
+    }
+
     render() {
         return (
             <ScreenWrapper onTransitionEnd={() => {
@@ -114,7 +152,7 @@ class PasswordPage extends Component {
                                 value={this.state.newPassword}
                                 onChangeText={newPassword => this.setState({newPassword})}
                                 onFocus={() => this.setState({isPasswordRequirementsVisible: true})}
-                                onBlur={() => this.setState({isPasswordRequirementsVisible: false})}
+                                onBlur={() => this.onBlurNewPassword()}
                             />
                             {this.state.isPasswordRequirementsVisible && (
                                 <Text style={[styles.formHint, styles.mt1]}>
@@ -134,6 +172,7 @@ class PasswordPage extends Component {
                                 value={this.state.confirmNewPassword}
                                 onChangeText={confirmNewPassword => this.setState({confirmNewPassword})}
                                 onSubmitEditing={this.handleChangePassword}
+                                onBlur={() => this.onBlurConfirmPassword()}
                             />
                         </View>
                         {!isEmpty(this.props.account.error) && (
@@ -141,6 +180,11 @@ class PasswordPage extends Component {
                                 {this.props.account.error}
                             </Text>
                         )}
+                        {this.showPasswordMatchError() && (
+                            <Text style={[styles.formError, styles.mt1]}>
+                                {this.props.translate('setPasswordPage.passwordsDontMatch')}
+                            </Text>
+                        )}
                     </ScrollView>
                     <FixedFooter style={[styles.flexGrow0]}>
                         <Button

From f0edc3cb720feedf6becb95b9654299f1d56cb41 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 5 Aug 2021 00:05:34 +0530
Subject: [PATCH 2/5] refactor(change-password-validation): Removed unwanted
 function and replaced with var check

---
 src/pages/settings/PasswordPage.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index effff730e9bf..9b09e9b36fdc 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -98,14 +98,6 @@ class PasswordPage extends Component {
         return this.state.newPassword === this.state.confirmNewPassword;
     }
 
-    showPasswordMatchError() {
-        return Boolean(
-            !this.doPasswordsMatch()
-            && this.state.shouldShowPasswordConfirmError
-            && this.state.confirmNewPassword,
-        );
-    }
-
     render() {
         return (
             <ScreenWrapper onTransitionEnd={() => {

From dcd474b436b819651102fddb4df19713138657b4 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 5 Aug 2021 00:13:12 +0530
Subject: [PATCH 3/5] fix(change-password-val): Added state var

---
 src/pages/settings/PasswordPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index 9b09e9b36fdc..f9ec1d40cc14 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -172,7 +172,7 @@ class PasswordPage extends Component {
                                 {this.props.account.error}
                             </Text>
                         )}
-                        {this.showPasswordMatchError() && (
+                        {this.state.shouldShowPasswordConfirmError && (
                             <Text style={[styles.formError, styles.mt1]}>
                                 {this.props.translate('setPasswordPage.passwordsDontMatch')}
                             </Text>

From 5093d975e6521987b6abe3a5b45b2902cf62cf85 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 7 Aug 2021 00:55:11 +0530
Subject: [PATCH 4/5] fix(password-confirm-validation): Hide API error when UI
 error shows up

---
 src/pages/settings/PasswordPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index f9ec1d40cc14..6487d26d2278 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -167,7 +167,7 @@ class PasswordPage extends Component {
                                 onBlur={() => this.onBlurConfirmPassword()}
                             />
                         </View>
-                        {!isEmpty(this.props.account.error) && (
+                        {!this.state.shouldShowPasswordConfirmError && !isEmpty(this.props.account.error) && (
                             <Text style={styles.formError}>
                                 {this.props.account.error}
                             </Text>

From 0fe950dad32f37964db928384210d28ea025c79a Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Tue, 10 Aug 2021 23:09:08 +0530
Subject: [PATCH 5/5] fix(change-password-val): Modified if block to avoid
 rerender

---
 src/pages/settings/PasswordPage.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index 6487d26d2278..827a75f12893 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -61,14 +61,19 @@ class PasswordPage extends Component {
     }
 
     onBlurNewPassword() {
+        const stateToUpdate = {};
         if (!this.state.newPassword || !this.isValidPassword()) {
-            this.setState({isPasswordRequirementsVisible: true});
+            stateToUpdate.isPasswordRequirementsVisible = true;
         } else {
-            this.setState({isPasswordRequirementsVisible: false});
+            stateToUpdate.isPasswordRequirementsVisible = false;
         }
 
         if (this.state.newPassword && this.state.confirmNewPassword && !this.doPasswordsMatch()) {
-            this.setState({shouldShowPasswordConfirmError: true});
+            stateToUpdate.shouldShowPasswordConfirmError = true;
+        }
+
+        if (!isEmpty(stateToUpdate)) {
+            this.setState(stateToUpdate);
         }
     }