i2p: django: Add description for the configuration shortcuts

Tunnels have a better description now.

I2P snark will need a better description and introduction

freedombox-team/plinth#1428 Request: I2P support

Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>

TODO.md

@@ -1,7 +1,7 @@
 # I2P
  
  - [ ] functional tests
- - [ ] improve i2p_frames to add a description above the frame
+ - [x] improve i2p_frames to add a description above the frame
  - [ ] configure HTTP/S proxy from freedombox interface
    + disabled
    + local interfaces

plinth/modules/i2p/templates/i2p_frame.html

@@ -1,13 +1,27 @@
 {% extends "base.html" %}
 {% block page_head %}
     <style>
-        #i2p-frame {
-            width: 100%;
-            height: 100%;
+        .i2p-main-container {
+            display: flex;
+            flex-direction: column;
             min-height: 500px;
+            height: 100%;
+        }
+
+        .i2p-main-container .i2p-main-container__frame {
+            flex-grow: 1;
         }
     </style>
 {% endblock %}
 {% block content %}
-    <iframe id="i2p-frame" src="{{ path }}" frameborder="0"></iframe>
+    <div class="i2p-main-container">
+        <div class="i2p-main-container__header">
+            {% for line in description %}
+                <p>{{ line|safe }}</p>
+            {% endfor %}
+
+        </div>
+        <iframe class="i2p-main-container__frame" src="{{ path }}" frameborder="0"></iframe>
+
+    </div>
 {% endblock %}

plinth/modules/i2p/urls.py

@@ -24,11 +24,7 @@ from plinth.modules.i2p import views
 
 urlpatterns = [
     url(r'^apps/i2p/$', views.I2PServiceView.as_view(), name='index'),
-    url(r'^apps/i2p/frame/tunnels/?$', views.create_i2p_frame_view(
-        "I2P Proxies and Tunnels", "i2ptunnel"
-    ), name='frame_tunnels'),
-    url(r'^apps/i2p/frame/torrent/?$', views.create_i2p_frame_view(
-        "Anonymous torrents", "i2psnark"
-    ), name='frame_torrent'),
+    url(r'^apps/i2p/frame/tunnels/?$', views.i2p_frame_tunnels, name='frame_tunnels'),
+    url(r'^apps/i2p/frame/torrent/?$', views.i2p_frame_torrent, name='frame_torrent'),
 
 ]

plinth/modules/i2p/views.py

@@ -49,7 +49,7 @@ class I2PServiceView(ServiceView):
         return context
 
 
-def create_i2p_frame_view(title, rel_path):
+def _create_i2p_frame_view(title, rel_path, description):
     """
     Creates a view with an iframe to the given path
 
@@ -69,7 +69,26 @@ def create_i2p_frame_view(title, rel_path):
             request, 'i2p_frame.html', {
                 'title': _(title),
                 'subsubmenu': subsubmenu,
-                'path': path
+                'path': path,
+                'description': description
             })
 
     return i2p_frame_view
+
+
+i2p_frame_tunnels = _create_i2p_frame_view(
+    "I2P Proxies and Tunnels", "i2ptunnel", [
+        _('I2P has the concept of tunnels. These enter an exit the network and are configured and (de)activated here.'),
+        _('HTTP/S SOCKS5 proxies are entry tunnels, so they are configured here.'),
+        _('In order to allow usage by other members of your network, '
+          'select the proxy then the interface you want your proxies to be bound to and save the settings.'
+          'The interface is in the "Reachable by" dropdown list.'),
+        _('You can find the IP addresses of your interfaces/connections <a href="/plinth/sys/networks/">here</a>'),
+    ]
+)
+i2p_frame_torrent = _create_i2p_frame_view(
+    "Anonymous torrents", "i2psnark", [
+        _('Track the progress of your anonymous torrent downlaods here.'),
+        _('You can find torrents on the <a href="http://tracker.postman.i2p">Postman Tracker</a>'),
+    ]
+)