UI refinements for Two-Factor authentication setup

hypha/apply/users/templates/two_factor/_wizard_actions.html

@@ -3,13 +3,19 @@
 {% if wizard.steps.current == 'token' %}
     {% trans "Login" as button_text %}
 {% elif wizard.steps.current == 'generator' %}
-    {% trans "Enable Two-Factor Authentication" as button_text %}
+    {% trans "Next" as button_text %}
+{% elif wizard.steps.current == 'welcome' %}
+    {% trans "I've installed a 2FA App" as button_text %}
 {% else %}
     {% trans "Next" as button_text %}
 {% endif %}
 
 <button type="submit" class="button button--primary">{{ button_text }}</button>
 
-{% if cancel_url %}
-    <a href="{% url 'users:account' %}" class="link link--bold link--left-space">{% trans "Cancel" %}</a>
-{% endif %}
+<script>
+var lbl = document.querySelector("label[for=id_generator-token]");
+if (lbl != null) {
+    lbl.textContent = "{% trans "Verification code" %}:";
+}
+
+</script>

hypha/apply/users/templates/two_factor/core/backup_tokens.html

@@ -2,25 +2,43 @@
 {% load i18n users_tags %}
 
 {% block content %}
-  <p><a href="{% url 'users:account'%}"
-       class="btn btn-link">{% trans "Back to account" %}</a></p>
+  <p class="actions actions-header"><a href="{% url 'users:account' %}" class="link link--bold">{% trans "Back to Account" %}</a></p>
   <h1>{% block title %}{% trans "Backup Codes" %}{% endblock %}</h1>
-  <p>{% blocktrans trimmed %}These codes should be kept in a safe,
-      private place for when you need them. When they are used up,
-      you can generate a new set of backup codes.{% endblocktrans %}</p>
+  <p>{% blocktrans trimmed %}Each of the code can be used only once. When they are used up, you can generate a new set of backup codes.{% endblocktrans %}</p>
 
   {% if device.token_set.count %}
-    <ul>
-      {% for token in device.token_set.all %}
-        <li>{{ token.token }}</li>
-      {% endfor %}
-    </ul>
-    <p>{% blocktrans %}You should now download, or print these codes,
-        and keep them somewhere safe.{% endblocktrans %}</p>
-    <form method="post">{% csrf_token %}{{ form }}
+<textarea readonly cols="8" rows="{{ device.token_set.count }}" id="list-backup-tokens">{% for token in device.token_set.all %}{{ token.token }}{% if not forloop.last %}&#013;&#010;{% endif %}{% endfor %}</textarea>
+    <p class="hide-print">{% blocktrans %}You should now print these codes or copy them to your
+       clipboard and store them in your password manager.{% endblocktrans %}</p>
+
+    <p class="hide-print">{% blocktrans %}Once done, then click next.{% endblocktrans %}</p>
+
+    <form method="post" class="actions actions-footer">{% csrf_token %}{{ form }}
+    <p>
+        <a href="#" class="btn btn-primary btn-print">{% trans "Print" %}</button>
         <button class="btn btn-primary" type="submit">{% trans "Regenerate Codes" %}</button>
