Update room creation

Uses JS now to submit so it can fail gracefuly on error, and warn if room already eists, instead of redirecting to the ugly error page
Fix #52

lib/Vroom/I18N/en.pm

@@ -52,6 +52,9 @@ our %Lexicon = (
   "CREATE_ROOM"                          => "Create a new room",
   "ROOM_NAME"                            => "Room name",
   "RANDOM_IF_EMPTY"                      => "If you let this field empty, a random name will be given to the room",
+  "THIS_ROOM_ALREADY_EXISTS"             => "This room already exists",
+  "CONFIRM_OR_CHOOSE_ANOTHER_NAME"       => "Do you want to join it or choose another name ?",
+  "CHOOSE_ANOTHER_NAME"                  => "Choose another name",
   "ROOM_s"                               => "room %s",
   "INVITE_PEOPLE"                        => "Invite other people",
   "TO_INVITE_SHARE_THIS_URL"             => "Send this address to anyone and he will be able to join this room",

lib/Vroom/I18N/fr.pm

@@ -57,6 +57,9 @@ our %Lexicon = (
     "CREATE_ROOM"                               => "Créer un salon",
     "ROOM_NAME"                                 => "Nom du salon",
     "RANDOM_IF_EMPTY"                           => "Si vous laissez ce champs vide, un nom aléatoire sera donné au salon",
+    "THIS_ROOM_ALREADY_EXISTS"                  => "Ce salon existe déjà",
+    "CONFIRM_OR_CHOOSE_ANOTHER_NAME"            => "Vouslez-vous le rejoindre ou choisir un autre nom ?",
+    "CHOOSE_ANOTHER_NAME"                       => "Choisir un autre nom",
     "ROOM_s"                                    => "Salon %s",
     "INVITE_PEOPLE"                             => "Inviter des participants",
     "TO_INVITE_SHARE_THIS_URL"                  => "Envoyez cette adresse à d'autres personnes pour qu'elles vous rejoignent",

public/js/vroom.js

@@ -230,6 +230,58 @@ function maxHeight(){
   return $(window).height()-$('#toolbar').height()-25;
 }
 
+// Used on the index page
+function initIndex(){
+  var room;
+  // Submit the main form to create a room
+  $('#createRoom').submit(function(e){
+    e.preventDefault();
+    $.ajax({
+      url: rootUrl + 'create',
+      type: 'POST',
+      dataType: 'json',
+      data: {
+        roomName: $('#roomName').val(),
+      },
+      success: function(data) {
+        if (data.status == 'success'){
+          room = data.room;
+          window.location.assign(rootUrl + data.room);
+        }
+        else if (data.err && data.err == 'ERROR_NAME_CONFLICT' ){
+          room = data.room;
+          $('#conflictModal').modal('show');
+        }
+        else{
+          $('#roomName').notify(data.msg, 'error');
+        }
+      },
+      error: function(){
+        $.notify(locale.ERROR_OCCURRED, 'error');
+      }
+    });
+  });
+
+  // Handle join confirmation
+  $('#confirmJoinButton').click(function(){
+    window.location.assign(rootUrl + room);
+  });
+  // Handle cancel/choose another name
+  $('#chooseAnotherNameButton').click(function(){
+    $('#roomName').val('');
+    $('#conflictModal').modal('hide');
+  });
+
+  $('#roomName').on('input', function(){
+    if (!$('#roomName').val().match(/^[\w\-]{0,49}$/)){
+      $('#roomName').parent().addClass('has-error');
+    }
+    else{
+      $('#roomName').parent().removeClass('has-error');
+    }
+  });
+}
+
 // This is the main function called when you join a room
 function initVroom(room) {
 

public/vroom.pl

@@ -652,35 +652,34 @@ post '/invitation' => sub {
 # This handler creates a new room
 post '/create' => sub {
   my $self = shift;
-  $self->res->headers->cache_control('max-age=1, no-cache');
   # No name provided ? Lets generate one
   my $name = $self->param('roomName') || $self->get_random_name();
   # Create a session for this user, but don't set a role for now
   $self->login;
-  # Error if the name is invalid
-  unless ($self->valid_room_name($name)){
-    return $self->render('error',
-      room => $name,
-      msg  => $self->l('ERROR_NAME_INVALID'),
-      err  => 'ERROR_NAME_INVALID'
-    );
-  }
+  my $status = 'error';
+  my $err    = '';
+  my $msg    = $self->l('ERROR_OCCURRED');
   # Cleanup unused rooms before trying to create it
   $self->delete_rooms;
-  unless ($self->create_room($name,$self->session('name'))){
-    # If creation failed, it's most likly a name conflict
-    return $self->render('error',
-      room => $name,
-      msg  => $self->l('ERROR_NAME_CONFLICT'),
-      err  => 'ERROR_NAME_CONFLICT'
-    );
+
+  if (!$self->valid_room_name($name)){
+    $err = 'ERROR_NAME_INVALID';
+    $msg = $self->l('ERROR_NAME_INVALID');
   }
-  # Everything went fine, the room is created, lets mark this user owner of the room
-  # and redirect him on it.
-  else{
+  elsif ($self->get_room($name)){
+    $err = 'ERROR_NAME_CONFLICT';
+    $msg = $self->l('ERROR_NAME_CONFLICT');
+  }
+  elsif ($self->create_room($name,$self->session('name'))){
+    $status = 'success';
     $self->session($name => {role => 'owner'});
-    $self->redirect_to($name);
   }
+  $self->render(json => {
+    status => $status,
+    err    => $err,
+    msg    => $msg,
+    room   => $name
+  });
 };
 
 # Translation for JS resources

templates/default/index.html.ep

@@ -23,7 +23,7 @@
                 <%= $url %>
               </strong>
             </span>
-            <input id="roomName" name="roomName" type="text" pattern="[\w\-]{0,49}" placeholder="<%=l 'ROOM_NAME' %>" class="form-control help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RANDOM_IF_EMPTY' %>" autofocus>
+            <input id="roomName" name="roomName" type="text" placeholder="<%=l 'ROOM_NAME' %>" class="form-control help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RANDOM_IF_EMPTY' %>" autofocus>
             <span class="input-group-btn">
               <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></button>
             </span>
@@ -32,6 +32,29 @@
       </fieldset>
     </form>
   </div>
+  <div class="modal fade" role="dialog" id="conflictModal" aria-labelledby="conflictModal" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h4 class="modal-title"><%=l 'THIS_ROOM_ALREADY_EXISTS' %></h4>
+        </div>
+        <div class="modal-body">
+          <div class="panel" id="confirmJoinForm">
+            <label><%=l 'CONFIRM_OR_CHOOSE_ANOTHER_NAME' %></label>
+            <div class="btn-group btn-group-justified">
+              <div class="btn-group">
+                <button class="btn btn-primary" id="confirmJoinButton"><%=l 'JOIN_THIS_ROOM' %></button>
+              </div>
+              <div class="btn-group">
+                <button class="btn btn-default" id="chooseAnotherNameButton"><%=l 'CHOOSE_ANOTHER_NAME' %></button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <br/><br/>
   <div class="row">
     <div id="carouselIndexContainer" class="col-md-8 col-md-offset-2 col-xl-6 col-xl-offset-3 thumbnail">
@@ -135,4 +158,10 @@
   </div>
 </div>
 %= include 'js_common'
+    <script>
+      $(document).ready(function() {
+        initIndex();
+      });
+    </script>
+
 %= include 'footer'