Move vpn generation password javascript code to vpn config template.

Rewrite code using jQuery

coin/static/js/illyse.js

@@ -1,30 +1,30 @@
 // TODO : Move it to VPN template only. We havn't to load this code at each page loa
 // TODO : jQueryfy it
 window.onload = function() {
-	var field = document.getElementById("passgen");
-	if (field != undefined) field.onclick = function() {
-		if (!confirm("Ceci va effacer votre ancien mot de passe et en générer un nouveau. Continuer ?")) return false;
-		var cell = field.parentNode;
-		cell.removeChild(field);
-		cell.appendChild(document.createElement("img"));
-		cell.lastChild.src = "/static/img/coin.ajax.gif";
-		cell.appendChild(document.createTextNode(" Génération en cours…"));
-		var xhr = new XMLHttpRequest();
-		xhr.onreadystatechange = function() {
-			if (xhr.readyState != 4) return;
-			var table = cell.parentNode.parentNode;
-			if (xhr.responseXML == null)
-				var pass = (new DOMParser().parseFromString(xhr.responseText, "text/html")).getElementById("password");
-			else var pass = xhr.responseXML.getElementById("password");
-			table.insertBefore(pass.cloneNode(true), cell.parentNode);
-			do pass = pass.nextSibling; while (pass.nodeType == 3);
-			table.insertBefore(pass.cloneNode(true), cell.parentNode);
-			table.removeChild(cell.parentNode);
-		};
-		xhr.open("GET", field.href, false);
-		xhr.send(null);
-		return false;
-	};
+	//var field = document.getElementById("passgen");
+	//if (field != undefined) field.onclick = function() {
+		//if (!confirm("Ceci va effacer votre ancien mot de passe et en générer un nouveau. Continuer ?")) return false;
+		//var cell = field.parentNode;
+		//cell.removeChild(field);
+		//cell.appendChild(document.createElement("img"));
+		//cell.lastChild.src = "/static/img/coin.ajax.gif";
+		//cell.appendChild(document.createTextNode(" Génération en cours…"));
+		//var xhr = new XMLHttpRequest();
+		//xhr.onreadystatechange = function() {
+			//if (xhr.readyState != 4) return;
+			//var table = cell.parentNode.parentNode;
+			//if (xhr.responseXML == null)
+				//var pass = (new DOMParser().parseFromString(xhr.responseText, "text/html")).getElementById("password");
+			//else var pass = xhr.responseXML.getElementById("password");
+			//table.insertBefore(pass.cloneNode(true), cell.parentNode);
+			//do pass = pass.nextSibling; while (pass.nodeType == 3);
+			//table.insertBefore(pass.cloneNode(true), cell.parentNode);
+			//table.removeChild(cell.parentNode);
+		//};
+		//xhr.open("GET", field.href, false);
+		//xhr.send(null);
+		//return false;
+	//};
 
 	var field = document.getElementById("trafic_zoom");
 	if (field != undefined) {

coin/vpn/templates/vpn/fragments/password.html

@@ -0,0 +1,8 @@
+<tr id="password">
+    <td class="center"><span class="label">Mot de passe</span></td>
+    <td><span class="pass">{{ password }}</span></td>
+</tr>
+<tr>
+    <td class="warning" colspan="2">Ce mot de passe ne sera affiché qu'une seule fois. Si vous le perdez, il faudra en générer un nouveau.</td>
+</tr>
+

coin/vpn/templates/vpn/password.html

@@ -1,11 +0,0 @@
-{% extends "vpn/vpn.html" %}
-
-{% block password %}
-                <tr id="password">
-                    <td class="center"><span class="label">Mot de passe</span></td>
-                    <td><span class="pass">{{ password }}</span></td>
-                </tr>
-                <tr>
-                    <td class="warning" colspan="2">Ce mot de passe ne sera affiché qu'une seule fois. Si vous le perdez, il faudra en générer un nouveau.</td>
-                </tr>
-{% endblock %}

coin/vpn/templates/vpn/vpn.html

@@ -13,14 +13,14 @@
         {% endfor %}
     </ul>
     {% endif %}
-    
+
     {% if form.non_field_errors or form.ipv4_endpoint.errors or form.ipv6_endpoint.errors %}
     <div class="alert-box alert nogap">
       {{ form.non_field_errors }}
       {{ form.ipv4_endpoint.errors }}
       {{ form.ipv6_endpoint.errors }}
     </div>{% endif %}
-    
+
     <div class="large-6 columns">
         <div class="panel">
             <h3>Statut</h3>
@@ -28,14 +28,14 @@
                 <tr>
                     <td class="center"><span class="label">Identifiant</span></td>
                     <td>{{object.login}}</td>
-                </tr>{% block password %}
+                </tr>
                 <tr>
                     <td class="center" colspan="2">
-                        <a class="button radius tiny" id="passgen" href="{% url 'vpn:generate_password' object.pk %}"><i class="fa fa-refresh"></i>
+                        <a class="button tiny radius" id="passgen" href="{% url 'vpn:generate_password' object.pk %}"><i class="fa fa-refresh"></i>
  Générer un nouveau mot de passe</a>
                     </td>
                 </tr>
-                {% endblock %}<tr class="flatfield">
+                <tr class="flatfield">
                     <td class="center">{{ form.comment.label_tag }}</td>
                     <td>{{ form.comment }}</td>
                 </tr>
@@ -80,3 +80,25 @@
 </div>
 
 {% endblock %}
+
+{% block js %}
+    <script>
+        $('#passgen').click(function(){
+            if (!confirm("Ceci va effacer votre ancien mot de passe et en générer un nouveau. Continuer ?")) return false;
+
+            parent_cell = $(this).parent();
+            parent_cell.html('<span class="pending_request"><i class="fa fa-refresh fa-spin"></i> Génération en cours</span>');
+
+            $.ajax({
+                'url': $(this).attr('href')
+            }).done(function(html) {
+                //Remplace le tr par le contenu renvoyé (qui est deux tr successifs)
+                parent_cell.parent().replaceWith(html);
+            }).fail(function( jqXHR, textStatus ) {
+                parent_cell.html('<span class="error">Échec de la requête : ' + textStatus + '</span>');
+            });
+
+            return false;
+        });
+    </script>
+{% endblock js %}

coin/vpn/urls.py

@@ -9,7 +9,7 @@ urlpatterns = patterns(
     # This is part of the generic configuration interface (the "name" is
     # the same as the "backend_name" of the model).
     url(r'^(?P<id>\d+)$', VPNView.as_view(template_name="vpn/vpn.html"), name="details"),
-    url(r'^password/(?P<id>\d+)$', VPNGeneratePasswordView.as_view(template_name="vpn/password.html"), name="generate_password"),
+    url(r'^password/(?P<id>\d+)$', VPNGeneratePasswordView.as_view(template_name="vpn/fragments/password.html"), name="generate_password"),
     url(r'^graph/(?P<vpn_id>[0-9]+)/(?P<period>[a-z]+)$', get_graph, name="get_graph"),
     url(r'^graph/(?P<vpn_id>[0-9]+)$', get_graph, name="get_graph"),
 )

coin/vpn/views.py

@@ -42,7 +42,7 @@ def generate_password(request, id):
     # This will hash the password automatically
     vpn.full_clean()
     vpn.save()
-    return render_to_response('vpn/password.html', {"vpn": vpn,
+    return render_to_response('vpn/fragments/password.html', {"vpn": vpn,
                                                     "password": password})
 
 
@@ -68,7 +68,7 @@ def get_graph(request, vpn_id, period="daily"):
     """
     vpn = get_object_or_404(VPNConfiguration, pk=vpn_id,
                             offersubscription__member=request.user)
-    
+
     time_periods = { 'hourly': '-1hour', 'daily': '-24hours', 'weekly': '-8days', 'monthly': '-32days', 'yearly': '-13months', }
     if period not in time_periods:
         period = 'daily'