stages/*: minor UI updates, cleanup

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="">

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/"

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):

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:

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",
             }
         ),

passbook/stages/password/forms.py

@@ -35,7 +35,7 @@ class PasswordForm(forms.Form):
                 "autofocus": "autofocus",
                 "autocomplete": "current-password",
             }
-        )
+        ),
     )
 
 

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;
 }