webui: add vm show infoboxes

one/templates/show.html

@@ -88,7 +88,24 @@
     </div>
     </div>
     {% if i.firewall_host %}
     {% if i.firewall_host %}
     <div class="contentblock" id="ports">
     <div class="contentblock" id="ports">
-        <h2>{% trans "Port administration" %}</h2>
+        <h2>
+            <div class="boxhelp">
+                <div class="icon">
+                    <img src="/static/icons/information-frame.png" alt="{% trans "Help" %}" />
+                </div>
+                <div class="boxhelp-box">
+                    <p>{% blocktrans %}This is a list about the network ports
+                    forwarded to the public internet.{% endblocktrans %}</p>
+                    <p>{% blocktrans %}You can access the given private port of
+                    the VM trough the public address of the network.
+                    {% endblocktrans %}</p>
+                    <p>{% blocktrans %}On the IPV6 network you can access the
+                    listed private ports direcly using the VM's global IPV6
+                    address (connections to other ports are dropped).
+                    {% endblocktrans %}</p>
+                </div>
+            </div>
+            {% trans "Port administration" %}</h2>
         <div class="content">
         <div class="content">
             <form action="{% url vm_port_add i.id %}" method="post">
             <form action="{% url vm_port_add i.id %}" method="post">
                 {% csrf_token %}
                 {% csrf_token %}

one/templates/vm-credentials.html

@@ -4,7 +4,34 @@
     <table>
     <table>
         <tr>
         <tr>
             <th>{% trans "Protocol" %}:</th>
             <th>{% trans "Protocol" %}:</th>
-            <td>{{i.template.access_type|upper}}</td>
+            <td>
+                
+                <div class="boxhelp">
+                    <div class="icon">
+                        <img src="/static/icons/information-frame.png" alt="{% trans "Help" %}" />
+                    </div>
+                    <div class="boxhelp-box">
+                        {% if i.template.os_type == 'linux' %}
+                        <p>{% blocktrans %}You can access Linux machines through
+                        the SSH protocol (we recommend
+                        <a href="http://www.chiark.greenend.org.uk/~sgtatham/putty/">
+                            PuTTY</a> for Windows and OpenSSH for all other systems).
+                        {% endblocktrans %}</p>
+                        {% if i.template.access_type == 'nx' %}
+                        <p>{% blocktrans %}Graphical log in is also supported with
+                        the <a href="http://www.nomachine.com/download.php">
+                        NoMachine NX Client</a> application.{% endblocktrans %}</p>
+                        {% endif %}
+                        {% else %}
+                        <p>{% blocktrans %}You can access Windows machines through
+                        the remote desktop protocol.{% endblocktrans %}</p>
+                        <p>{% blocktrans %}We recommend the built-in remote desktop
+                        client for Windows and Remmina for Linux.{% endblocktrans %}</p>
+                        {% endif %}
+                    </div>
+                </div>
+                {{i.template.access_type|upper}}
+            </td>
         </tr>
         </tr>
         <tr>
         <tr>
             <th>{% trans "IP" %}:</th>
             <th>{% trans "IP" %}:</th>