From e29f60512466aa713f55a3cd1b764675656dccdf Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Tue, 8 Nov 2022 15:42:25 +0530
Subject: [PATCH] UI refinements for Two-Factor authentication setup
---
.../templates/two_factor/_wizard_actions.html | 14 ++++--
.../two_factor/core/backup_tokens.html | 48 +++++++++++++------
.../core/backup_tokens_password.html | 7 ++-
.../templates/two_factor/core/setup.html | 20 +++++---
.../two_factor/core/setup_complete.html | 4 +-
.../src/sass/apply/components/_admin-bar.scss | 4 +-
.../sass/apply/components/_two-factor.scss | 16 +++++--
7 files changed, 76 insertions(+), 37 deletions(-)
diff --git a/hypha/apply/users/templates/two_factor/_wizard_actions.html b/hypha/apply/users/templates/two_factor/_wizard_actions.html
index ff5a768b9..70e1a1458 100644
--- a/hypha/apply/users/templates/two_factor/_wizard_actions.html
+++ b/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>
diff --git a/hypha/apply/users/templates/two_factor/core/backup_tokens.html b/hypha/apply/users/templates/two_factor/core/backup_tokens.html
index f13936464..39f10e983 100644
--- a/hypha/apply/users/templates/two_factor/core/backup_tokens.html
+++ b/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 %}
{% 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>
diff --git a/hypha/apply/users/templates/two_factor/core/backup_tokens_password.html b/hypha/apply/users/templates/two_factor/core/backup_tokens_password.html
index ae3541f82..0a596a97a 100644
--- a/hypha/apply/users/templates/two_factor/core/backup_tokens_password.html
+++ b/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 %}
diff --git a/hypha/apply/users/templates/two_factor/core/setup.html b/hypha/apply/users/templates/two_factor/core/setup.html
index fc017180c..53e13768b 100644
--- a/hypha/apply/users/templates/two_factor/core/setup.html
+++ b/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.
diff --git a/hypha/apply/users/templates/two_factor/core/setup_complete.html b/hypha/apply/users/templates/two_factor/core/setup_complete.html
index 87bb043af..7f8cd1395 100644
--- a/hypha/apply/users/templates/two_factor/core/setup_complete.html
+++ b/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
diff --git a/hypha/static_src/src/sass/apply/components/_admin-bar.scss b/hypha/static_src/src/sass/apply/components/_admin-bar.scss
index a83ec93b6..f9a0d0812 100644
--- a/hypha/static_src/src/sass/apply/components/_admin-bar.scss
+++ b/hypha/static_src/src/sass/apply/components/_admin-bar.scss
@@ -24,9 +24,7 @@
}
&__heading {
- &:only-child {
- margin-bottom: 0;
- }
+ margin-bottom: 0;
}
&__meta {
diff --git a/hypha/static_src/src/sass/apply/components/_two-factor.scss b/hypha/static_src/src/sass/apply/components/_two-factor.scss
index e3e610778..4c12f210f 100644
--- a/hypha/static_src/src/sass/apply/components/_two-factor.scss
+++ b/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 {
--
GitLab