From c59c6aa728949646f435aca96d81a1fbd43e6305 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 30 Jun 2020 19:05:53 +0200
Subject: [PATCH] stages/*: minor UI updates, cleanup

---
 .../core/templates/login/form_with_user.html  |  3 ---
 passbook/stages/otp_static/apps.py            |  1 +
 passbook/stages/otp_static/forms.py           | 17 ++++++++++++---
 passbook/stages/otp_static/models.py          |  5 ++---
 passbook/stages/otp_validate/forms.py         |  2 +-
 passbook/stages/password/forms.py             |  2 +-
 passbook/static/static/passbook/pf.css        | 21 +++++++++++++++----
 7 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/passbook/core/templates/login/form_with_user.html b/passbook/core/templates/login/form_with_user.html
index bed72f78c..dfe6213a2 100644
--- a/passbook/core/templates/login/form_with_user.html
+++ b/passbook/core/templates/login/form_with_user.html
@@ -5,9 +5,6 @@
 
 {% block above_form %}
 <div class="pf-c-form__group">
-    <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
-        <span class="pf-c-form__label-text">{% trans "Username" %}</span>
-    </label>
     <div class="form-control-static">
         <div class="left">
             <img class="pf-c-avatar" src="{% gravatar user.email %}" alt="">
diff --git a/passbook/stages/otp_static/apps.py b/passbook/stages/otp_static/apps.py
index 31ef75c51..2bd71c7d6 100644
--- a/passbook/stages/otp_static/apps.py
+++ b/passbook/stages/otp_static/apps.py
@@ -8,3 +8,4 @@ class PassbookStageOTPStaticConfig(AppConfig):
     name = "passbook.stages.otp_static"
     label = "passbook_stages_otp_static"
     verbose_name = "passbook OTP.Static"
+    mountpoint = "-/user/otp/static/"
diff --git a/passbook/stages/otp_static/forms.py b/passbook/stages/otp_static/forms.py
index 1fa45eadc..637f87770 100644
--- a/passbook/stages/otp_static/forms.py
+++ b/passbook/stages/otp_static/forms.py
@@ -1,18 +1,29 @@
 """OTP Static forms"""
 from django import forms
+from django.utils.safestring import mark_safe
 
 from passbook.stages.otp_static.models import OTPStaticStage
 
 
+class StaticTokenWidget(forms.widgets.Widget):
+    """Widget to render tokens as multiple labels"""
+
+    def render(self, name, value, attrs=None, renderer=None):
+        final_string = '<ul class="pb-otp-tokens">'
+        for token in value:
+            final_string += f"<li>{token.token}</li>"
+        final_string += "</ul>"
+        return mark_safe(final_string)  # nosec
+
+
 class SetupForm(forms.Form):
     """Form to setup Static OTP"""
 
-    tokens = forms.MultipleChoiceField(disabled=True, required=False)
+    tokens = forms.CharField(widget=StaticTokenWidget, disabled=True, required=False)
 
     def __init__(self, tokens, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        print(tokens)
-        self.fields["tokens"].choices = [(x.token, x.token) for x in tokens]
+        self.fields["tokens"].initial = tokens
 
 
 class OTPStaticStageForm(forms.ModelForm):
diff --git a/passbook/stages/otp_static/models.py b/passbook/stages/otp_static/models.py
index d98872cc1..63da93211 100644
--- a/passbook/stages/otp_static/models.py
+++ b/passbook/stages/otp_static/models.py
@@ -1,4 +1,4 @@
-"""OTP Static-based models"""
+"""OTP Static models"""
 from typing import Optional
 
 from django.db import models
@@ -20,8 +20,7 @@ class OTPStaticStage(Stage):
     @property
     def ui_user_settings(self) -> Optional[UIUserSettings]:
         return UIUserSettings(
-            name="Static-based OTP",
-            url=reverse("passbook_stages_otp_static:user-settings"),
+            name="Static OTP", url=reverse("passbook_stages_otp_static:user-settings"),
         )
 
     def __str__(self) -> str:
diff --git a/passbook/stages/otp_validate/forms.py b/passbook/stages/otp_validate/forms.py
index f966e90af..d1d58952c 100644
--- a/passbook/stages/otp_validate/forms.py
+++ b/passbook/stages/otp_validate/forms.py
@@ -23,7 +23,7 @@ class ValidationForm(forms.Form):
         widget=forms.TextInput(
             attrs={
                 "autocomplete": "off",
-                "placeholder": "Code",
+                "placeholder": "123456",
                 "autofocus": "autofocus",
             }
         ),
diff --git a/passbook/stages/password/forms.py b/passbook/stages/password/forms.py
index 4356778fe..c27a5f842 100644
--- a/passbook/stages/password/forms.py
+++ b/passbook/stages/password/forms.py
@@ -35,7 +35,7 @@ class PasswordForm(forms.Form):
                 "autofocus": "autofocus",
                 "autocomplete": "current-password",
             }
-        )
+        ),
     )
 
 
diff --git a/passbook/static/static/passbook/pf.css b/passbook/static/static/passbook/pf.css
index e1de1a829..d5a0992ec 100644
--- a/passbook/static/static/passbook/pf.css
+++ b/passbook/static/static/passbook/pf.css
@@ -200,6 +200,7 @@ input[data-is-monospace] {
 
 /* Form with user */
 .form-control-static {
+    margin-top: var(--pf-global--spacer--sm);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -209,10 +210,22 @@ input[data-is-monospace] {
     align-items: center;
 }
 .form-control-static img {
-    margin-right: 5px;
+    margin-right: var(--pf-global--spacer--xs);
 }
 .form-control-static a {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    line-height: 32px;
+    padding-top: var(--pf-global--spacer--xs);
+    padding-bottom: var(--pf-global--spacer--xs);
+    line-height: var(--pf-global--spacer--xl);
+}
+
+/* Static OTP Tokens, passbook.stages.otp_static */
+.pb-otp-tokens {
+    list-style: circle;
+    columns: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
+}
+.pb-otp-tokens li {
+    font-size: var(--pf-global--FontSize--2xl);
+    font-family: monospace;
 }