<div class="page-margin mt-0">
	<div class="wow_content popular_posts_hdr">
		<h2><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.62012 6.19216C5.62012 6.60638 5.9559 6.94216 6.37012 6.94216C6.78433 6.94216 7.12012 6.60638 7.12012 6.19216H5.62012ZM6.37012 5.93976H5.62012H6.37012ZM13.6301 5.93976H12.8801H13.6301ZM12.8801 6.19216C12.8801 6.60638 13.2159 6.94216 13.6301 6.94216C14.0443 6.94216 14.3801 6.60638 14.3801 6.19216H12.8801ZM9.04323 2.61772L8.86123 1.89014L8.86123 1.89014L9.04323 2.61772ZM10.957 2.61772L11.139 1.89014L10.957 2.61772ZM7.12012 6.19216V5.93976H5.62012V6.19216H7.12012ZM12.8801 5.93976V6.19216H14.3801V5.93976H12.8801ZM9.22523 3.3453C9.7332 3.21823 10.267 3.21823 10.775 3.3453L11.139 1.89014C10.392 1.70329 9.60818 1.70329 8.86123 1.89014L9.22523 3.3453ZM14.3801 5.93976C14.3801 4.01442 13.0289 2.36288 11.139 1.89014L10.775 3.3453C12.0338 3.66019 12.8801 4.73967 12.8801 5.93976L14.3801 5.93976ZM7.12012 5.93976C7.12012 4.73967 7.96641 3.66019 9.22523 3.3453L8.86123 1.89014C6.97136 2.36288 5.62012 4.01441 5.62012 5.93976H7.12012Z" class="icon_main_fill"/><path d="M3.87726 14.1884L3.18255 14.471L3.18255 14.471L3.87726 14.1884ZM3.58808 9.49742L4.31206 9.69329L3.58808 9.49742ZM16.4113 9.49742L15.6873 9.69328L16.4113 9.49742ZM16.1221 14.1884L16.8168 14.471V14.471L16.1221 14.1884ZM11.6967 17.368L11.5808 16.627L11.6967 17.368ZM8.30261 17.368L8.4185 16.627H8.4185L8.30261 17.368ZM7.21317 6.33493L7.0637 5.59998L7.21317 6.33493ZM12.7862 6.33493L12.9357 5.59998L12.9357 5.59998L12.7862 6.33493ZM7.67867 17.2704L7.56277 18.0114L7.67867 17.2704ZM3.95466 14.3787L4.64937 14.096L4.64937 14.096L3.95466 14.3787ZM12.3207 17.2704L12.4366 18.0114H12.4366L12.3207 17.2704ZM16.0447 14.3787L15.35 14.0961L15.35 14.0961L16.0447 14.3787ZM13.0163 6.38173L12.8668 7.11668L12.8668 7.11668L13.0163 6.38173ZM6.98308 6.38173L7.13255 7.11668L6.98308 6.38173ZM7.13255 7.11668L7.36264 7.06989L7.0637 5.59998L6.83361 5.64677L7.13255 7.11668ZM12.6367 7.06989L12.8668 7.11668L13.1658 5.64678L12.9357 5.59998L12.6367 7.06989ZM12.2048 16.5294L11.5808 16.627L11.8126 18.109L12.4366 18.0114L12.2048 16.5294ZM8.4185 16.627L7.79456 16.5294L7.56277 18.0114L8.18671 18.109L8.4185 16.627ZM15.4274 13.9058L15.35 14.0961L16.7394 14.6613L16.8168 14.471L15.4274 13.9058ZM4.64937 14.096L4.57196 13.9058L3.18255 14.471L3.25995 14.6613L4.64937 14.096ZM4.57196 13.9058C4.02524 12.5619 3.93465 11.0883 4.31206 9.69329L2.86411 9.30155C2.40072 11.0143 2.51253 12.8241 3.18255 14.471L4.57196 13.9058ZM15.6873 9.69328C16.0647 11.0883 15.9741 12.5619 15.4274 13.9058L16.8168 14.471C17.4868 12.8241 17.5986 11.0143 17.1352 9.30155L15.6873 9.69328ZM11.5808 16.627C10.5336 16.7908 9.46567 16.7908 8.4185 16.627L8.18671 18.109C9.38748 18.2968 10.6118 18.2968 11.8126 18.109L11.5808 16.627ZM7.36264 7.06989C9.10131 6.71629 10.898 6.71629 12.6367 7.06989L12.9357 5.59998C10.9997 5.20626 8.99965 5.20626 7.0637 5.59998L7.36264 7.06989ZM7.79456 16.5294C6.35741 16.3046 5.16797 15.3708 4.64937 14.096L3.25995 14.6613C3.98506 16.4436 5.62745 17.7087 7.56277 18.0114L7.79456 16.5294ZM12.4366 18.0114C14.3719 17.7087 16.0143 16.4436 16.7394 14.6613L15.35 14.0961C14.8314 15.3708 13.6419 16.3046 12.2048 16.5294L12.4366 18.0114ZM12.8668 7.11668C14.2566 7.39932 15.3393 8.40696 15.6873 9.69328L17.1352 9.30155C16.6323 7.4425 15.0859 6.03728 13.1658 5.64677L12.8668 7.11668ZM6.83361 5.64677C4.9135 6.03728 3.36707 7.4425 2.86411 9.30155L4.31206 9.69329C4.66007 8.40696 5.74281 7.39932 7.13255 7.11668L6.83361 5.64677Z" fill="currentColor"/><path d="M10 11.25L10 12.9167" class="icon_main" stroke-width="1.5" stroke-linecap="round"/></svg>&nbsp;<?php echo $wo['lang']['change_password']; ?></h2>
	</div>
</div>

<div class="wo_settings_page wow_content">

	<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
  function CheckCPassword() {
		$('.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');
	    }
	}
  password.addEventListener('keyup', CheckCPassword);
  password.addEventListener('input', CheckCPassword);
	
	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>