Validate username exists on keypress

assets/css/um-fonticons-fa.css

@@ -784,6 +784,10 @@
 .um-faicon-spinner:before {
   content: "\f110";
 }
+.um-faicon-spin {
+  -webkit-animation: um-faicon-spin 2s infinite linear;
+  animation: um-faicon-spin 2s infinite linear;
+}
 .um-faicon-circle:before {
   content: "\f111";
 }
@@ -1532,7 +1536,7 @@
   content: "\f20c";
 }
 
-@-moz-keyframes spin {
+@-moz-keyframes um-faicon-spin {
   0% {
     -moz-transform: rotate(0deg);
   }
@@ -1540,7 +1544,7 @@
     -moz-transform: rotate(359deg);
   }
 }
-@-webkit-keyframes spin {
+@-webkit-keyframes um-faicon-spin {
   0% {
     -webkit-transform: rotate(0deg);
   }
@@ -1548,7 +1552,7 @@
     -webkit-transform: rotate(359deg);
   }
 }
-@-o-keyframes spin {
+@-o-keyframes um-faicon-spin {
   0% {
     -o-transform: rotate(0deg);
   }
@@ -1556,7 +1560,7 @@
     -o-transform: rotate(359deg);
   }
 }
-@-ms-keyframes spin {
+@-ms-keyframes um-faicon-spin {
   0% {
     -ms-transform: rotate(0deg);
   }
@@ -1564,7 +1568,7 @@
     -ms-transform: rotate(359deg);
   }
 }
-@keyframes spin {
+@keyframes um-faicon-spin {
   0% {
     transform: rotate(0deg);
   }

assets/css/um-styles.css

@@ -753,6 +753,15 @@ small.um-max-filesize span{
 }
 
 .um-form .um-field .um-field-area input.um-form-field.um-validate-not-matched,
-.um-form .um-field .um-field-area input.um-form-field.um-validate-not-matched:focus {
+.um-form .um-field .um-field-area input.um-form-field.um-validate-not-matched:focus,
+.um-form .um-field .um-field-area input.um-form-field.um-validate-username-exists,
+.um-form .um-field .um-field-area input.um-form-field.um-validate-username-exists:focus {
 	border-color: #DB2929 !important;
 }
+
+.um-form .um-field .um-field-area input.um-searching-username {
+	background-image: url('../img/loading.gif');
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-size: 24px 24px;
+}

assets/js/um-functions.js

@@ -211,11 +211,69 @@ function UM_check_password_matched() {
 		}
 	});
 }
+
+var xhrValidateUsername = false;
+function UM_check_username() {
+	jQuery(document).on('input[data-key=user_login]').on('keyup', function() {
+		var field = jQuery('input[data-key=user_login]');
+		var value = field.val();
+
+		if(field.parents('.um-field').find('.um-field-error').length) {
+			var error = field.parents('.um-field').find('.um-field-error');
+		} else {
+			var error = jQuery('<div class="um-field-error"><span class="um-field-arrow"><i class="um-faicon-caret-up"></i></span>Your username is already taken</div>');
+		}
+
+		// abort previous xhr request
+		if(xhrValidateUsername) {
+			xhrValidateUsername.abort();
+		}
+
+		if(!value) {
+			field.removeClass('um-searching-username');
+
+			return;
+		}
+
+		field.addClass('um-searching-username');
+
+		xhrValidateUsername = jQuery.ajax({
+			url  : um_scripts.ajaxurl,
+			type : 'post',
+			data : {
+				action   : 'ultimatemember_check_username_exists',
+				username : value
+			},
+			complete: function(){
+				field.removeClass('um-searching-username');
+			},
+			success: function(exists){
+				if(parseInt(exists) > 0) {
+					field.removeClass('um-validate-username-unique').addClass('um-validate-username-exists');
+
+					if(!field.parents('.um-field').find('.um-field-error').length) {
+						field.parents('.um-field').append(error);
+					}
+
+					error.show();
+				} else {
+					field.removeClass('um-validate-username-exists').addClass('um-validate-username-unique');
+					error.hide();
+				}
+			}
+		});
+	});
+}
+
 jQuery(document).ready(function(){
 	if(jQuery('input[data-key=user_password],input[data-key=confirm_user_password]').length == 2) {
 		UM_check_password_matched();
 	}
-})
+
+	if(jQuery('input[data-key=user_login]').length) {
+		UM_check_username();
+	}
+});
 
 function UM_hide_menus() {
 

core/um-actions-ajax.php

@@ -135,3 +135,22 @@
 		die($output);
 
 	}
+
+	/***
+	***	@run check if username exists
+	***/
+	add_action('wp_ajax_nopriv_ultimatemember_check_username_exists', 'ultimatemember_check_username_exists');
+	add_action('wp_ajax_ultimatemember_check_username_exists', 'ultimatemember_check_username_exists');
+	function ultimatemember_check_username_exists() {
+		$username = isset($_REQUEST['username']) ? $_REQUEST['username'] : '';
+		$exists   = username_exists( $username );
+		$exists   = apply_filters( 'um_validate_username_exists', $exists, $username );
+
+		if( $exists ) {
+			echo 1;
+		} else {
+			echo 0;
+		}
+
+		die();
+	}