Merge lp:~roadmr/canonical-identity-provider/2fa-use-backup-codes-in-sequence into lp:canonical-identity-provider/release

[Daniel Manrique]

Tweaks to list of printable codes for more clarity.

   * Instructions on using them in order and crossing them out once consumed.
   * Show actual codes in a table format with an ordering indicator
   * Fix printable layout with smaller font and padding so it all fits in one sheet and doesn't truncate.

Part zero of 2FA backup/recovery improvements.

[Maximiliano Bertacchini (maxiberta)]

LGTM, thanks. Just a CSS question.

review: Approve

[Daniel Manrique (roadmr)]

Thanks!

[Otto Co-Pilot (otto-copilot)]

Running landing tests failed
https://jenkins.ols.canonical.com/online-services/job/canonical-identity-provider/315/

[Maximiliano Bertacchini (maxiberta)]

+1

review: Approve

=== modified file 'src/webui/templates/device/code-list.html'
--- src/webui/templates/device/code-list.html	2019-12-17 14:05:19 +0000
+++ src/webui/templates/device/code-list.html	2020-04-14 15:09:37 +0000
@@ -1,19 +1,27 @@
 {% load i18n %}
 <div id="codes" data-qa-id="codelist">
-    <ol class="p-list">
-    {% for code in codes %}
-      <li class="p-list__item">{% spaceless %}
-        {% if forloop.counter0 < counter|default:0 %}
-          <strike>{{ code }}</strike>
-        {% else %}
-          {{ code }}
-        {% endif %}
-      {% endspaceless %}</li>
-      {% endfor %}
-    </ol>
+    <table style="margin-bottom: 2em">
+        <thead>
+            <tr>
+                <th>Order</th>
+                <th>Access Code</th>
+            </tr>
+        </thead>
+        {% for code in codes %}
+        <tr>
+            <td>{{forloop.counter }}</td>{% spaceless %}
+            <td>{% if forloop.counter0 < counter|default:0 %}
+                <strike>{{ code }}</strike>
+                {% else %}{{ code }}
+                {% endif %}
+                {% endspaceless %}</td>
+        </tr>
+        {% endfor %}
+    </table>
 </div>
 
 <style media="print">
 header, .p-sidebar, footer, p { display: none; }
-#codes ol { list-style:none; margin:0; padding:0 }
+#codes table { margin:0; padding:0}
+#codes table tr td{ margin:0; padding:0 ; font-size: 80%}
 </style>
 
=== modified file 'src/webui/templates/device/print-codes.html'
--- src/webui/templates/device/print-codes.html	2020-01-22 12:52:26 +0000
+++ src/webui/templates/device/print-codes.html	2020-04-14 15:09:37 +0000
@@ -18,6 +18,8 @@
 {% block content %}
   <h2>{% trans "Printable backup codes" %}</h2>
   <p>{% trans "Print this list of backup codes and keep them safe." %}</p>
+  <p>{% trans "The codes must be used in the order shown below." %}</p>
+  <p>{% trans "Each code can be used only once, please cross it out once you've used it." %}</p>
   {% include 'device/code-list.html' %}
   <button class="p-button--positive" id="printbtn" onclick="window.print()" data-qa-id="print_codes">{% trans "Print Codes" %}</button>
   {% if token and not needs_renewal %}
 
=== modified file 'src/webui/tests/test_views_devices.py'
--- src/webui/tests/test_views_devices.py	2019-12-17 14:05:19 +0000
+++ src/webui/tests/test_views_devices.py	2020-04-14 15:09:37 +0000
@@ -572,7 +572,12 @@
         response = self.client.get(self.print_url)
 
         doc = PyQuery(response.content)
-        code_nodes = doc.find('#codes li')
+        code_nodes = doc.find('#codes td')
+        # We only need every other <td> (the first one is the sequence
+        # number)
+        code_nodes = [
+            node for idx, node in enumerate(code_nodes)
+            if idx % 2]
         used = code_nodes[:position]
         unused = code_nodes[position:]
 
@@ -647,7 +652,12 @@
         response = self.client.get(self.generate_url)
 
         doc = PyQuery(response.content)
-        code_nodes = doc.find('#codes li')
+        code_nodes = doc.find('#codes td')
+        # We only need every other <td> (the first one is the sequence
+        # number)
+        code_nodes = [
+            node for idx, node in enumerate(code_nodes)
+            if idx % 2]
 
         start = settings.TWOFACTOR_PAPER_CODES * 4
         end = settings.TWOFACTOR_PAPER_CODES * 5