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,9 +54,11 @@
 </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">
-            {% block page %}
+            <div class="pf-u-w-75">
-            {% endblock %}
+                {% block page %}
+                {% endblock %}
+            </div>
         </div>
     </section>
 </main>

passbook/core/templates/user/settings.html

@@ -3,28 +3,26 @@
 {% 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">
-        <div class="pf-c-card__header pf-c-title pf-m-md">
+        {% trans 'Update details' %}
-            <h1>{% trans 'Update details' %}</h1>
+    </div>
-        </div>
+    <div class="pf-c-card__body">
-        <div class="pf-c-card__body">
+        <form action="" method="post" class="pf-c-form pf-m-horizontal">
-            <form action="" method="post" class="pf-c-form pf-m-horizontal">
+            {% include 'partials/form_horizontal.html' with form=form %}
-                {% include 'partials/form_horizontal.html' with form=form %}
+            {% block beneath_form %}
-                {% block beneath_form %}
+            {% endblock %}
-                {% endblock %}
+            <div class="pf-c-form__group pf-m-action">
-                <div class="pf-c-form__group pf-m-action">
+                <div class="pf-c-form__horizontal-group">
-                    <div class="pf-c-form__horizontal-group">
+                    <div class="pf-c-form__actions">
-                        <div class="pf-c-form__actions">
+                        <input class="pf-c-button pf-m-primary" type="submit" value="{% trans 'Update' %}" />
-                            <input class="pf-c-button pf-m-primary" type="submit" value="{% trans 'Update' %}" />
+                        {% if unenrollment_enabled %}
-                            {% if unenrollment_enabled %}
+                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_flows:default-unenrollment' %}?back={{ request.get_full_path }}">{% trans "Delete account" %}</a>
-                            <a class="pf-c-button pf-m-danger" href="{% url 'passbook_flows:default-unenrollment' %}?back={{ request.get_full_path }}">{% trans "Delete account" %}</a>
+                        {% endif %}
-                            {% endif %}
-                        </div>
                     </div>
                 </div>
-            </form>
+            </div>
-        </div>
+        </form>
     </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>
+        <ul class="pb-otp-tokens">
-            {% blocktrans with state=state|yesno:"Enabled,Disabled" %}
+            {% for token in tokens %}
-            Status: {{ state }}
+            <li>{{ token.token }}</li>
-            {% endblocktrans %}
+            {% endfor %}
-            {% if state %}
+        </ul>
-            <i class="pf-icon pf-icon-ok"></i>
+        <a href="{% url 'passbook_stages_otp_static:disable' %}" class="pf-c-button pf-m-danger">{% trans "Disable Static Tokens" %}</a>
-            {% 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>
     </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);