diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/js/mod_new_channel.js | 96 | ||||
| -rwxr-xr-x | view/tpl/new_channel.tpl | 5 |
2 files changed, 73 insertions, 28 deletions
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> |