2fa redesign (#7677)

* ['enable 2fa' page] redesigned it

* ['2fa - backup tokens' page] redesigned it.

* ['disable 2fa' page] redesigned it

media/css/seahub.css

@@ -2856,8 +2856,31 @@ a.sf-popover-item {
 }
 
 /* two-factor-auth */
+.tfa-panel {
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: 0 0 10px rgba(0,0,0, 0.1);
+  padding: 30px 25px 40px;
+  width: 336px;
+  margin: 5rem auto;
+}
+
+.tfa-panel .hd {
+  font-size: 1rem;
+  text-align: center;
+}
+
+.tfa-panel .con {
+  font-size: .875rem;
+  color: #666;
+}
+
+.tfa-panel .qr-code-image {
+  margin: 6px 0 20px;
+}
+
 .two-factor-auth-wizard-btns {
-  margin-top: 8px;
+  margin-top: 1.25rem;
 }
 
 .two-factor-auth-backup-token-list {
@@ -2868,15 +2891,6 @@ a.sf-popover-item {
   margin-bottom: 15px;
 }
 
-#id_generator-token,
-#id_sms-number,
-#id_validation-token {
-  /* token input */
-  width: 260px;
-  padding: 2px 3px;
-  border-radius: 2px;
-}
-
 /* terms & conditions */
 #tc-content {
   padding-top: 0;

seahub/two_factor/templates/two_factor/_wizard_actions.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
 <div class="two-factor-auth-wizard-btns">
-<a href="{{ cancel_url }}" class="sf-btn-link">{% trans "Cancel" %}</a>
+<button type="submit" class="btn-block btn btn-primary">{% trans "Next" %}</button>
-<button type="submit">{% trans "Next" %}</button>
+<a href="{{ cancel_url }}" class="btn-block btn btn-secondary mt-3">{% trans "Cancel" %}</a>
 </div>

seahub/two_factor/templates/two_factor/core/backup_tokens.html

@@ -2,8 +2,8 @@
 {% load i18n %}
 
 {% block main_content %}
-<div class="new-narrow-panel">
+<div class="tfa-panel">
-  <h2 class="hd">{% trans "Backup Tokens" %}</h2>
+  <h2 class="hd fw-normal mb-4">{% trans "Backup Tokens" %}</h2>
   <div class="con">
     <p>{% blocktrans %}Backup tokens can be used when your primary and backup
     phone numbers aren't available. The backup tokens below can be used
@@ -22,9 +22,9 @@
     <p>{% trans "You don't have any backup codes yet." %}</p>
     {% endif %}
 
-  <form method="post">{% csrf_token %}{{ form }}
+    <form method="post" class="mt-5">{% csrf_token %}{{ form }}
-      <a href="{{ SITE_ROOT }}" class="sf-btn-link">{% trans "Back" %}</a>
+      <button type="submit" class="btn btn-primary btn-block">{% trans "Generate Tokens" %}</button>
-      <button type="submit" style="margin-top:5px;">{% trans "Generate Tokens" %}</button>
+      <a href="{{ SITE_ROOT }}profile/" class="btn btn-secondary btn-block mt-3">{% trans "Back" %}</a>
     </form>
   </div>
 </div>

seahub/two_factor/templates/two_factor/core/setup.html

@@ -2,22 +2,21 @@
 {% load i18n %}
 
 {% block main_content %}
-<div class="new-narrow-panel">
+<div class="tfa-panel text-center">
-    <h2 class="hd">{% trans "Enable Two-Factor Authentication" %}</h2>
+    <h2 class="hd fw-normal mb-4">{% trans "Enable Two-Factor Authentication" %}</h2>
     <div class="con">
   {% if wizard.steps.current == 'welcome' %}
     <p>You are about to take your account security to the
         next level. Follow the steps in this wizard to enable two-factor
         authentication.</p>
   {% elif wizard.steps.current == 'method' %}
-    <p>Please select which authentication method you would
+    <p>Please select which authentication method you would like to use.</p>
-        like to use.</p>
   {% elif wizard.steps.current == 'generator' %}
     <p>{% blocktrans %}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.
         {% endblocktrans %}</p>
-    <img src="{{ QR_URL }}" alt="QR Code" />
+    <img src="{{ QR_URL }}" alt="QR Code" class="qr-code-image" />
   {% elif wizard.steps.current == 'sms' %}
     <p>Please enter the phone number you wish to receive the
       text messages on. This number will be validated in the next step.
@@ -28,11 +27,9 @@
   {% elif wizard.steps.current == 'validation' %}
     {% if challenge_succeeded %}
       {% if device.method == 'call' %}
-        <p>We are calling your phone right now, please enter the
+        <p>We are calling your phone right now, please enter the digits you hear.</p>
-          digits you hear.</p>
       {% elif device.method == 'sms' %}
-        <p>We sent you a text message, please enter the tokens we
+        <p>We sent you a text message, please enter the tokens we sent.</p>
-          sent.</p>
       {% endif %}
     {% else %}
       <p class="alert alert-warning" role="alert">We've
@@ -57,6 +54,8 @@
 
 {% block extra_script %}
 <script type="text/javascript">
-$('input[type="text"], input[type="number"]', $('.new-narrow-panel')).trigger('focus');
+$('input[type="text"], input[type="number"]', $('.tfa-panel')).trigger('focus');
+$('#id_generator-token').prev().addClass('d-none');
+$('#id_generator-token').addClass('form-control m-0').attr('placeholder', '{% trans "Token" %}');
 </script>
 {% endblock %}

seahub/two_factor/templates/two_factor/profile/disable.html

@@ -2,14 +2,13 @@
 {% load i18n %}
 
 {% block main_content %}
-<div class="new-narrow-panel">
+<div class="tfa-panel text-center">
-    <h2 class="hd">{% trans "Disable Two-Factor Authentication" %}</h2>
+  <h2 class="hd fw-normal mb-4">{% trans "Disable Two-Factor Authentication" %}</h2>
   <div class="con">
-        <p>{% blocktrans %}You are about to disable two-factor authentication. This
+    <p>{% blocktrans %}You are about to disable two-factor authentication. This compromises your account security, are you sure?{% endblocktrans %}</p>
-    compromises your account security, are you sure?{% endblocktrans %}</p>
+    <form method="post" action="" class="mt-5">{% csrf_token %}
-        <form method="post" action="">{% csrf_token %}
+      <button type="submit" class="btn btn-primary btn-block">{% trans "Disable" %}</button>
-            <button type="submit" class="submit">{% trans "Disable" %}</button>
+      <a href="{% url 'edit_profile'%}" class="btn btn-secondary btn-block mt-3">{% trans "Cancel" %}</a>
-            <a href="{% url 'edit_profile'%}" class="sf-btn-link">{% trans "Cancel" %}</a>
     </form>
   </div>
 </div>