stages/*: minor UI updates, cleanup

This commit is contained in:
Jens Langhammer 2020-06-30 19:05:53 +02:00
parent 729910c383
commit c59c6aa728
7 changed files with 36 additions and 15 deletions

View File

@ -5,9 +5,6 @@
{% block above_form %} {% block above_form %}
<div class="pf-c-form__group"> <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="form-control-static">
<div class="left"> <div class="left">
<img class="pf-c-avatar" src="{% gravatar user.email %}" alt=""> <img class="pf-c-avatar" src="{% gravatar user.email %}" alt="">

View File

@ -8,3 +8,4 @@ class PassbookStageOTPStaticConfig(AppConfig):
name = "passbook.stages.otp_static" name = "passbook.stages.otp_static"
label = "passbook_stages_otp_static" label = "passbook_stages_otp_static"
verbose_name = "passbook OTP.Static" verbose_name = "passbook OTP.Static"
mountpoint = "-/user/otp/static/"

View File

@ -1,18 +1,29 @@
"""OTP Static forms""" """OTP Static forms"""
from django import forms from django import forms
from django.utils.safestring import mark_safe
from passbook.stages.otp_static.models import OTPStaticStage 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): class SetupForm(forms.Form):
"""Form to setup Static OTP""" """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): def __init__(self, tokens, *args, **kwargs):
super().__init__(*args, **kwargs) super().__init__(*args, **kwargs)
print(tokens) self.fields["tokens"].initial = tokens
self.fields["tokens"].choices = [(x.token, x.token) for x in tokens]
class OTPStaticStageForm(forms.ModelForm): class OTPStaticStageForm(forms.ModelForm):

View File

@ -1,4 +1,4 @@
"""OTP Static-based models""" """OTP Static models"""
from typing import Optional from typing import Optional
from django.db import models from django.db import models
@ -20,8 +20,7 @@ class OTPStaticStage(Stage):
@property @property
def ui_user_settings(self) -> Optional[UIUserSettings]: def ui_user_settings(self) -> Optional[UIUserSettings]:
return UIUserSettings( return UIUserSettings(
name="Static-based OTP", name="Static OTP", url=reverse("passbook_stages_otp_static:user-settings"),
url=reverse("passbook_stages_otp_static:user-settings"),
) )
def __str__(self) -> str: def __str__(self) -> str:

View File

@ -23,7 +23,7 @@ class ValidationForm(forms.Form):
widget=forms.TextInput( widget=forms.TextInput(
attrs={ attrs={
"autocomplete": "off", "autocomplete": "off",
"placeholder": "Code", "placeholder": "123456",
"autofocus": "autofocus", "autofocus": "autofocus",
} }
), ),

View File

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

View File

@ -200,6 +200,7 @@ input[data-is-monospace] {
/* Form with user */ /* Form with user */
.form-control-static { .form-control-static {
margin-top: var(--pf-global--spacer--sm);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -209,10 +210,22 @@ input[data-is-monospace] {
align-items: center; align-items: center;
} }
.form-control-static img { .form-control-static img {
margin-right: 5px; margin-right: var(--pf-global--spacer--xs);
} }
.form-control-static a { .form-control-static a {
padding-top: 3px; padding-top: var(--pf-global--spacer--xs);
padding-bottom: 3px; padding-bottom: var(--pf-global--spacer--xs);
line-height: 32px; 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;
} }