Proper UI for generation of VPN password (without confirmation at the moment)

Template from Elzen (thanks)

coin/static/css/illyse.css

@@ -185,3 +185,15 @@ span.italic {
     color: #FF0000;
     content: "✗ ";
 }
+.pass {
+    font-weight: bold;
+}
+.warning {
+    background-color: #FF7777;
+    border-radius: 5px;
+    font-style: italic;
+}
+.warning:before {
+    content: "⚠ ";
+    font-weight: bold;
+}

coin/vpn/templates/vpn/password.html

@@ -1,8 +1,11 @@
-{% extends "base.html" %}
+{% extends "vpn/vpn.html" %}
 
-{% block content %}
-<h2>VPN password generation</h2>
-<p>Generated password for VPN <strong>{{ vpn.login }}</strong>:</p>
-<p><strong>{{ password }}</strong></p>
-<p>Don't forget it, it will only be displayed once (we don't store it in clear text).  If you forget this password, you will have to generate a new one.</p>
+{% block password %}
+                <tr>
+                    <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

@@ -11,13 +11,13 @@
                 <tr>
                     <td class="center"><span class="label">Identifiant</span></td>
                     <td>{{object.login}}</td>
-                </tr>
+                </tr>{% block password %}
                 <tr>
                     <td class="center" colspan="2">
                         <a class="button" href="{% url 'vpn:generate_password' object.pk %}">Générer un nouveau mot de passe</a>
                     </td>
                 </tr>
-                {% if object.comment %}<tr>
+                {% endblock %}{% if object.comment %}<tr>
                     {% if object.comment|length < 24 %}<td class="center"><span class="label">Commentaire</span></td>
                     <td>{% else %}<td colspan="2">{% endif %}{{object.comment}}</td>
                 </tr>{% endif %}

coin/vpn/urls.py

@@ -1,10 +1,10 @@
 from django.conf.urls import patterns, url
-from coin.vpn.views import VPNView, generate_password
+from coin.vpn.views import VPNView, VPNGeneratePasswordView
 
 urlpatterns = patterns(
     '',
     # This is part of the generic configuration interface (the "name" is
     # the same as the "backend_name" of the model).
     url(r'^([0-9]+)$', VPNView.as_view(template_name="vpn/vpn.html"), name="openvpn_ldap"),
-    url(r'^password/(?P<vpn_id>.+)$', generate_password, name="generate_password"),
+    url(r'^password/([0-9]+)$', VPNGeneratePasswordView.as_view(template_name="vpn/password.html"), name="generate_password"),
 )

coin/vpn/views.py

@@ -6,22 +6,24 @@ from coin.vpn.models import VPNSubscription
 
 
 class VPNView(DetailView):
- def get_object(self):
+
+    def get_object(self):
         return get_object_or_404(VPNSubscription, pk=self.args[0],
                                  administrative_subscription__member__user=self.request.user)
 
 
-def generate_password(request, vpn_id):
+class VPNGeneratePasswordView(VPNView):
     """This generates a random password, saves it in hashed form, and returns
     it to the user in cleartext.
     """
-    vpn = get_object_or_404(VPNSubscription, pk=vpn_id,
-                            administrative_subscription__member__user=request.user)
-    # This function has nothing to here, but it's convenient.
-    password = User.objects.make_random_password()
-    vpn.password = password
-    # This will hash the password automatically
-    vpn.full_clean()
-    vpn.save()
-    return render_to_response('vpn/password.html', {"vpn": vpn,
-                                                    "password": password})
+
+    def get_context_data(self, **kwargs):
+        context = super(VPNGeneratePasswordView, self).get_context_data(**kwargs)
+        # Generate a new random password and save it
+        password = User.objects.make_random_password()
+        self.object.password = password
+        # This will hash the password automatically
+        self.object.full_clean()
+        self.object.save()
+        context['password'] = password
+        return context