Change network rename UI/UX

src/views/network_detail.pug

@@ -5,22 +5,53 @@
 
 extends network_layout
 
+//- Don't display that title
 block title
-//- don't display that title
+
+//- Replace the network title with the editable one
+block network_title
+  h2
+    | Network 
+    a#change-name(href='#')
+      span#name= network.name
+      i.glyphicon.glyphicon-pencil(style='font-size: 20px;')
+    input#name-input.form-control(type='text' style='width: 200px; display: none;')
+    |  (#{network.nwid}):
+  script.
+    $(function() {
+      var nwurl = '/controller/network/#{network.nwid}';
+      var name = !{JSON.stringify(network.name)};
+
+      function toggleNameEditor(show) {
+        $('#change-name').css('display', !show ? '' : 'none');
+        $('#name-input').css('display', show ? 'inline-block' : 'none');
+      }
+
+      function submit() {
+        var newName = $('#name-input').val();
+        if (newName != name) {
+          name = newName;
+          $.post(nwurl + '/name', {'name': name})
+            .done(function () {
+              $('#name').text(newName);
+            });
+        }
+        toggleNameEditor(false);
+      }
+
+      $('#change-name').on('click', function() {
+        toggleNameEditor(true);
+        $('#name-input').val(name);
+        $('#name-input').focus();
+      });
+      $('#name-input').on('focusout', submit);
+      $('#name-input').keypress(function (e) {
+        if (e.which == 13) submit();
+      });
+    });
 
 block net_content
   - const nwurl = '/controller/network/' + network.nwid;
-  if error
-     b #{error}
-  else
-    form(method='POST' action=(nwurl + '/name'))
-      .form-group.row
-        .col-sm-2
-          label(for='name') Name:
-        .col-sm-8.col-xs-9
-          input#name.form-control(type='text' name='name' placeholder='New network name' value=(undefined===network.name? '' : network.name))
-        .col-sm-2.col-xs-3
-          button.btn.btn-primary(type='submit') Submit
 
   a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/private') role='button')
     = network.private ? "Private" : "Public"

src/views/network_layout.pug

@@ -11,6 +11,7 @@ block content
   else
     .row
       .col-sm-10
+        block network_title
           h2
             | Network 
             a(href='/controller/network/' + network.nwid) #{network.name}