Add dynamic input fields for email notifications in the new config menu

lib/Vroom/I18N/en.pm

@@ -139,8 +139,7 @@ our %Lexicon = (
   "ADD_NOTIFICATION"                     => "Add a notification",
   "ADD_THIS_ADDRESS"                     => "Add this address",
   "REMOVE_THIS_ADDRESS"                  => "Remove this address",
-  "NOTIFICATION_ON_JOIN"                 => "You can set a list of email address which will receive a notification each time " .
-                                            "someone joins this room",
+  "NOTIFICATION_ON_JOIN"                 => "Email addresses to notify when someone joins this room",
   "s_WILL_BE_NOTIFIED"                   => "%s will receive a notification each time someone joins this room",
   "s_WONT_BE_NOTIFIED_ANYMORE"           => "%s won't be notified anymore",
   "s_JOINED_ROOM_s"                      => "%s joined room %s",

lib/Vroom/I18N/fr.pm

@@ -146,7 +146,7 @@ our %Lexicon = (
     "ADD_NOTIFICATION"                          => "Ajouter une notification",
     "ADD_THIS_ADDRESS"                          => "Ajouter cette adresse",
     "REMOVE_THIS_ADDRESS"                       => "Supprimer cette adresse",
-    "NOTIFICATION_ON_JOIN"                      => "Ajouter des adresses email qui recevront une notification dès que quelqu'un rejoint ce salon",
+    "NOTIFICATION_ON_JOIN"                      => "Email à notifier lorsque quelqu'un rejoint ce salon",
     "s_WILL_BE_NOTIFIED"                        => "%s recevra une notification à chaque fois qu'une personne rejoint ce salon",
     "s_WONT_BE_NOTIFIED_ANYMORE"                => "%s ne recevra plus les notifications pour ce salon",
     "s_JOINED_ROOM_s"                           => "%s a rejoint le salon %s",

public/js/vroom.js

@@ -2028,6 +2028,23 @@ function initVroom(room) {
       $('#ownerPassFields').hide(200);
     }
   });
+  // Add emails input fields
+  $(document).on('click','button.btn-add-email',function(e){
+    e.preventDefault();
+    var parentEl = $('.email-list'),
+        currentEntry = $(this).parents('.email-entry:first'),
+        newEntry = $(currentEntry.clone()).appendTo(parentEl);
+    // Clear the value of the new input field
+    newEntry.find('input').val('');
+    parentEl.find('.email-entry:not(:last) .btn-add-email')
+      .removeClass('btn-primary').removeClass('btn-add-email')
+      .addClass('btn-danger').addClass('btn-remove-email')
+      .html('<span class="glyphicon glyphicon-minus"></span>');
+  });
+  $(document).on('click','button.btn-remove-email',function(e){
+    e.preventDefault();
+    $(this).parents('.email-entry:first').remove();
+  });
 
   $('#ownerPassButton').change(function(){
     var action = ($(this).is(':checked')) ? 'set':'unset';

templates/default/configure_modal.html.ep

@@ -72,6 +72,22 @@
                 </div>
               </div>
               <div class="form-group">
+                <label class="col-sm-4 control-label" for="emailNotifications">
+                  <%=l 'NOTIFICATION_ON_JOIN' %>
+                </label>
+                <div class="col-sm-8 email-list">
+                  <div class="email-entry input-group col-sm-8">
+                    <input class="form-control" autocomplete="off" name="emails[]" type="text" placeholder="<%=l 'EMAIL_PLACEHOLDER' %>" />
+                    <span class="input-group-btn">
+                      <button class="btn btn-primary btn-add-email" type="button">
+                        <span class="glyphicon glyphicon-plus">
+                        </span>
+                      </button>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group">
                 <div class="col-sm-offset-4 col-sm-8">
                   <button type="submit" class="btn btn-primary">
                     <%=l 'SUBMIT' %>