From ecc9e0cd0785ad142d3138b563c79fe8915d0e60 Mon Sep 17 00:00:00 2001
From: Shafqat Farhan <shafqat.farhan@arbisoft.com>
Date: Fri, 25 Jun 2021 17:44:27 +0500
Subject: [PATCH] VAN-617 - Show/Hide password should not trigger field
 validation (#372)

---
 src/redesign/common-components/PasswordField.jsx | 4 ++--
 src/redesign/register/RegistrationPage.jsx       | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/redesign/common-components/PasswordField.jsx b/src/redesign/common-components/PasswordField.jsx
index de770829..d8bc54a8 100644
--- a/src/redesign/common-components/PasswordField.jsx
+++ b/src/redesign/common-components/PasswordField.jsx
@@ -30,11 +30,11 @@ const PasswordField = (props) => {
   };
 
   const HideButton = (
-    <IconButton className="password-visibility" src={VisibilityOff} iconAs={Icon} onClick={setHiddenTrue} size="sm" variant="secondary" alt={formatMessage(messages['hide.password'])} />
+    <IconButton onFocus={handleFocus} onBlur={handleBlur} name="passwordValidation" className="password-visibility" src={VisibilityOff} iconAs={Icon} onClick={setHiddenTrue} size="sm" variant="secondary" alt={formatMessage(messages['hide.password'])} />
   );
 
   const ShowButton = (
-    <IconButton className="password-visibility" src={Visibility} iconAs={Icon} onClick={setHiddenFalse} size="sm" variant="secondary" alt={formatMessage(messages['show.password'])} />
+    <IconButton onFocus={handleFocus} onBlur={handleBlur} name="passwordValidation" className="password-visibility" src={Visibility} iconAs={Icon} onClick={setHiddenFalse} size="sm" variant="secondary" alt={formatMessage(messages['show.password'])} />
   );
   const placement = window.innerWidth < 768 ? 'top' : 'left';
   const tooltip = (
diff --git a/src/redesign/register/RegistrationPage.jsx b/src/redesign/register/RegistrationPage.jsx
index 8a484af8..0af5946e 100644
--- a/src/redesign/register/RegistrationPage.jsx
+++ b/src/redesign/register/RegistrationPage.jsx
@@ -219,7 +219,11 @@ class RegistrationPage extends React.Component {
   }
 
   handleOnBlur = (e) => {
-    const { name, value } = e.target;
+    let { name, value } = e.target;
+    if (name === 'passwordValidation') {
+      name = 'password';
+      value = this.state.password;
+    }
     const payload = {
       is_authn_mfe: true,
       form_field_key: name,
@@ -253,6 +257,9 @@ class RegistrationPage extends React.Component {
     if (e.target.name === 'username') {
       this.props.clearUsernameSuggestions();
     }
+    if (e.target.name === 'passwordValidation') {
+      state.errors.password = '';
+    }
     this.setState({ ...state });
   }