From fbed9edeb8652fe972c77fdb053309994fb2c632 Mon Sep 17 00:00:00 2001
From: "J.-S. Caux" <J.S.Caux@uva.nl>
Date: Sat, 6 Apr 2019 06:51:28 +0200
Subject: [PATCH] Clean up 2FA pages
---
scipost/forms.py | 2 +
.../scipost/totpdevice_confirm_delete.html | 4 +-
.../templates/scipost/totpdevice_form.html | 65 ++++++++++---------
.../templates/scipost/totpdevice_list.html | 30 +++++----
4 files changed, 57 insertions(+), 44 deletions(-)
diff --git a/scipost/forms.py b/scipost/forms.py
index ab756afd3..cd1dcce58 100644
--- a/scipost/forms.py
+++ b/scipost/forms.py
@@ -425,6 +425,8 @@ class TOTPDeviceForm(forms.ModelForm):
self.current_user = kwargs.pop('current_user')
super().__init__(*args, **kwargs)
self.initial['token'] = pyotp.random_base32()
+ self.fields['name'].widget.attrs.update(
+ {'placeholder': 'Your choice of a simple memorable name for your device'})
@property
def secret_key(self):
diff --git a/scipost/templates/scipost/totpdevice_confirm_delete.html b/scipost/templates/scipost/totpdevice_confirm_delete.html
index c3e54f375..1ac72c616 100644
--- a/scipost/templates/scipost/totpdevice_confirm_delete.html
+++ b/scipost/templates/scipost/totpdevice_confirm_delete.html
@@ -6,7 +6,7 @@
{% block breadcrumb_items %}
{{block.super}}
- <a href="{% url 'scipost:totp' %}" class="breadcrumb-item">Two factor authentication</a>
+ <a href="{% url 'scipost:totp' %}" class="breadcrumb-item">Two-factor authentication</a>
<span class="breadcrumb-item">Delete {{ object.name }}</span>
{% endblock %}
@@ -15,7 +15,7 @@
<div class="row">
<div class="col-md-12">
- <h1 class="highlight">Delete two factor authentication device</h1>
+ <h1 class="highlight">Delete two-factor authentication device</h1>
<br>
<form method="post">
{% csrf_token %}
diff --git a/scipost/templates/scipost/totpdevice_form.html b/scipost/templates/scipost/totpdevice_form.html
index b98cc825d..d7a749846 100644
--- a/scipost/templates/scipost/totpdevice_form.html
+++ b/scipost/templates/scipost/totpdevice_form.html
@@ -6,7 +6,7 @@
{% block breadcrumb_items %}
{{block.super}}
- <a href="{% url 'scipost:totp' %}" class="breadcrumb-item">Two factor authentication</a>
+ <a href="{% url 'scipost:totp' %}" class="breadcrumb-item">Two-factor authentication</a>
<span class="breadcrumb-item">New device</span>
{% endblock %}
@@ -15,35 +15,40 @@
<div class="row">
<div class="col-md-12">
- <h1 class="highlight">Set up two factor authentication device</h1>
-
- <p>
- An authenticator app lets you generate time dependent security codes on your phone. This adds an important layer of security to your SciPost account. If you don’t already have one, please install a mobile authentication app, for example:
- <ul>
- <li><a href="http://support.google.com/accounts/bin/answer.py?hl=en&answer=1066447" target="_blank">Google Authenticator</a> (Android/iOS)</li>
- <li><a href="http://guide.duosecurity.com/third-party-accounts" target="_blank">Duo Mobile</a> (Android/iOS)</li>
- <li><a href="http://aka.ms/dbauthenticator" target="_blank">Authenticator</a> (Windows Phone 7)</li>
- </ul>
- <br>
- To configure your authenticator app:
- </p>
- <ul>
- <li>Add a new time-based token.</li>
- <li>Use your app to scan the barcode below, or <a href="javascript:;" data-toggle="toggle" data-target="#secret-key">enter your secret key manually</a>.</li>
- </ul>
- <form method="post">
- {% csrf_token %}
- <div class="text-center">
- <img id="qr" data-toggle="qr" data-qr-value="{{ form.get_QR_data }}">
- <h3 class="p-3" id="secret-key" style="display: none;"><code>{{ form.secret_key }}</code></h3>
- </div>
- <p>
- Enter the security code generated by your mobile authenticator app to make sure it’s configured correctly.
- </p>
-
- {{ form|bootstrap }}
- <input type="submit" class="btn btn-primary" value="Add device" />
- </form>
+ <h1 class="highlight">Set up a device for two-factor authentication</h1>
+ <p>First of all, make sure you have an authenticator app installed on your mobile device. We recommend the following (many others are possible):</p>
+ <ul>
+ <li><a href="http://support.google.com/accounts/bin/answer.py?hl=en&answer=1066447" target="_blank">Google Authenticator</a> (Android/iOS)</li>
+ <li><a href="http://guide.duosecurity.com/third-party-accounts" target="_blank">Duo Mobile</a> (Android/iOS)</li>
+ <li><a href="http://aka.ms/dbauthenticator" target="_blank">Authenticator</a> (Windows Phone 7)</li>
+ </ul>
+ <br>
+ <p>
+ To configure two-factor authentication with this device:
+ </p>
+ <ul>
+ <li>Go to mobile authentication app on your device, and activate the function to add a new time-based token.</li>
+ <li>
+ Use your device's camera to scan the barcode below, or <a href="javascript:;" data-toggle="toggle" data-target="#secret-key">enter your secret key manually</a>.
+ <br/>
+ Your mobile device's authenticator app will then generate a security code.
+ <br/>
+ Enter this code in the form here under (also choosing a memorable name for your device).
+ <br/>
+ Clicking on the "Add device" button then completes the 2FA configuration of your account.
+ <br/>
+ <strong><em>Next time you log in, make sure you have your device ready at hand!</em></strong>
+ <form method="post">
+ {% csrf_token %}
+ <div class="text-center">
+ <img id="qr" data-toggle="qr" data-qr-value="{{ form.get_QR_data }}">
+ <h3 class="p-3" id="secret-key" style="display: none;"><code>{{ form.secret_key }}</code></h3>
+ </div>
+ {{ form|bootstrap }}
+ <input type="submit" class="btn btn-primary" value="Add device" />
+ </form>
+ </li>
+ </ul>
</div>
</div>
diff --git a/scipost/templates/scipost/totpdevice_list.html b/scipost/templates/scipost/totpdevice_list.html
index d76344373..320b16e5a 100644
--- a/scipost/templates/scipost/totpdevice_list.html
+++ b/scipost/templates/scipost/totpdevice_list.html
@@ -1,28 +1,34 @@
{% extends 'scipost/_personal_page_base.html' %}
-{% block pagetitle %}: Two factor authentication{% endblock pagetitle %}
+{% block pagetitle %}: Two-factor authentication{% endblock pagetitle %}
{% load bootstrap %}
{% block breadcrumb_items %}
{{block.super}}
- <span class="breadcrumb-item">Two factor authentication</span>
+ <span class="breadcrumb-item">Two-factor authentication</span>
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-12">
- <h1 class="highlight">Two factor authentication</h1>
+ <h1 class="highlight">Two-factor authentication</h1>
<p>
- We strongly recommend to use two factor authentication that adds an extra layer of protection to your SciPost account.
- You will need a mobile device capable or running a mobile authentication application, for example:
- <ul>
- <li><a href="http://support.google.com/accounts/bin/answer.py?hl=en&answer=1066447" target="_blank">Google Authenticator</a> (Android/iOS)</li>
- <li><a href="http://guide.duosecurity.com/third-party-accounts" target="_blank">Duo Mobile</a> (Android/iOS)</li>
- <li><a href="http://aka.ms/dbauthenticator" target="_blank">Authenticator</a> (Windows Phone 7)</li>
- </ul>
- <a href="{% url 'scipost:totp_create' %}">Set up a new two factor authentication device</a>
+ Two-factor authentication (2FA, see <a href="https://en.wikipedia.org/wiki/Multi-factor_authentication" target="_blank">Wikipedia</a>) adds an important layer of security to your SciPost account: the logging in procedure verifies something your <em>know</em> (your password) and something your <em>possess</em> (your mobile device). Our 2FA setup makes it nigh impossible for your account to be hijacked. We highly recommend it to all our users.
+ </p>
+ <p>
+ Our implementation requires you to use an authenticator app on your mobile device, which generates time-dependent security codes on your phone. Such a code is then required together with your password upon logging in (the codes get renewed at short time intervals, so don't procrastinate when logging in). If you don’t already have one, you will need to install a mobile authentication app, for example:
+ <ul>
+ <li><a href="http://support.google.com/accounts/bin/answer.py?hl=en&answer=1066447" target="_blank">Google Authenticator</a> (Android/iOS)</li>
+ <li><a href="http://guide.duosecurity.com/third-party-accounts" target="_blank">Duo Mobile</a> (Android/iOS)</li>
+ <li><a href="http://aka.ms/dbauthenticator" target="_blank">Authenticator</a> (Windows Phone 7)</li>
+ </ul>
+ (many other choices are available, depending on your device's operating system).
+ </p>
+ <p>
+ Ready to go?
+ <a class="btn btn-primary m-1 px-1 py-0" href="{% url 'scipost:totp_create' %}">Click here to set up a new two-factor authentication device</a>
</p>
<h3 class="mt-5 mb-3">Your devices</h3>
@@ -48,7 +54,7 @@
<td colspan="3">
<div class="py-2">
<i class="fa fa-exclamation-triangle text-danger"></i>
- You are not using two factor authentication yet. We strongly recommend to <a href="{% url 'scipost:totp_create' %}">set up two factor authentication</a>.
+ You are not yet using two-factor authentication. We strongly recommend you to <a href="{% url 'scipost:totp_create' %}">set it up</a>.
</div>
</td>
</tr>
--
GitLab