Journalist Interface: Show additional informations for reset buttons

Shows explanatory text using tooltips above the buttons in Reset authenticator buttons thus reducing the button label texts.
freedomofpress · Apr 17, 2018 · d0918f2 · d0918f2
1 parent 84f2fd9
commit d0918f2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/securedrop/journalist_templates/edit_account.html b/securedrop/journalist_templates/edit_account.html
@@ -72,7 +72,7 @@ <h2>{{ gettext('Reset Two-Factor Authentication') }}</h2>
   {% set hotp_reset_url = url_for('account.reset_two_factor_hotp') %}
 {% endif %}
 
-{% macro twofa_reset(user, reset_url, type, button_text) %}
+{% macro twofa_reset(user, reset_url, type, tooltip_text, button_text) %}
 {% if user %}
   {% set username = user.username %}
 {% else %}
@@ -83,12 +83,11 @@ <h2>{{ gettext('Reset Two-Factor Authentication') }}</h2>
   <input name="uid" type="hidden" value="{{ user.id }}">
   {% endif %}
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <button class="sd-button" id="button-reset-two-factor-{{ type }}" type="submit" class="pull-right"><i class="fas fa-sync"></i> {{ button_text }}</button>
+  <button class="sd-button" id="button-reset-two-factor-{{ type }}" tooltip="{{ tooltip_text }}" type="submit" class="pull-right"><i class="fas fa-sync"></i> {{ button_text }}</button>
 </form>
 {%- endmacro %}
 
-{{ twofa_reset(user, totp_reset_url, "totp", gettext("RESET TWO-FACTOR AUTHENTICATION (APP)"))}}
-<br>
-{{ twofa_reset(user, hotp_reset_url, "hotp", gettext("RESET TWO-FACTOR AUTHENTICATION (HARDWARE TOKEN)"))}}
+{{ twofa_reset(user, totp_reset_url, "totp", gettext("Reset 2FA for mobile apps such as FreeOTP or Google Authenticator"), gettext("RESET APP TOKEN"))}}
+{{ twofa_reset(user, hotp_reset_url, "hotp", gettext("Reset 2FA for hardware tokens like Yubikey"), gettext("RESET HARDWARE TOKEN"))}}
 
 {% endblock %}
diff --git a/securedrop/sass/_base.sass b/securedrop/sass/_base.sass
@@ -27,6 +27,8 @@
 @import modules/text-link
 // Some kind of button possibly sd=standard button. Belongs in button module?
 @import modules/sd-button
+// Tooltips for showing informations
+@import modules/tooltip
 //variation on button for select all / none. In journalist interface only?
 @import modules/select
 // Pull - Quick layout helper classes
@@ -115,6 +117,7 @@
   +doc-check
   +text-link
   +sd-button
+  +tooltip
   +select
   +pull
   +header

diff --git a/securedrop/sass/journalist.sass b/securedrop/sass/journalist.sass
@@ -98,3 +98,6 @@ button.small-danger, a.btn.small-danger, .btn.small-danger
 
 .journalist-reply__input
   max-width: 700px
+
+.reset-two-factor
+  display: inline-block