fix: [VAN-544] Add autocomplete attribute fir input fields. (#663)

src/common-components/PasswordField.jsx

@@ -63,6 +63,7 @@ const PasswordField = (props) => {
           type={isPasswordHidden ? 'password' : 'text'}
           name={props.name}
           value={props.value}
+          autoComplete={props.autoComplete}
           aria-invalid={props.errorMessage !== ''}
           onFocus={handleFocus}
           onBlur={handleBlur}
@@ -89,6 +90,7 @@ PasswordField.defaultProps = {
   handleFocus: null,
   handleChange: () => {},
   showRequirements: true,
+  autoComplete: null,
 };
 
 PasswordField.propTypes = {
@@ -102,6 +104,7 @@ PasswordField.propTypes = {
   name: PropTypes.string.isRequired,
   showRequirements: PropTypes.bool,
   value: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
 };
 
 export default injectIntl(PasswordField);

src/forgot-password/ForgotPasswordPage.jsx

@@ -120,6 +120,7 @@ const ForgotPasswordPage = (props) => {
               floatingLabel={intl.formatMessage(messages['forgot.password.page.email.field.label'])}
               name="email"
               value={email}
+              autoComplete="on"
               errorMessage={validationError}
               handleChange={(e) => setEmail(e.target.value)}
               handleBlur={handleBlur}

src/login/LoginPage.jsx

@@ -263,6 +263,7 @@ class LoginPage extends React.Component {
             <FormGroup
               name="emailOrUsername"
               value={this.state.emailOrUsername}
+              autoComplete="on"
               handleChange={(e) => this.setState({ emailOrUsername: e.target.value, isSubmitted: false })}
               handleFocus={this.handleOnFocus}
               handleBlur={this.handleOnBlur}
@@ -272,6 +273,7 @@ class LoginPage extends React.Component {
             <PasswordField
               name="password"
               value={this.state.password}
+              autoComplete="off"
               showRequirements={false}
               handleChange={(e) => this.setState({ password: e.target.value, isSubmitted: false })}
               handleFocus={this.handleOnFocus}

src/register/CountryDropdown.jsx

@@ -187,7 +187,7 @@ class CountryDropdown extends React.Component {
         <FormGroup
           as="input"
           name={this.props.name}
-          autoComplete="chrome-off"
+          autoComplete="off"
           className="mb-0"
           floatingLabel={this.props.floatingLabel}
           trailingElement={this.state.icon}

src/register/RegistrationPage.jsx

@@ -770,6 +770,7 @@ class RegistrationPage extends React.Component {
             <FormGroup
               name="name"
               value={this.state.name}
+              autoComplete="on"
               handleBlur={this.handleOnBlur}
               handleChange={this.handleOnChange}
               handleFocus={this.handleOnFocus}
@@ -780,6 +781,7 @@ class RegistrationPage extends React.Component {
             <FormGroup
               name="email"
               value={this.state.email}
+              autoComplete="on"
               handleBlur={this.handleOnBlur}
               handleChange={this.handleOnChange}
               errorMessage={this.state.errors.email}
@@ -795,6 +797,7 @@ class RegistrationPage extends React.Component {
               name="username"
               spellCheck="false"
               value={this.state.username}
+              autoComplete="on"
               handleBlur={this.handleOnBlur}
               handleChange={this.handleOnChange}
               handleFocus={this.handleOnFocus}
@@ -810,6 +813,7 @@ class RegistrationPage extends React.Component {
               <PasswordField
                 name="password"
                 value={this.state.password}
+                autoComplete="off"
                 handleBlur={this.handleOnBlur}
                 handleChange={this.handleOnChange}
                 handleFocus={this.handleOnFocus}
@@ -824,6 +828,7 @@ class RegistrationPage extends React.Component {
                 floatingLabel={intl.formatMessage(messages['registration.country.label'])}
                 options={this.countryList}
                 value={this.state.country}
+                autoComplete="on"
                 handleBlur={this.handleOnBlur}
                 handleFocus={this.handleOnFocus}
                 errorMessage={this.state.errors.country}

src/register/UsernameField.jsx

@@ -23,6 +23,7 @@ const UsernameField = (props) => {
             name="username"
             variant="outline-dark"
             className="username-suggestion data-hj-suppress"
+            autoComplete={props.autoComplete}
             key={`suggestion-${index.toString()}`}
             onClick={(e) => props.handleSuggestionClick(e, username)}
           >
@@ -56,6 +57,7 @@ UsernameField.defaultProps = {
   handleSuggestionClick: () => {},
   handleUsernameSuggestionClose: () => {},
   errorMessage: '',
+  autoComplete: null,
 };
 
 UsernameField.propTypes = {
@@ -66,6 +68,7 @@ UsernameField.propTypes = {
   intl: intlShape.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
 };
 
 export default injectIntl(UsernameField);