webui: toggle IPv6/IPv4 host, if possible

one/static/script/cloud.js

@@ -12,6 +12,20 @@ $(function() {
     $('a').click(function(e) {
         e.stopPropagation();
     });
+    $('.host-toggle').click(function(e){
+        e.preventDefault();
+        if($(this).find('.v4').is(':hidden')){
+            $(this).find('.v4').show();
+            $(this).find('.v6').hide();
+            $(this).parent().next().find('.host').show();
+            $(this).parent().next().find('.ipv4host').hide();
+        } else {
+            $(this).find('.v6').show();
+            $(this).find('.v4').hide();
+            $(this).parent().next().find('.host').hide();
+            $(this).parent().next().find('.ipv4host').show();
+        }
+    })
     $('.delete-template').click(function(e) {
         e.preventDefault();
         e.stopPropagation();

one/static/style/base.less

@@ -419,6 +419,15 @@ body > footer {
     }
 }
 
+.host-toggle {
+    .v6 {
+        display: none;
+    }
+}
+.ipv4host {
+    display: none;
+}
+
 @media (max-width: 900px) {
     #content {
         width: 100%;

one/templates/vm-credentials.html

@@ -37,8 +37,8 @@
             </td>
         </tr>
         <tr>
-            <th>{% trans "IP" %}:</th>
-            <td>{{ i.hostname }}</td>
+            <th>{% trans "Host" %}{% if i.is_ipv6 %} (<a href="#" class="host-toggle"><span class="v4">IPv4</span><span class="v6">IPv6</span></a>){% endif %}:</th>
+            <td><span class="host">{{ i.hostname }}</span><span class="ipv4host">{{i.hostname_v4}}</span></td>
         </tr>
         {% if i.nat %}<tr>
             <th>{% trans "Port" %}:</th>