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,11 +1568,11 @@
     -ms-transform: rotate(359deg);
   }
 }
-@keyframes spin {
+@keyframes um-faicon-spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(359deg);
   }
-}
+}

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

@@ -1,24 +1,24 @@
 <?php
-	
+
 	/***
 	***	@fallback for ajax urls
 	***/
 	add_action('wp_head','ultimatemember_ajax_urls');
 	add_action('admin_head','ultimatemember_ajax_urls');
 	function ultimatemember_ajax_urls() { ?>
-		
+
 		<script type="text/javascript">
-		
+
 		var ultimatemember_image_upload_url = '<?php echo um_url . 'core/lib/upload/um-image-upload.php'; ?>';
 		var ultimatemember_file_upload_url = '<?php echo um_url . 'core/lib/upload/um-file-upload.php'; ?>';
 		var ultimatemember_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
-		
+
 		</script>
-		
+
 	<?php
 
 	}
-	
+
 	/***
 	***	@remove any file silently
 	***/
@@ -29,7 +29,7 @@
 		extract($_REQUEST);
 		$ultimatemember->files->delete_file( $src );
 	}
-	
+
 	/***
 	***	@remove profile photo silently
 	***/
@@ -38,13 +38,13 @@
 	function ultimatemember_delete_profile_photo(){
 		global $ultimatemember;
 		extract($_REQUEST);
-		
+
 		if ( !um_current_user_can('edit', $user_id ) ) die( __('You can not edit this user') );
 
 		$ultimatemember->files->delete_core_user_photo( $user_id, 'profile_photo' );
 
 	}
-	
+
 	/***
 	***	@remove cover photo silently
 	***/
@@ -53,13 +53,13 @@
 	function ultimatemember_delete_cover_photo(){
 		global $ultimatemember;
 		extract($_REQUEST);
-		
+
 		if ( !um_current_user_can('edit', $user_id ) ) die( __('You can not edit this user') );
 
 		$ultimatemember->files->delete_core_user_photo( $user_id, 'cover_photo' );
 
 	}
-		
+
 	/***
 	***	@resampling/crop images
 	***/
@@ -68,35 +68,35 @@
 	function ultimatemember_resize_image(){
 		global $ultimatemember;
 		$output = 0;
-		
+
 		extract($_REQUEST);
-		
+
 		if ( !isset($src) || !isset($coord) ) die( __('Invalid parameters') );
-		
+
 		$coord_n = substr_count($coord, ",");
 		if ( $coord_n != 3 ) die( __('Invalid coordinates') );
-		
+
 		$um_is_temp_image = um_is_temp_image( $src );
 		if ( !$um_is_temp_image ) die( __('Invalid Image file') );
-		
+
 		$crop = explode(',', $coord );
 		$crop = array_map('intval', $crop);
-		
+
 		$uri = $ultimatemember->files->resize_image( $um_is_temp_image, $crop );
 
 		// If you're updating a user
 		if ( isset( $user_id ) && $user_id > 0 ) {
 			$uri = $ultimatemember->files->new_user_upload( $user_id, $um_is_temp_image, $key );
 		}
-		
+
 		$output = $uri;
-		
+
 		delete_option( "um_cache_userdata_{$user_id}" );
-		
+
 		if(is_array($output)){ print_r($output); }else{ echo $output; } die;
 
 	}
-	
+
 	/***
 	***	@run an ajax action on the fly
 	***/
@@ -105,9 +105,9 @@
 	function ultimatemember_muted_action(){
 		global $ultimatemember;
 		extract($_REQUEST);
-		
+
 		if ( !um_current_user_can('edit', $user_id ) ) die( __('You can not edit this user') );
-		
+
 		switch( $hook ) {
 			default:
 				do_action("um_run_ajax_function__{$hook}", $_REQUEST);
@@ -115,7 +115,7 @@
 		}
 
 	}
-	
+
 	/***
 	***	@run an ajax pagination on the fly
 	***/
@@ -124,14 +124,33 @@
 	function ultimatemember_ajax_paginate(){
 		global $ultimatemember;
 		extract($_REQUEST);
-		
+
 		ob_start();
-		
+
 		do_action("um_ajax_load_posts__{$hook}", $args);
-		
+
 		$output = ob_get_contents();
 		ob_end_clean();
-		
+
 		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();
+	}

core/um-fields.php

@@ -934,7 +934,7 @@ class UM_Fields {
 		}
 
 		$type = apply_filters("um_hook_for_field_{$type}", $type );
-		
+
 		/* Begin by field type */
 		switch( $type ) {
 
@@ -2109,7 +2109,7 @@ class UM_Fields {
 						}
 
 						$res = stripslashes( $this->field_value( $key, $default, $data ) );
-						
+
 						$res = apply_filters("um_view_field_value_{$type}", $res, $data );
 
 						$output .= '<div class="um-field-area">';
@@ -2275,7 +2275,7 @@ class UM_Fields {
 
 									$output .= $this->view_field( $key, $data );
 
-									
+
 								}
 							}
 							$output .= '</div>';