stream_creation: Add a clear error message for duplicate streams.

User is now unable to create a stream with duplicate or empty name
through the create stream modal. An appropriate error message appears
on attempt.

frontend_tests/casper_tests/05-subscriptions.js

@@ -66,7 +66,8 @@ casper.waitFor(function () {
     });
 });
 casper.then(function () {
-    casper.test.assertSelectorHasText('.subscription_name', 'Waseemio', 'Subscribing to a stream');
+    casper.test.info("User should be subscribed to stream Waseemio");
+    casper.test.assertSelectorHasText('.subscription_name', 'Waseemio');
     casper.fill('form#add_new_subscription', {stream_name: 'WASeemio'});
     casper.click('form#add_new_subscription input.btn');
 });
@@ -74,19 +75,23 @@ casper.waitForText('Already subscribed', function () {
     casper.test.assertTextExists('Already subscribed', "Can't subscribe twice to a stream");
     casper.fill('form#add_new_subscription', {stream_name: '  '});
     casper.click('form#add_new_subscription input.btn');
-});
-casper.waitForText('Create stream', function () {
-    casper.test.assertTextExists('Create stream', 'Modal for specifying new stream users');
     casper.fill('form#stream_creation_form', {stream_name: '  '});
     casper.click('form#stream_creation_form button.btn.btn-primary');
 });
-casper.waitForText('Error creating stream', function () {
+casper.waitForText('A stream needs to have a name', function () {
-    casper.test.assertTextExists('Invalid stream name', "Can't create a stream without a name");
+    casper.test.assertTextExists('A stream needs to have a name', "Can't create a stream with an empty name");
+    casper.click('form#stream_creation_form button.btn.btn-default');
+    casper.fill('form#add_new_subscription', {stream_name: '  '});
+    casper.click('form#add_new_subscription input.btn');
+    casper.fill('form#stream_creation_form', {stream_name: 'Waseemio'});
+    casper.click('form#stream_creation_form button.btn.btn-primary');
 });
-casper.then(function () {
+casper.waitForText('A stream with this name already exists', function () {
+    casper.test.assertTextExists('A stream with this name already exists', "Can't create a stream with a duplicate name");
     casper.test.info('Streams should be filtered when typing in the create box');
+    casper.click('form#stream_creation_form button.btn.btn-default');
 });
-casper.then(function () {
+casper.waitForText('Filter by stream name', function () {
     casper.test.assertSelectorHasText('.subscription_row .subscription_name', 'Verona', 'Verona stream exists before filtering');
     casper.test.assertSelectorDoesntHaveText('.subscription_row.notdisplayed .subscription_name', 'Verona', 'Verona stream shown before filtering');
 });
@@ -97,7 +102,7 @@ casper.then(function () {
         .trigger($.Event('input'));
     });
 });
-casper.then(function () {
+casper.waitForSelectorTextChange('form#add_new_subscription', function () {
     casper.test.assertSelectorHasText('.subscription_row.notdisplayed .subscription_name', 'Verona', 'Verona stream not shown after filtering');
     casper.test.assertSelectorHasText('.subscription_row .subscription_name', 'Waseemio', 'Waseemio stream exists after filtering');
     casper.test.assertSelectorDoesntHaveText('.subscription_row.notdisplayed .subscription_name', 'Waseemio', 'Waseemio stream shown after filtering');

static/js/subs.js

@@ -717,6 +717,8 @@ function show_new_stream_modal() {
     $('#announce-new-stream input').prop('disabled', false);
     $('#announce-new-stream input').prop('checked', true);
 
+    $("#stream_name_error").hide();
+
     $('#stream-creation').modal("show");
 }
 
@@ -783,6 +785,7 @@ $(function () {
         if (stream_status === "does-not-exist" || !stream) {
             $('#create_stream_name').val(stream);
             show_new_stream_modal();
+            $('#create_stream_name').focus();
         } else {
             ajaxSubscribe(stream);
         }
@@ -858,9 +861,24 @@ $(function () {
         e.stopPropagation();
     });
 
+    $("#create_stream_name").on("focusout", function () {
+        var stream = $.trim($("#create_stream_name").val());
+        var stream_status = compose.check_stream_existence(stream);
+        if (stream.length < 1) {
+            $("#stream_name_error").text(i18n.t("A stream needs to have a name"));
+            $("#stream_name_error").show();
+        } else if (stream_status !== "does-not-exist") {
+            $("#stream_name_error").text(i18n.t("A stream with this name already exists"));
+            $("#stream_name_error").show();
+        } else {
+            $("#stream_name_error").hide();
+        }
+    });
+
     $("#stream_creation_form").on("submit", function (e) {
         e.preventDefault();
         var stream = $.trim($("#create_stream_name").val());
+        if (!$("#stream_name_error").is(":visible")) {
             var principals = _.map(
                 $("#stream_creation_form input:checkbox[name=user]:checked"),
                 function (elem) {
@@ -874,6 +892,7 @@ $(function () {
                 $('#stream_creation_form input[name=privacy]:checked').val() === "invite-only",
                 $('#announce-new-stream input').prop('checked')
             );
+        }
     });
 
     $("body").on("mouseover", ".subscribed-button", function (e) {

static/styles/zulip.css

@@ -2945,6 +2945,12 @@ form#add_new_subscription {
     margin-right: 38px;
 }
 
+#stream_name_error {
+    display: none;
+    margin-left: 2px;
+    color: #FF0000;
+}
+
 .sub_settings_title {
     line-height: 30px;
     margin: 10px 0;

templates/zerver/stream_creation_prompt.html

@@ -10,6 +10,7 @@
             <b>{% trans %}Stream name{% endtrans %}</b><br />
             <input type="text" name="stream_name" id="create_stream_name"
                  placeholder="{{ _('Stream name') }}" value="" autocomplete="off" />
+            <div id="stream_name_error"></div>
           </div>
           <div id="make-invite-only">
             <b>{% trans %}Stream accessibility{% endtrans %}</b><br />