an attempt to fix the new_channel validation situation

3 files changed, 80 insertions, 32 deletions

diff --git a/Zotlabs/Module/New_channel.php b/Zotlabs/Module/New_channel.php
index df7da2fe8..c946961bc 100644
--- a/Zotlabs/Module/New_channel.php
+++ b/Zotlabs/Module/New_channel.php
@@ -137,16 +137,19 @@ class New_channel extends \Zotlabs\Web\Controller {
 			}
 		}
 
-		$name_help = (($default_role) 
+		$name_help = '<span id="name_help_loading" style="display:none">' . t('Loading') . '</span><span id="name_help_text">';
+		$name_help .= (($default_role) 
 			? t('Your real name is recommended.')
 			: t('Examples: "Bob Jameson", "Lisa and her Horses", "Soccer", "Aviation Group"')
-		); 	
-
-		$nick_help = t('This will be used to create a unique network address (like an email address).');
+		);
+		$name_help .= '</span>';
 
+		$nick_help = '<span id="nick_help_loading" style="display:none">' . t('Loading') . '</span><span id="nick_help_text">';
+		$nick_help .= t('This will be used to create a unique network address (like an email address).');
 		if(! get_config('system','unicode_usernames')) {
 			$nick_help .= ' ' . t('Allowed characters are a-z 0-9, - and _');
 		}
+		$nick_help .= '<span>';
 
 		$privacy_role = ((x($_REQUEST,'permissions_role')) ? $_REQUEST['permissions_role'] :  "" );
 
diff --git a/view/js/mod_new_channel.js b/view/js/mod_new_channel.js
index e78de2596..889911d49 100644
--- a/view/js/mod_new_channel.js
+++ b/view/js/mod_new_channel.js
@@ -1,43 +1,91 @@
 	$(document).ready(function() {
-
-		$("#newchannel-submit-button").attr('disabled','disabled');
+		$("#id_name").focus();
 
 		$("#id_name").blur(function() {
-			$("#name-spinner").show();
-			var zreg_name = $("#id_name").val();
-			$.get("new_channel/autofill.json?f=&name=" + encodeURIComponent(zreg_name),function(data) {
-				$("#id_nickname").val(data);
-				if(data.error) {
-					$("#help_name").html("");
-					zFormError("#help_name",data.error);
-				}
-				else {
-					$("#newchannel-submit-button").removeAttr('disabled');
-				}
-				$("#name-spinner").hide();
-			});
+			if(validate_name()) {
+				var zreg_name = $("#id_name").val();
+				$("#name_help_loading").show();
+				$("#name_help_text").hide();
+				$.get("new_channel/autofill.json?f=&name=" + encodeURIComponent(zreg_name),function(data) {
+					$("#id_nickname").val(data);
+					$("#id_nickname").addClass('is-validated');
+					$("#name_help_loading").hide();
+					$("#name_help_text").show();
+				});
+			}
 		});
 
-		$("#id_nickname").click(function() {
-			$("#newchannel-submit-button").attr('disabled','disabled');
+		$("#id_nickname").on('input', function() {
+			$("#id_nickname").removeClass('is-validated');
 		});
 
-	});
+		$("#newchannel-form").on('submit', function(event) {
+			if(! validate_name()) {
+				$("#id_name").focus()
+				return false;
+			}
+
+			if(! validate_channel()) {
+				$("#id_nickname").focus()
+				return false;
+			}
+
+			if(! $("#id_nickname").hasClass('is-validated')) {
+				event.preventDefault();
+			}
+			else {
+				event.preventDefault();
+				console.log('channel created');
+			}
+		});
 
+	});
 
 	function validate_channel() {
-		$("#nick-spinner").show();
+		if($("#id_nickname").hasClass('is-validated'))
+			return true;
+
+		$("#nick_help_loading").show();
+		$("#nick_help_text").hide();
 		var zreg_nick = $("#id_nickname").val();
 		$.get("new_channel/checkaddr.json?f=&nick=" + encodeURIComponent(zreg_nick),function(data) {
 			$("#id_nickname").val(data);
-			if(data.error) {
-				$("#help_nickname").html("");
-				zFormError("#help_nickname",data.error);
+			if(data !== zreg_nick) {
+				$("#id_nickname").addClass('is-validated');
+				$("#help_nickname").addClass('text-danger').removeClass('text-muted');
+				$("#help_nickname").html('Your chosen nickname was either already taken or not valid. Please use our suggestion (' + data + ') or enter a new one.');
+				$("#id_nickname").focus();
 			}
 			else {
-				$("#newchannel-submit-button").removeAttr('disabled');
+				$("#id_nickname").addClass('is-validated');
+				$("#help_nickname").addClass('text-success').removeClass('text-muted').removeClass('text-danger');
+				$("#help_nickname").html("Thank you, this nickname is valid.");
 			}
-			$("#nick-spinner").hide();
+			$("#nick_help_loading").hide();
+			$("#nick_help_text").show();
+
 		});
+		return true;
+
+	}
+
+	function validate_name() {
+		if($("#id_name").hasClass('is-validated'))
+			return true;
+
+		var verbs = ['lovely', 'wonderful', 'gorgeous', 'great'];
+		var verb = verbs[Math.floor((Math.random() * 4) + 0)];
 
+		if(! $("#id_name").val()) {
+			$("#id_name").focus();
+			$("#help_name").addClass('text-danger').removeClass('text-muted');
+			$("#help_name").html("A channel name is required.");
+			return false;
+		}
+		else {
+			$("#help_name").addClass('text-success').removeClass('text-muted').removeClass('text-danger');
+			$("#help_name").html('This is a ' + verb + ' channel name.');
+			$("#id_name").addClass('is-validated');
+			return true;
+		}
 	}
diff --git a/view/tpl/new_channel.tpl b/view/tpl/new_channel.tpl
index a89208228..51880e1f6 100755
--- a/view/tpl/new_channel.tpl
+++ b/view/tpl/new_channel.tpl
@@ -21,14 +21,11 @@
 			{{/if}}
 
 			{{include file="field_input.tpl" field=$name}}
-			<div id="name-spinner" class="spinner-wrapper"><div class="spinner m"></div></div>
 
 			{{include file="field_input.tpl" field=$nickname}}
-			<div id="nick-spinner" class="spinner-wrapper"><div class="spinner m"></div></div>
+			<button class="btn btn-primary" type="submit" id="newchannel-submit-button">{{$submit}}</button>
 
-			<button class="btn btn-secondary" name="validate" id="newchannel-validate-button" value="{{$validate}}" onclick="validate_channel(); return false;">{{$validate}}</button>
 
-			<button class="btn btn-primary" type="submit" name="submit" id="newchannel-submit-button" value="{{$submit}}" >{{$submit}}</button>
 			<div id="newchannel-submit-end" class="clear"></div>
 
 			<div id="newchannel-import-link" class="descriptive-paragraph" >{{$label_import}}</div>