-        <a class="btn btn-link link--left-space" href="data:text/plain;charset=UTF-8,{% tokens_text device.token_set.all %}" download="backup_codes.txt">
-        {% trans "Save Codes" %}</a>
+        <style>
+        @media print {
+            .header, .admin-bar, .actions, .hide-print {
+                display: none;
+            }
+        }
+        </style>
+        <script>
+        var el = $('#list-backup-tokens');
+        el.on("click", function (){
+            el.select();
+        });
+
+        $(".btn-print").on("click", function(e){
+            e.preventDefault();
+            window.print();
+        })
+
+        </script>
+    </p>
+        <a class="btn btn-link" href="#">{% trans "Next" %}</a>
+        {# <a class="btn btn-link link--left-space" href="data:text/plain;charset=UTF-8,{% tokens_text device.token_set.all %}" download="backup_codes.txt">{% trans "Save Codes" %}</a> #}
     </form>
   {% else %}
     <p>{% trans "You don't have any backup codes yet." %}</p>

hypha/apply/users/templates/two_factor/core/backup_tokens_password.html

@@ -2,16 +2,15 @@
 {% load i18n %}
 
 {% block content %}
-<p><a href="{% url 'users:account'%}"
-       class="btn btn-link">{% trans "Back to account" %}</a></p>
+  <p><a href="{% url 'users:account' %}" class="link link--bold">{% trans "Back to Account" %}</a></p>
   <h1>{% block title %}{% trans "Backup Codes" %}{% endblock %}</h1>
   <p>{% blocktrans trimmed %}If you loose your smartphone, or your Authenticator app is not available,
       you can use a backup code along with your username and password to login until you recover your smartphone.
       Each backup code can be used only once.
       </br>
       </br>
-      These codes should be kept in a secure, private place for when you need them.
-      When they are used up, you can generate a new set of backup codes.{% endblocktrans %}</p>
+      These codes should be kept in a secure, private place (print them or store them in your password manager)
+      for when you need them. When they are used up, you can generate a new set of backup codes.{% endblocktrans %}</p>
 <div class="wrapper wrapper--small wrapper--inner-space-medium">
     <form class="form" action="" method="POST" novalidate>
         {% if form.non_field_errors %}

hypha/apply/users/templates/two_factor/core/setup.html

@@ -2,19 +2,24 @@
 {% load i18n %}
 
 {% block content %}
+    {% if cancel_url %}
+    <p><a href="{% url 'users:account' %}" class="link link--bold">{% trans "Back to Account" %}</a></p>
+    {% endif %}
+
   <h1>{% block title %}{% trans "Two-Factor Authentication (2FA)" %}{% endblock %}</h1>
   {% if wizard.steps.current == 'welcome' %}
-    <p>{% blocktrans trimmed %}You are about to take your account security to the
-        next level.{% endblocktrans %}</p>
-    <p>{% blocktrans trimmed %}To start using 2FA, you need to install an Authenticator app on your smartphone or computer. With Safari on Apple devices you can also use a built in system.{% endblocktrans %}</p>
-    <p>{% blocktrans trimmed %}Install the app you choose then continue to Enable Two-Factor Authentication. {% endblocktrans %}</p>
+  <p>{% blocktrans trimmed %}2FA is an extra layer of security used to make sure that people trying to gain access to an
+    online account are who they say they are. We recommend using Authy or another
+    authenticator app.{% endblocktrans %}</p>
+    <p>{% blocktrans trimmed %}Please contact hello@opentech.fund if you have technical difficulty
+    enabling 2FA.{% endblocktrans %}</p>
   {% elif wizard.steps.current == 'method' %}
     <p>{% blocktrans trimmed %}Please select which authentication method you would
         like to use.{% endblocktrans %}</p>
   {% elif wizard.steps.current == 'generator' %}
-    <p>{% blocktrans trimmed %}To start using a token generator, please use your
-        smartphone to scan the QR code below. For example, use Google
-        Authenticator. Then, enter the token generated by the app.
+    <p>{% blocktrans trimmed %}2FA requires a verification code to pair your smartphone with your account.
+        {% endblocktrans %}</p>
+  <p>{% blocktrans trimmed %}<strong>Step 1:</strong> Open the Authencator app on your phone and scan the QR code displayed below.
         {% endblocktrans %}</p>
     <p><img src="{{ QR_URL }}" alt="QR Code" class="bg-white" width="200" height="200" /></p>
     <details>
@@ -22,6 +27,7 @@
       <p>{% trans "For advanced users, here is the otpauth url in string format." %}</p>
       <p><a href="{{ otpauth_url }}">{{ otpauth_url }}</a></p>
     </details>
+    <p>{% blocktrans trimmed %}<strong>Step 2:</strong> Enter the 6-digit verification code generated by the app below.{% endblocktrans %}</p>
   {% elif wizard.steps.current == 'sms' %}
     <p>{% blocktrans trimmed %}Please enter the phone number you wish to receive the
       text messages on. This number will be validated in the next step.

hypha/apply/users/templates/two_factor/core/setup_complete.html

@@ -2,6 +2,9 @@
 {% load i18n %}
 
 {% block content %}
+  <p><a href="{% url 'users:account' %}" class="link link--bold">{% trans "Back to Account" %}</a></p>
+
+
   <h1>{% block title %}{% trans "Two-Factor Authentication(2FA)" %}{% endblock %}</h1>
 
   <p>{% blocktrans trimmed %}Congratulations, you've successfully enabled two-factor
@@ -11,7 +14,6 @@
 
   {% if not phone_methods %}
         <a href="{% url 'users:backup_tokens_password' %}" class="btn btn-link">{% trans "Show Codes" %}</a>
-        <a href="{% url 'users:account' %}" class="link link--bold link--left-space">{% trans "Back to Account" %}</a>
   {% else %}
     <p>{% blocktrans trimmed %}However, it might happen that you don't have access to
       your primary token device. To enable account recovery, add a phone

hypha/static_src/src/sass/apply/components/_admin-bar.scss

@@ -24,9 +24,7 @@
     }
 
     &__heading {
-        &:only-child {
-            margin-bottom: 0;
-        }
+        margin-bottom: 0;
     }
 
     &__meta {

hypha/static_src/src/sass/apply/components/_two-factor.scss

@@ -19,7 +19,17 @@
 
 // 2FA token label font size
 label[for='id_generator-token'] {
-    font-size: 20px;
+    font-size: 1.2em;
+}
+
+#list-backup-tokens {
+    border: #ccc;
+    padding: 1em;
+    line-height: 1.4em;
+    font-size: larger;
+    font-family: monospace;
+    resize: none;
+    font-style: bold;
 }
 
 .d-none {
@@ -34,10 +44,10 @@ label[for='id_generator-token'] {
 // stylelint-disable property-no-vendor-prefix, selector-id-pattern, selector-max-id
 #id_generator-token {
     -moz-appearance: textfield;
-    border: 3px solid $color--dark-blue;
+    // border: 3px solid $color--dark-blue;
     line-height: 1.5;
     width: 8ch;
-    padding: 5px;
+    padding: 3px;
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {