networks: Update text for router setup

- Move router setup below connections
- Use default style for Update button
- Use box_name in templates
- Add 2nd example of router IP
- Minor updates to text

Signed-off-by: James Valleroy <jvalleroy@mailbox.org>

plinth/modules/networks/forms.py

@@ -334,7 +334,7 @@ class RouterConfigurationWizardForm(forms.Form):
                       'support DMZ feature. All applications that provide a '
                       'web interface need you to forward traffic from ports '
                       '80 and 443 to work. Each of the other applications '
-                      'will suggest you which port(s) need to be forwarded '
+                      'will suggest which port(s) need to be forwarded '
                       'for that application to work.</p>'),
                     box_name=cfg.box_name
                 ))

plinth/modules/networks/templates/connections_list.html

@@ -55,30 +55,6 @@
 {% endblock %}
 
 {% block configuration %}
-  <h3>{% trans "Freedombox Internet Connectivity" %}</h3>
-  <p>
-  {% blocktrans trimmed %}
-      The following best describes how your Freedombox is connected in your
-      network. This information is used only to suggest you necessary configuration
-      actions.
-  {% endblocktrans %}
-  </p>
-
-  <p>
-  {% blocktrans trimmed %}
-      Your Freedombox gets its internet from your Router via WiFi or Ethernet
-      cable. This is a typical home setup.
-  {% endblocktrans %}
-  </p>
-
-  <div class="btn-toolbar">
-    <a href="{% url 'networks:router_setup' %}" class="btn btn-primary"
-       role="button" title="{% trans 'Update...' %}">
-      <span class="fa" aria-hidden="true"></span>
-      {% trans 'Update...' %}
-    </a>
-  </div>
-
   <h3>{% trans "Connections" %}</h3>
 
   <div class="btn-toolbar">
@@ -144,4 +120,32 @@
 
   {% include "connections_diagram.html" %}
 
+  <h3>
+    {% blocktrans trimmed %}
+      {{ box_name }} Internet Connectivity
+    {% endblocktrans %}
+  </h3>
+  <p>
+    {% blocktrans trimmed %}
+      The following best describes how your {{ box_name }} is connected in your
+      network. This information is used only to suggest necessary configuration
+      actions.
+    {% endblocktrans %}
+  </p>
+
+  <p>
+    {% blocktrans trimmed %}
+      Your {{ box_name }} gets its internet from your Router via WiFi or
+      Ethernet cable. This is a typical home setup.
+    {% endblocktrans %}
+  </p>
+
+  <div class="btn-toolbar">
+    <a href="{% url 'networks:router_setup' %}" class="btn btn-default"
+       role="button" title="{% trans 'Update...' %}">
+      <span class="fa" aria-hidden="true"></span>
+      {% trans 'Update...' %}
+    </a>
+  </div>
+
 {% endblock %}

plinth/modules/networks/templates/router_configuration_content.html

@@ -21,41 +21,57 @@
 {% load i18n %}
 {% load static %}
 
-<h1>{% trans "Setup FreedomBox Behind a Router" %}</h1>
+<h1>
-  <p>
+  {% blocktrans trimmed %}
-    {% blocktrans trimmed %}
+    Setup {{ box_name }} Behind a Router
-    Your Freedombox gets its internet connection from your router via Wi-Fi or Ethernet cable.
+  {% endblocktrans %}
-    This is a typical home setup.
+</h1>
-    {% endblocktrans %}
-  </p>
-  <p>
-    {% blocktrans trimmed %}
-    With this setup, any device on the internet trying to reach your Freedombox will have to
-    go through your router. The router will need to be configured to forward all traffic
-    it receives so that Freedombox provides the services.
-    {% endblocktrans %}
-  </p>
-  <p>
-    {% blocktrans trimmed %}
-    If you don't have control over your router, choose not to configure it. To see options,
-    to overcome this limitation, choose 'no public address' option in Internet connection
-    type selection.
-    {% endblocktrans %}
-  </p>
 
-  <h2>{% trans "Choose How You Wish to Configure Your Router" %}</h2>
+<p>
-  <p class='help-block'>
+  {% blocktrans trimmed %}
-    {% blocktrans trimmed %}
+    Your {{ box_name }} gets its internet connection from your router via
-    You will need to login to your router's administration
+    Wi-Fi or Ethernet cable. This is a typical home setup.
-    console provided by the router. This may look like
+  {% endblocktrans %}
-    <a href="http://192.168.0.1/">http://192.168.168.0.1</a>.
+</p>
-    The username and password is configured by you
+
-    when you first setup the router. For many routers, this
+<p>
-    information is printed at the back of the router. If you
+  {% blocktrans trimmed %}
-    don't remember the credentials or the IP address of the
+    With this setup, any device on the internet trying to reach your
-    router, you may decide to reset it and set it up freshly.
+    {{ box_name }} will have to go through your router. The router will need
-    Lookup your router model number and search online for the
+    to be configured to forward all traffic it receives so that {{ box_name }}
-    router's manual. This will provide full instructions on
+    provides the services.
-    how to perform this task.
+  {% endblocktrans %}
-    {% endblocktrans %}
+</p>
-  </p>
+
+<p>
+  {% blocktrans trimmed %}
+    If you don't have control over your router, choose not to configure it. To
+    see options, to overcome this limitation, choose 'no public address' option
+    in Internet connection type selection.
+  {% endblocktrans %}
+</p>
+
+<h2>{% trans "Choose How You Wish to Configure Your Router" %}</h2>
+
+<p class='help-block'>
+  {% blocktrans trimmed %}
+    You will need to login to your router's administration console provided by
+    the router. This may look like one of the following:
+  {% endblocktrans %}
+</p>
+
+<ul>
+  <li><a href="http://192.168.0.1/">http://192.168.0.1</a></li>
+  <li><a href="http://192.168.1.1/">http://192.168.1.1</a></li>
+</ul>
+
+<p class='help-block'>
+  {% blocktrans trimmed %}
+    The username and password is configured by you when you first setup the
+    router. For many routers, this information is printed at the back of the
+    router. If you don't remember the credentials or the IP address of the
+    router, you may decide to reset it and set it up freshly. Lookup your router
+    model number and search online for the router's manual. This will provide
+    full instructions on how to perform this task.
+  {% endblocktrans %}
+</p>