dashboard: group rename without js

circle/dashboard/static/dashboard/dashboard.less

@@ -188,11 +188,15 @@ html {
   display: none;
 }
 
-.vm-details-home-name {
+#group-details-rename-form {
+  display: inline-block;
+}
+
+.vm-details-home-name, #group-details-rename-form .input-group {
   max-width: 401px;
 }
 
-#node-details-rename-name, #group-details-rename-name {
+#node-details-rename-name {
   max-width: 160px;
 }
 

circle/dashboard/static/dashboard/group-details.js

+$(function() {
   /* rename */
   $("#group-details-h1-name, .group-details-rename-button").click(function() {
-    $("#group-details-h1-name").hide();
-    $("#group-details-rename").css('display', 'inline');
-    $("#group-details-rename-name").focus();
+    $("#group-details-h1-name span").hide();
+    $("#group-details-rename-form").show().css('display', 'inline-block');
+    $("#group-details-rename-name").select();
   });
 
   /* rename ajax */
   $('#group-details-rename-submit').click(function() {
+    if(!$("#group-details-rename-name")[0].checkValidity()) {
+      return true;
+    }
     var name = $('#group-details-rename-name').val();
+
     $.ajax({
       method: 'POST',
       url: location.href,
       data: {'new_name': name},
       headers: {"X-CSRFToken": getCookie('csrftoken')},
       success: function(data, textStatus, xhr) {
-        $("#group-details-h1-name").text(data['new_name']).show();
-        $('#group-details-rename').hide();
-        // addMessage(data['message'], "success");
+        $("#group-details-h1-name span").text(data.new_name).show();
+        $('#group-details-rename-form').hide();
       },
       error: function(xhr, textStatus, error) {
-        addMessage("Error during renaming!", "danger");
+        addMessage("Error during renaming.", "danger");
       }
     });
     return false;
   });
-
-  $(".group-details-help-button").click(function() {
-    $(".group-details-help").stop().slideToggle();
-  });
+});

circle/dashboard/templates/dashboard/group-detail.html

@@ -9,43 +9,33 @@
 <div class="body-content">
   <div class="page-header">
     <div class="pull-right" style="padding-top: 15px;">
-      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs group-details-rename-button">
+      <a title="{% trans "Rename" %}" class="btn btn-default btn-xs group-details-rename-button">
         <i class="fa fa-pencil"></i>
       </a>
       <a title="{% trans "Delete" %}" data-group-pk="{{ group.pk }}" class="btn btn-default btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}">
         <i class="fa fa-trash-o"></i>
       </a>
-      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs group-details-help-button">
-        <i class="fa fa-question"></i>
-      </a>
     </div>
-   <h1>
-      <div id="group-details-rename">
-        <form action="" method="POST" id="group-details-rename-form">
-          {% csrf_token %}
-          <input id="group-details-rename-name" class="form-control" name="new_name" type="text" value="{{ group.name }}"/>
-          <button type="submit" id="group-details-rename-submit" class="btn">{% trans "Rename" %}</button>
-        </form>
-      </div>
+    <h1>
+      <form action="" method="POST" id="group-details-rename-form" class="js-hidden">
+        {% csrf_token %}
+        <div class="input-group">
+          <input id="group-details-rename-name" class="form-control" name="new_name"
+            type="text" value="{{ group.name }}" required />
+          <span class="input-group-btn">
+            <button type="submit" id="group-details-rename-submit" class="btn">
+              {% trans "Rename" %}
+            </button>
+          </span>
+        </div>
+      </form>
       <div id="group-details-h1-name">
-        {{ group.name }}
+        <span class="no-js-hidden">{{ group.name }}</span>
         {% if group.groupprofile.org_id %}
         <small>{{group.groupprofile.org_id}}</small>
         {% endif %}
       </div>
     </h1>
-    <div class="group-details-help js-hidden">
-      <ul style="list-style: none;">
-        <li>
-          <strong>{% trans "Rename" %}:</strong>
-          {% trans "Change the name of the group." %}
-        </li>
-        <li>
-          <strong>{% trans "Delete" %}:</strong>
-          {% trans "Delete group." %}
-        </li>
-      </ul>
-    </div>
   </div><!-- .page-header -->
   <div class="row">
     <div class="col-md-12" id="group-detail-pane">