From ce2230f774fa4283af4f2d6102f27c2b361c0ee2 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 30 Jun 2020 21:23:37 +0200
Subject: [PATCH] stages/otp_*: update user setting design

---
 e2e/test_provider_saml.py                     |  1 +
 passbook/core/templates/user/base.html        |  8 ++--
 passbook/core/templates/user/settings.html    | 38 +++++++++----------
 .../stages/otp_static/user_settings.html      | 25 ++++--------
 passbook/stages/otp_static/views.py           |  5 ++-
 .../stages/otp_time/user_settings.html        |  4 +-
 passbook/static/static/passbook/pf.css        |  1 +
 7 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/e2e/test_provider_saml.py b/e2e/test_provider_saml.py
index 197f244f1..de2724b5f 100644
--- a/e2e/test_provider_saml.py
+++ b/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(
diff --git a/passbook/core/templates/user/base.html b/passbook/core/templates/user/base.html
index 944684480..3ee882c5a 100644
--- a/passbook/core/templates/user/base.html
+++ b/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">
-            {% block page %}
-            {% endblock %}
+        <div class="pf-u-display-flex pf-u-justify-content-center">
+            <div class="pf-u-w-75">
+                {% block page %}
+                {% endblock %}
+            </div>
         </div>
     </section>
 </main>
diff --git a/passbook/core/templates/user/settings.html b/passbook/core/templates/user/settings.html
index 5e752f935..18b5b9431 100644
--- a/passbook/core/templates/user/settings.html
+++ b/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__header pf-c-title pf-m-md">
-            <h1>{% trans 'Update details' %}</h1>
-        </div>
-        <div class="pf-c-card__body">
-            <form action="" method="post" class="pf-c-form pf-m-horizontal">
-                {% include 'partials/form_horizontal.html' with form=form %}
-                {% block beneath_form %}
-                {% endblock %}
-                <div class="pf-c-form__group pf-m-action">
-                    <div class="pf-c-form__horizontal-group">
-                        <div class="pf-c-form__actions">
-                            <input class="pf-c-button pf-m-primary" type="submit" value="{% trans 'Update' %}" />
-                            {% 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>
-                            {% endif %}
-                        </div>
+<div class="pf-c-card">
+    <div class="pf-c-card__header pf-c-title pf-m-md">
+        {% trans 'Update details' %}
+    </div>
+    <div class="pf-c-card__body">
+        <form action="" method="post" class="pf-c-form pf-m-horizontal">
+            {% include 'partials/form_horizontal.html' with form=form %}
+            {% block beneath_form %}
+            {% endblock %}
+            <div class="pf-c-form__group pf-m-action">
+                <div class="pf-c-form__horizontal-group">
+                    <div class="pf-c-form__actions">
+                        <input class="pf-c-button pf-m-primary" type="submit" value="{% trans 'Update' %}" />
+                        {% 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>
+                        {% endif %}
                     </div>
                 </div>
-            </form>
-        </div>
+            </div>
+        </form>
     </div>
 </div>
 {% endblock %}
diff --git a/passbook/stages/otp_static/templates/stages/otp_static/user_settings.html b/passbook/stages/otp_static/templates/stages/otp_static/user_settings.html
index aa7b30cc0..ab443368a 100644
--- a/passbook/stages/otp_static/templates/stages/otp_static/user_settings.html
+++ b/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 %}
diff --git a/passbook/stages/otp_static/views.py b/passbook/stages/otp_static/views.py
index 3b3feb1ad..a73eeb0cf 100644
--- a/passbook/stages/otp_static/views.py
+++ b/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
 
 
diff --git a/passbook/stages/otp_time/templates/stages/otp_time/user_settings.html b/passbook/stages/otp_time/templates/stages/otp_time/user_settings.html
index aa7b30cc0..98f13e177 100644
--- a/passbook/stages/otp_time/templates/stages/otp_time/user_settings.html
+++ b/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>
diff --git a/passbook/static/static/passbook/pf.css b/passbook/static/static/passbook/pf.css
index d5a0992ec..cafeba240 100644
--- a/passbook/static/static/passbook/pf.css
+++ b/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);