subscriptions: Confirm inviting 100+ users to a new stream.

Our current workflow for creating a new stream allows the user to
invite as many other users as they like but since there can be
mistakes in doing so, we now open a modal with a warning if the
number of invites are more than 100 just to confirm that user indeed
wanted to do this.

Fixes: #1663.

frontend_tests/node_tests/templates.js

@@ -933,6 +933,14 @@ function render(template_name, args) {
     assert.equal($(html).find(".stream-privacy").children("*").attr("class"), "hashtag");
 }());
 
+(function subscription_invites_warning_modal() {
+    var html = render('subscription_invites_warning_modal');
+
+    global.write_handlebars_output("subscription_invites_warning_modal", html);
+
+    var button = $(html).find(".close-invites-warning-modal").last();
+    assert.equal(button.text(), 'Oops! Let me change it');
+}());
 
 (function subscription_settings() {
     var sub = {

static/js/stream_create.js

@@ -164,6 +164,14 @@ function create_stream() {
         announce
     );
 }
+
+function show_large_invites_warning(count) {
+    var invites_warning_modal = templates.render('subscription_invites_warning_modal');
+    $('#stream-creation').append(invites_warning_modal);
+    var confirm_button = $('#invites-warning-overlay').find('.confirm-invites-warning-modal');
+    confirm_button.text(i18n.t('Invite __count__ users!', {count: count}));
+}
+
 exports.new_stream_clicked = function (stream) {
     // this changes the tab switcher (settings/preview) which isn't necessary
     // to a add new stream title.
@@ -313,13 +321,27 @@ $(function () {
     $(".subscriptions").on("submit", "#stream_creation_form", function (e) {
         e.preventDefault();
         var stream = $.trim($("#create_stream_name").val());
-
         var name_ok = stream_name_error.validate_for_submit(stream);
 
         if (!name_ok) {
             return;
         }
+
+        var principals = get_principals();
+        if (principals.length > 100) {
+            show_large_invites_warning(principals.length);
+        } else {
             create_stream();
+        }
+    });
+
+    $(document).on("click", ".close-invites-warning-modal", function () {
+        $("#invites-warning-overlay").remove();
+    });
+
+    $(document).on("click", ".confirm-invites-warning-modal", function () {
+        create_stream();
+        $("#invites-warning-overlay").remove();
     });
 
     $(".subscriptions").on("input", "#create_stream_name", function () {

static/styles/subscriptions.css

@@ -1026,3 +1026,7 @@ form#add_new_subscription {
         -webkit-overflow-scrolling: touch;
     }
 }
+
+#stream-creation #invites-warning-modal .modal-footer {
+    position: static;
+}

static/templates/subscription_invites_warning_modal.handlebars

@@ -0,0 +1,15 @@
+<div id='invites-warning-overlay' class='overlay new-style show' style='z-index:1000;'>
+    <div class="modal" id="invites-warning-modal" tabindex="-1" role="dialog" aria-labelledby="invites-warning-label" aria-hidden="true">
+        <div class="modal-header">
+            <button type="button" class="close close-invites-warning-modal" aria-hidden="true">×</button>
+            <h3 id="invites-warning-label">{{t "Confirm invites" }}</h3>
+        </div>
+        <div class="modal-body">
+            <p>{{t 'You are going to invite a large numbers of users! Are you sure?' }}</p>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-default close-invites-warning-modal" aria-hidden="true">{{t "Oops! Let me change it" }}</button>
+            <button class="btn btn-warning confirm-invites-warning-modal"></button>
+        </div>
+    </div>
+</div>