alert settings: Move alert words addition form separately.

Now, the system uses word='' and an editing=True for rendering an
form for addition of alert words. This is a very vulnerable
way to implement said feature and this commit fixes that.
The addition form has been moved to alert_word_settings.hbs
thereby rendering it only once but always. Now, we do not have
to manually add an empty word and editing for the form to be
rendered.
As part of refactoring, the editing parameter has also been
removed as there is no purpose left.

frontend_tests/node_tests/alert_words_ui.js

@@ -30,7 +30,6 @@ run_test('render_alert_words_ui', () => {
     alert_words_ui.render_alert_words_ui();
 
     assert.deepEqual(appended, [
-        'stub-',
         'stub-bar',
         'stub-foo',
     ]);
@@ -42,8 +41,8 @@ run_test('add_alert_word', () => {
 
     alert_words_ui.set_up_alert_words();
 
-    const word_list = $('#alert_words_list');
-    const add_func = word_list.get_on_handler('click', '#create_alert_word_button');
+    const create_form = $('#create_alert_word_form');
+    const add_func = create_form.get_on_handler('click', '#create_alert_word_button');
 
     const new_alert_word = $('#create_alert_word_name');
     const alert_word_status = $('#alert_word_status');
@@ -93,8 +92,8 @@ run_test('add_alert_word', () => {
 });
 
 run_test('add_alert_word_keypress', () => {
-    const word_list = $('#alert_words_list');
-    const keypress_func = word_list.get_on_handler('keypress', '#create_alert_word_name');
+    const create_form = $('#create_alert_word_form');
+    const keypress_func = create_form.get_on_handler('keypress', '#create_alert_word_name');
 
     const new_alert_word = $('#create_alert_word_name');
     new_alert_word.val('zot');

static/js/alert_words_ui.js

@@ -7,16 +7,9 @@ exports.render_alert_words_ui = function () {
 
     word_list.find('.alert-word-item').remove();
 
-    const new_alert_word_form = render_alert_word_settings_item({
-        word: '',
-        editing: true,
-    });
-    word_list.append(new_alert_word_form);
-
     for (const alert_word of words) {
         const rendered_alert_word = render_alert_word_settings_item({
             word: alert_word,
-            editing: false,
         });
         word_list.append(rendered_alert_word);
     }
@@ -54,6 +47,7 @@ function add_alert_word(alert_word) {
         success: function () {
             const message = "Alert word \"" + words_to_be_added + "\" added successfully!";
             update_alert_word_status(i18n.t(message), false);
+            $('#create_alert_word_name').val('');
         },
         error: function () {
             update_alert_word_status(i18n.t("Error adding alert word!"), true);
@@ -81,7 +75,7 @@ exports.set_up_alert_words = function () {
 
     exports.render_alert_words_ui();
 
-    $('#alert_words_list').on('click', '#create_alert_word_button', function () {
+    $('#create_alert_word_form').on('click', '#create_alert_word_button', function () {
         const word = $('#create_alert_word_name').val();
         add_alert_word(word);
     });
@@ -91,7 +85,7 @@ exports.set_up_alert_words = function () {
         remove_alert_word(word);
     });
 
-    $('#alert_words_list').on('keypress', '#create_alert_word_name', function (event) {
+    $('#create_alert_word_form').on('keypress', '#create_alert_word_name', function (event) {
         const key = event.which;
         // Handle enter (13) as "add".
         if (key === 13) {

static/templates/alert_word_settings_item.hbs

@@ -1,24 +1,5 @@
 {{! Alert word in the settings page that can be removed }}
 <li class="alert-word-item" data-word='{{word}}'>
-    {{#if editing}}
-    <form id="create_alert_word_form" class="form-horizontal">
-        <div class="add-new-alert-word-box grey-box">
-            <div class="new-alert-word-form">
-                <h4 class="new-alert-word-section-title settings-section-title no-padding">{{t "Add a new alert word"}}</h4>
-                <div class="new-alert-word-form">
-                    <div class="input-group">
-                        <label for="create_alert_word_name">{{t "New alert word" }}</label>
-                        <input type="text" name="alert_word_name" id="create_alert_word_name" class="required"
-                          maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
-                    </div>
-                    <button class="button rounded sea-green add-alert-word" id="create_alert_word_button" type="button">
-                        {{t 'Add alert word'}}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </form>
-    {{else}}
     <div class="alert-word-information-box grey-box">
         <div class="alert_word_listing">
             <span class="value">{{word}}</span>
@@ -29,5 +10,4 @@
             </button>
         </div>
     </div>
-    {{/if}}
 </li>

static/templates/settings/alert_word_settings.hbs

@@ -10,5 +10,22 @@
         </button>
         <span class="alert_word_status_text"></span>
     </div>
+    <form id="create_alert_word_form" class="form-horizontal">
+        <div class="add-new-alert-word-box grey-box">
+            <div class="new-alert-word-form">
+                <h4 class="new-alert-word-section-title settings-section-title no-padding">{{t "Add a new alert word"}}</h4>
+                <div class="new-alert-word-form">
+                    <div class="input-group">
+                        <label for="create_alert_word_name">{{t "New alert word" }}</label>
+                        <input type="text" name="alert_word_name" id="create_alert_word_name" class="required"
+                          maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
+                    </div>
+                    <button class="button rounded sea-green add-alert-word" id="create_alert_word_button" type="button">
+                        {{t 'Add alert word'}}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </form>
     <ul id="alert_words_list"></ul>
 </div>