Merge ~roadmr/canonical-identity-provider:2fa-backup-ux-tweaks into canonical-identity-provider:master

[Daniel Manrique]

UX changes for 2FA backup enforcement/reminders based on review by design team.

Login/2fa entry simplification:

https://private-fileshare.canonical.com/~roadmr/Screenshot_2020-10-26%20Log%20in.png

Device screen simplification/redesign:

https://private-fileshare.canonical.com/~roadmr/Screenshot_2020-10-26%20foofoofoo's%20two-factor%20device%20verification.png

Visual UX provided was:

https://app.zeplin.io/project/5f96f612c9398211616fc0a9/screen/5f96f635c7dd845f46d57a18

Could totally use vanilla help to avoid using inline styles and other monstrosities :)

[Maximiliano Bertacchini (maxiberta)]

Nice! +1 with the littlest nitpick.

review: Approve

[Maximiliano Bertacchini (maxiberta)]

One extra question.

[Daniel Manrique (roadmr)]

Thanks, change coming up.

2fa248f... by Daniel Manrique on 2020-10-27

separate title from content

[Maximiliano Bertacchini (maxiberta)]

+1 thanks!

review: Approve

[Ovidiu Suciu (solazio)]

The reason you get a slightly different look than the design, is the old vanilla version we are using on this project. It should be updated to the latest version (2.19.2) https://vanillaframework.io/docs

If you do it, keep in mind that all the pages will require QA as it might break some things.

If you don't want to do it, I suggest to stick to what you have, and I will try to upgrade it once Charmhub madness calms down a bit.

diff --git a/src/webui/templates/device/verify.html b/src/webui/templates/device/verify.html
index eeb2cf1..972b960 100644
--- a/src/webui/templates/device/verify.html
+++ b/src/webui/templates/device/verify.html
@@ -24,8 +24,8 @@ Affero General Public License version 3 (see the file LICENSE).
 {% if devices %}
     <div id="auth-devices" class="col-6">
       <form id="login-form" action="" method="post" name="loginform">
-        <h2>{% trans "Periodic verification for your authentication devices" %}</h2>
-        <h3 class="p-heading--four">{% trans "Please verify that your list of devices is up to date." %}</h3>
+        <h2>{% trans "Verify that your devices are up to date" %}</h2>
+        <p>{% trans "We periodically check to make sure you keep your backup devices always up to date." %}</p>
         <div class="p-strip is-shallow">
             <table id="device-list" data-qa-id="device_list" class="p-table--bordered">
                 <thead>
@@ -54,21 +54,19 @@ Affero General Public License version 3 (see the file LICENSE).
         </div>
         {% csrf_token %}
         {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
-        <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="continue_button">{% trans "Continue" %}</button>
-        <a class="p-button--neutral p-link--external u-no-margin--bottom" data-qa-id="manage_devices_button" href={% url 'device-list' %} target="_blank">{% trans "Manage Devices" %}</a>
+        <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="continue_button">{% trans "Everything looks OK, continue" %}</button>
+        <a class="p-link--external u-no-margin--bottom" style="padding-left: 1em" data-qa-id="manage_devices_button" href={% url 'device-list' %} target="_blank">{% trans "Manage Devices" %}</a>
       </form>
     </div>
 {% else %}
 <p>{% trans "You don't have any authentication devices associated with this account." %}</p>
 {% endif %}
-  <div class="col-5 col-start-large-8">
-    <aside class="p-table-of-contents">
-        <h3 class="p-heading--four">{% trans "Other actions" %}</h3>
-        <ul class="p-list--divided">
+  <div style="padding-top: 3em">
+        <h3 class="p-heading--four">{% trans "Useful links" %}</h3>
+        <ul class="p-list">
           <li class="p-list__item"><a href="{% url 'device-help' %}">{% trans "Report a lost or stolen device" %}</a></li>
           <li class="p-list__item">{% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}<a href="{{ 2FFAQ }}">2-factor authentication FAQ</a>{% endblocktrans %}</li>
         </ul>
-    </aside>
   </div>
 </div>
 {% endblock %}
diff --git a/src/webui/templates/registration/twofactor.html b/src/webui/templates/registration/twofactor.html
index 83bfade..a638c24 100644
--- a/src/webui/templates/registration/twofactor.html
+++ b/src/webui/templates/registration/twofactor.html
@@ -19,14 +19,12 @@
   <div id="auth" class="col-6">
     {% if form %}
     {% if twofactor_nag %}
-    <div class="p-notification--caution">
+    <div class="p-notification">
       <p class="p-notification__response">
-        <span class="p-notification__status">{% trans "Did You Know?" %}</span>
-        {% trans "You can use one of the codes from your printed backup." %}
-        {% trans "Why not give it a try? This also helps ensure your backup codes are handy." %}
-        {% trans "If you prefer not to, you can use your primary device, and we will remind you again in a few weeks." %}
-        <br>
         <br>
+        <span class="p-notification__status">
+        {% trans "Remember to always have your back up device at hand." %}
+        </span>
         {% if twofactor_last_nag %}
         {% if backup_device_last_use and not multiple_devices %}
         {% blocktrans with last_use=backup_device_last_use|timesince %}You haven't used your backup device in {{ last_use }}.{% endblocktrans %}
@@ -80,6 +78,7 @@
         {% endif %}
         {% csrf_token %}
         {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
+        <p class='p-form-help-text'>You can also use a code from your printed backup.</p>
         <button type="submit" class="p-button--positive u-no-margin--bottom" name="continue" data-qa-id="auth_button">{% trans "Authenticate" %}</button>
       </form>
     </div>
diff --git a/src/webui/tests/test_views_devices.py b/src/webui/tests/test_views_devices.py
index d81a8b1..32e1661 100644
--- a/src/webui/tests/test_views_devices.py
+++ b/src/webui/tests/test_views_devices.py
@@ -252,7 +252,7 @@ class DeviceVerifyViewTestCase(DeviceViewsTestCaseBase):
         # Continue button is shown
         buttons = tree.find("[name='continue']")
         self.assertEqual(len(buttons), 1)
-        self.assertEqual(buttons[0].text, "Continue")
+        self.assertEqual(buttons[0].text, "Everything looks OK, continue")
 
     def test_device_list_device_never_used(self):
         self.account.twofactor_required = True
diff --git a/src/webui/tests/test_views_ui.py b/src/webui/tests/test_views_ui.py
index 044d52f..54d9ac6 100644
--- a/src/webui/tests/test_views_ui.py
+++ b/src/webui/tests/test_views_ui.py
@@ -2164,7 +2164,7 @@ class TwoFactorNagTestCase(BaseTwoFactorLoginTestCase):
         r = self.client.get(reverse('twofactor'))
         # Context should contain a directive to nag
         self.assertTrue(r.context.get('twofactor_nag'))
-        self.assertContains(r, "backup codes")
+        self.assertContains(r, "back up device at hand")
 
     @switches(TWOFACTOR_BACKUP_NAG=True)
     def test_check_view_does_not_nag_if_no_paper_backup(self):
@@ -2179,8 +2179,8 @@ class TwoFactorNagTestCase(BaseTwoFactorLoginTestCase):
         r = self.client.get(reverse('twofactor'))
         # Context should NOT contain a directive to nag
         self.assertFalse(r.context.get('twofactor_nag'))
-        # and response should not mention backup codes
-        self.assertNotContains(r, "backup codes")
+        # and response should not mention backup device at hand
+        self.assertNotContains(r, "back up device at hand")
 
     def test_check_view_success_updates_last_nag_and_used_device(self):
         # If the user has been nagged before and needs to be nagged again