<div class="wo_settings_page wow_content">
	<div class="avatar-holder">
		<img src="<?php echo $wo['setting']['avatar']?>" alt="<?php echo $wo['setting']['name']?> Profile Picture" class="avatar">
		<div class="infoz">
			<h5 title="<?php echo $wo['setting']['name']?>"><a href="<?php echo Wo_SeoLink('index.php?link1=timeline&u=' . $wo['setting']['username'] . '');?>" data-ajax="?link1=timeline&u=<?php echo $wo['setting']['username'] ?>"><?php echo $wo['setting']['name']?></a></h5>
			<p><?php echo $wo['lang']['change_password']; ?></p>
		</div>
	</div>
	<hr>

	<form class="form-horizontal setting-change-password-form" method="post">
		<div class="setting-password-alert setting-update-alert"></div>
        
		<?php if ($wo['setting']['user_id'] == $wo['user']['user_id']) { ?>
		<div class="wow_form_fields">
			<label for="current_password"><?php echo $wo['lang']['current_password']; ?></label>  
			<input id="current_password" name="current_password" type="password" class="form-control input-md">
		</div>
		<?php } ?>
		<div class="row">
			<div class="col-md-6">
				<div class="wow_form_fields">
					<label for="new_password"><?php echo $wo['lang']['new_password']; ?></label>
					<input id="new_password" name="new_password" type="password" class="form-control input-md">
					<?php if ($wo['config']['password_complexity_system'] == 1) { ?>
						<ul class="helper-text">
							<li class="length"><?php echo $wo['lang']['least_characters']; ?></li>
							<li class="lowercase"><?php echo $wo['lang']['contain_lowercase']; ?></li>
							<li class="uppercase"><?php echo $wo['lang']['contain_uppercase']; ?></li>
							<li class="special"><?php echo $wo['lang']['number_special']; ?></li>
						</ul>
					<?php } ?>
				</div>
			</div>
			<div class="col-md-6">
				<div class="wow_form_fields">
					<label for="repeat_new_password"><?php echo $wo['lang']['repeat_password']; ?></label>
					<input id="repeat_new_password" name="repeat_new_password" type="password" class="form-control input-md">
				</div>
			</div>
		</div>
		<hr>
		<div class="wow_form_fields">
			<label for="two_factor"><?php echo $wo['lang']['two_factor']; ?></label>  
			<select id="country" name="two_factor" class="form-control">
				<option value="1" <?php echo ($wo['setting']['two_factor'] == '1')   ? 'selected' : '';?> ><?php echo $wo['lang']['enable']; ?></option>
				<option value="0" <?php echo ($wo['setting']['two_factor'] == '0')   ? 'selected' : '';?> ><?php echo $wo['lang']['disable']; ?></option>
			</select>
		</div>
		
		<div class="text-center">
			<button type="submit" class="btn btn-main btn-mat btn-mat-raised add_wow_loader"><?php echo $wo['lang']['save']; ?></button>
		</div>

		<input type="hidden" name="user_id" value="<?php echo $wo['setting']['user_id'];?>">
        <input type="hidden" name="hash_id" value="<?php echo Wo_CreateSession();?>">
   </form>
</div>
<script type="text/javascript">
$(function() {
  $('form.setting-change-password-form').ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=update_user_password',
    beforeSend: function() {
    	<?php if ($wo['config']['password_complexity_system'] == 1) { ?>
    		if ($('.helper-text .length').hasClass('valid') && $('.helper-text .lowercase').hasClass('valid') && $('.helper-text .uppercase').hasClass('valid') && $('.helper-text .special').hasClass('valid')) {
	    		$('.wo_settings_page').find('.add_wow_loader').addClass('btn-loading');
	    	}
	    	else{
	    		$('.setting-password-alert').html("<div class='alert alert-danger'><?php echo($wo['lang']['complexity_requirements']) ?></div>");
	    		return false;
	    	}

        <?php } else{ ?>
        	$('.wo_settings_page').find('.add_wow_loader').addClass('btn-loading');
        <?php } ?>


      
    },
    success: function(data) {
      if (data.status == 200) {
        $('.setting-password-alert').html('<div class="alert alert-success">' + data.message + '</div>');
        $('.alert-success').fadeIn('fast', function() {
          $(this).delay(2500).slideUp(500, function() {
              $(this).remove();
          });
        });
        $('form.setting-change-password-form').clearForm();
      } else if (data.errors) {
        var errors = data.errors.join("<br>");
        $('.setting-password-alert').html('<div class="alert alert-danger">' + errors + '</div>');
        $('.alert-danger').fadeIn(300);
      }
      $('.wo_settings_page').find('.add_wow_loader').removeClass('btn-loading');
    }
  });
});

<?php if ($wo['config']['password_complexity_system'] == 1) { ?>

(function(){
	var helperText = {
		charLength: document.querySelector('.helper-text .length'),
		lowercase: document.querySelector('.helper-text .lowercase'),
		uppercase: document.querySelector('.helper-text .uppercase'),
		special: document.querySelector('.helper-text .special')
	};
	var password = document.querySelector('#new_password');
	
	
	
	var pattern = {
		charLength: function() {
			if( password.value.length >= 6 ) {
				return true;
			}
		},
		lowercase: function() {
			var regex = /^(?=.*[a-z]).+$/; // Lowercase character pattern

			if( regex.test(password.value) ) {
				return true;
			}
		},
		uppercase: function() {
			var regex = /^(?=.*[A-Z]).+$/; // Uppercase character pattern

			if( regex.test(password.value) ) {
				return true;
			}
		},
		special: function() {
			var regex = /^(?=.*[0-9_\W]).+$/; // Special character or number pattern

			if( regex.test(password.value) ) {
				return true;
			}
		}   
	};
	
	// Listen for keyup action on password field
  password.addEventListener('keyup', function (){
  	    $('.helper-text').slideDown('slow', function() {
  	    	
  	    });
		// Check that password is a minimum of 8 characters
		patternTest( pattern.charLength(), helperText.charLength );
		
		// Check that password contains a lowercase letter		
		patternTest( pattern.lowercase(), helperText.lowercase );
		
		// Check that password contains an uppercase letter
		patternTest( pattern.uppercase(), helperText.uppercase );
		
		// Check that password contains a number or special character
		patternTest( pattern.special(), helperText.special );
    
    // Check that all requirements are fulfilled
    if( hasClass(helperText.charLength, 'valid') &&
			  hasClass(helperText.lowercase, 'valid') && 
			 	hasClass(helperText.uppercase, 'valid') && 
			  hasClass(helperText.special, 'valid')
		) {
			addClass(password.parentElement, 'valid');
    }
    else {
      removeClass(password.parentElement, 'valid');
    }
	});
	
	function patternTest(pattern, response) {
		if(pattern) {
      addClass(response, 'valid');
    }
    else {
      removeClass(response, 'valid');
    }
	}
	
	function addClass(el, className) {
		if (el.classList) {
			el.classList.add(className);
		}
		else {
			el.className += ' ' + className;
		}
	}
	
	function removeClass(el, className) {
		if (el.classList)
				el.classList.remove(className);
			else
				el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
	}
	
	function hasClass(el, className) {
		if (el.classList) {
			console.log(el.classList);
			return el.classList.contains(className);	
		}
		else {
			new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);	
		}
	}
	
})();
<?php } ?>
</script>
<style type="text/css">
	 .helper-text {
	    display: none;
	    margin-top: 6px;
	    font-size: 12px;
	    line-height: 22px;
	    color: #808080;
	  }
	  li.valid {
      color: #1fd34a;
    }
</style>