Much prettier VPN view

coin/static/css/illyse.css

@@ -160,3 +160,24 @@ table.invoice-table td.total {
 #payment_howto p {
     font-size:0.7rem;
 }
+
+span.italic {
+    font-style: italic;
+}
+.button {
+    border-radius: 5px;
+    padding: 0.2em 0.5em 0.4em 0.5em;
+    margin-bottom: auto;
+    font-size: 0.9em;
+}
+.boolviewer input {
+    display: none;
+}
+.boolviewer input:checked+span:before {
+    color: #008800;
+    content: "✔ ";
+}
+.boolviewer input:not(:checked)+span:before {
+    color: #FF0000;
+    content: "✗ ";
+}

coin/vpn/templates/vpn/vpn.html

@@ -1,22 +1,60 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h2>VPN details</h2>
+<div class="row">
+    <h2>Configuration du VPN</h2>
+    
+    <div class="large-6 columns">
+        <div class="panel">
+            <h3>Statut</h3>
+            <table class="full-width">
+                <tr>
+                    <td class="center"><span class="label">Identifiant</span></td>
+                    <td>{{object.login}}</td>
+                </tr>
+                <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>
+                    {% 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 %}
+                <tr>
+                    <td class="center boolviewer" colspan="2">
+                        <input type="checkbox" disabled="disabled"{% if object.activated %} checked="checked"{% endif %} />
+                        <span>{% if object.activated %}Ce VPN est actif{% else %}Ce VPN est inactif{% endif %}</span>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
 
-<ul>
-  <li>Login: {{ object.login }}</li>
-  <li>Password: <a href="{% url 'vpn:generate_password' object.pk %}">Generate new password</a></li>
-  <li>Activated: {{ object.activated }}</li>
-  <li>Comment: {{ object.comment }}</li>
-  <li>IPv4 endpoint: {{ object.ipv4_endpoint }}</li>
-  <li>IPv6 endpoint: {{ object.ipv6_endpoint }}</li>
-</ul>
-
-<p>IP subnets attributed to this VPN:</p>
-<ul>
-  {% for subnet in object.administrative_subscription.ip_subnet.all %}
-  <li>{{ subnet }}</li>
-  {% endfor %}
-</ul>
+    <div class="large-6 columns">
+        <div class="panel">
+            <h3>Adresses IP</h3>
+            <table class="full-width">
+                <tr>
+                    <td class="center"><span class="label">Sous-réseaux</span></td>
+                    <td>
+                        {% if object.ipv4_endpoint or object.ipv6_endpoint %}<ul>
+                            {% for subnet in object.administrative_subscription.ip_subnet.all %}<li>{{ subnet }}</li>{% endfor %}
+                        </ul>{% else %}<span class="italic">Aucune adresse</span>{% endif %}
+                    </td>
+                </tr>
+                <tr>
+                    <td class="center"><span class="label">Sorties</span></td>
+                    <td>
+                        {% if object.ipv4_endpoint or object.ipv6_endpoint %}<ul>
+                            {% if object.ipv4_endpoint %}<li>{{ object.ipv4_endpoint }}</li>{% endif %}
+                            {% if object.ipv6_endpoint %}<li>{{ object.ipv6_endpoint }}</li>{% endif %}
+                        </ul>{% else %}<span class="italic">Aucune adresse</span>{% endif %}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>
 
 {% endblock %}