stages/otp_*: update user setting design

e2e/test_provider_saml.py

@@ -128,6 +128,7 @@ class TestProviderSAML(SeleniumTestCase):
                 By.XPATH, "/html/body/div[2]/div/main/div/form/div[2]/p[1]"
             ).text,
         )
+        sleep(1)
         self.driver.find_element(By.CSS_SELECTOR, "[type=submit]").click()
         self.wait_for_url("http://localhost:9009/")
         self.assertEqual(

passbook/core/templates/user/base.html

@@ -54,10 +54,12 @@
 </div>
 <main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
     <section class="pf-c-page__main-section">
-        <div class="pf-l-split pf-m-gutter">
+        <div class="pf-u-display-flex pf-u-justify-content-center">
+            <div class="pf-u-w-75">
                 {% block page %}
                 {% endblock %}
             </div>
+        </div>
     </section>
 </main>
 {% endblock %}

passbook/core/templates/user/settings.html

@@ -3,10 +3,9 @@
 {% load i18n %}
 
 {% block page %}
-<div class="pf-l-split__item">
-    <div class="pf-c-card">
+<div class="pf-c-card">
     <div class="pf-c-card__header pf-c-title pf-m-md">
-            <h1>{% trans 'Update details' %}</h1>
+        {% trans 'Update details' %}
     </div>
     <div class="pf-c-card__body">
         <form action="" method="post" class="pf-c-form pf-m-horizontal">
@@ -25,6 +24,5 @@
             </div>
         </form>
     </div>
-    </div>
 </div>
 {% endblock %}

passbook/stages/otp_static/templates/stages/otp_static/user_settings.html

@@ -6,26 +6,15 @@
 {% block page %}
 <div class="pf-c-card">
     <div class="pf-c-card__header pf-c-title pf-m-md">
-        {% trans "Time-based One-Time Passwords" %}
+        {% trans "Static One-Time Passwords" %}
     </div>
     <div class="pf-c-card__body">
-        <p>
-            {% blocktrans with state=state|yesno:"Enabled,Disabled" %}
-            Status: {{ state }}
-            {% endblocktrans %}
-            {% if state %}
-            <i class="pf-icon pf-icon-ok"></i>
-            {% else %}
-            <i class="pf-icon pf-icon-error-circle-o"></i>
-            {% endif %}
-        </p>
-        <p>
-            {% if not state %}
-            <a href="{% url 'passbook_stages_otp_time:otp-enable' %}" class="btn btn-success btn-sm">{% trans "Enable Time-based OTP" %}</a>
-            {% else %}
-            <a href="{% url 'passbook_stages_otp_time:disable' %}" class="btn btn-danger btn-sm">{% trans "Disable Time-based OTP" %}</a>
-            {% endif %}
-        </p>
+        <ul class="pb-otp-tokens">
+            {% for token in tokens %}
+            <li>{{ token.token }}</li>
+            {% endfor %}
+        </ul>
+        <a href="{% url 'passbook_stages_otp_static:disable' %}" class="pf-c-button pf-m-danger">{% trans "Disable Static Tokens" %}</a>
     </div>
 </div>
 {% endblock %}

passbook/stages/otp_static/views.py

@@ -5,7 +5,7 @@ from django.http import HttpRequest, HttpResponse
 from django.shortcuts import redirect
 from django.views import View
 from django.views.generic import TemplateView
-from django_otp.plugins.otp_static.models import StaticDevice
+from django_otp.plugins.otp_static.models import StaticToken, StaticDevice
 
 from passbook.audit.models import Event, EventAction
 
@@ -21,7 +21,8 @@ class UserSettingsView(LoginRequiredMixin, TemplateView):
         static_devices = StaticDevice.objects.filter(
             user=self.request.user, confirmed=True
         )
-        kwargs["state"] = static_devices.exists()
+        if static_devices.exists():
+            kwargs["tokens"] = StaticToken.objects.filter(device=static_devices.first())
         return kwargs
 
 

passbook/stages/otp_time/templates/stages/otp_time/user_settings.html

@@ -21,9 +21,9 @@
         </p>
         <p>
             {% if not state %}
-            <a href="{% url 'passbook_stages_otp_time:otp-enable' %}" class="btn btn-success btn-sm">{% trans "Enable Time-based OTP" %}</a>
+            <a href="{% url 'passbook_stages_otp_time:otp-enable' %}" class="pf-c-button pf-m-primary">{% trans "Enable Time-based OTP" %}</a>
             {% else %}
-            <a href="{% url 'passbook_stages_otp_time:disable' %}" class="btn btn-danger btn-sm">{% trans "Disable Time-based OTP" %}</a>
+            <a href="{% url 'passbook_stages_otp_time:disable' %}" class="pf-c-button pf-m-danger">{% trans "Disable Time-based OTP" %}</a>
             {% endif %}
         </p>
     </div>

passbook/static/static/passbook/pf.css

@@ -224,6 +224,7 @@ input[data-is-monospace] {
     columns: 2;
     -webkit-columns: 2;
     -moz-columns: 2;
+    margin-left: var(--pf-global--spacer--xs);
 }
 .pb-otp-tokens li {
     font-size: var(--pf-global--FontSize--2xl);