Notify and explain why the display name is truncated

lib/Vroom/I18N/en.pm

@@ -63,6 +63,7 @@ our %Lexicon = (
   "DISPLAY_NAME"                         => "Display name",
   "YOUR_NAME"                            => "Your name",
   "NAME_SENT_TO_OTHERS"                  => "This name will be sent to the other peers so they can identify you. You need to set your name before you can chat",
+  "DISPLAY_NAME_TOO_LONG"                => "This name is too long",
   "CHANGE_COLOR"                         => "Change your color",
   "CLICK_TO_CHAT"                        => "Click to access the chat",
   "PREVENT_TO_JOIN"                      => "Prevent other participants to join this room",

lib/Vroom/I18N/fr.pm

@@ -68,6 +68,7 @@ our %Lexicon = (
     "YOUR_NAME"                                 => "Votre nom",
     "NAME_SENT_TO_OTHERS"                       => "Ce nom sera envoyé aux autres participants pour qu'ils puissent vous identifier. " .
                                                    "Vous devez en saisir un avant de pouvoir utiliser le tchat",
+    "DISPLAY_NAME_TOO_LONG"                     => "Ce nom est trop long",
     "CHANGE_COLOR"                              => "Changez de couleur",
     "CLICK_TO_CHAT"                             => "Cliquez ici pour accéder au tchat",
     "PREVENT_TO_JOIN"                           => "Empêchez d'autres participants de rejoindre ce salon",

public/js/vroom.js

@@ -34,7 +34,8 @@ var locale = {
   CANT_SEND_TO_s: '',
   SCREEN_s: '',
   TO_INVITE_SHARE_THIS_URL: '',
-  NO_SOUND_DETECTED: ''
+  NO_SOUND_DETECTED: '',
+  DISPLAY_NAME_TOO_LONG: ''
 };
 
 // Localize the strings we need
@@ -608,8 +609,13 @@ function initVroom(room) {
   $('#displayName').on('input', function() {
     var name = $('#displayName').val();
     if (name.length > 50){
+      $('#displayName').parent().addClass('has-error');
+      $('#displayName').notify(locale.DISPLAY_NAME_TOO_LONG, 'error');
       return;
     }
+    else{
+      $('#displayName').parent().removeClass('has-error');
+    }
     // Enable chat input when you set your disaplay name
     if (name != '' && $('#chatBox').attr('disabled')){
       $('#chatBox').removeAttr('disabled');