ui: clean up more generic forms, remove is_login everywhere

passbook/core/templates/error/400.html

@@ -14,10 +14,11 @@
 </style>
 {% endblock %}
 
+{% block card_title %}
+{% trans 'Bad Request' %}
+{% endblock %}
+
 {% block card %}
-<header class="login-pf-header">
-    <h1>{% trans 'Bad Request' %}</h1>
-</header>
 <form>
     {% if message %}
     <h3>{% trans message %}</h3>

passbook/core/templates/generic/delete.html

@@ -4,22 +4,40 @@
 {% load utils %}
 
 {% block content %}
-<div class="container">
-    {% block above_form %}
-    <h1>{% blocktrans with object_type=object|verbose_name %}Delete {{ object_type }}{% endblocktrans %}</h1>
-    {% endblock %}
-    <div class="">
-        <form method="post" class="form-horizontal">
-            {% csrf_token %}
-            <p>
-                {% blocktrans with object_type=object|verbose_name name=object %}
-                Are you sure you want to delete {{ object_type }} "{{ object }}"?
-                {% endblocktrans %}
-            </p>
-            <input type="hidden" name="confirmdelete" value="yes">
-            <a href="{% back %}" class="btn btn-default">{% trans 'Back' %}</a>
-            <input type="submit" class="btn btn-danger" value="{% trans 'Delete' %}" />
-        </form>
+<section class="pf-c-page__main-section pf-m-light">
+    <div class="pf-c-content">
+        {% block above_form %}
+        <h1>
+            {% blocktrans with object_type=object|verbose_name %}
+            Delete {{ object_type }}
+            {% endblocktrans %}
+        </h1>
+        {% endblock %}
     </div>
-</div>
+</section>
+<section class="pf-c-page__main-section">
+    <div class="pf-l-stack">
+        <div class="pf-l-stack__item">
+            <div class="pf-c-card">
+                <div class="pf-c-card__body">
+                    <form action="" method="post" class="pf-c-form">
+                        {% csrf_token %}
+                        <p>
+                            {% blocktrans with object_type=object|verbose_name name=object %}
+                            Are you sure you want to delete {{ object_type }} "{{ object }}"?
+                            {% endblocktrans %}
+                        </p>
+                        <input type="hidden" name="confirmdelete" value="yes">
+                        <div class="pf-c-form__group pf-m-action">
+                            <div class="pf-c-form__actions">
+                                <input class="pf-c-button pf-m-danger" type="submit" value="{% trans 'Delete' %}" />
+                                <a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Back" %}</a>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
 {% endblock %}

passbook/core/templates/login/base.html

@@ -17,6 +17,7 @@
         </filter>
     </svg>
 </div>
+{% include 'partials/messages.html' %}
 <div class="pf-c-login">
     <div class="pf-c-login__container">
         <header class="pf-c-login__header">
@@ -27,12 +28,16 @@
         </header>
         <main class="pf-c-login__main">
             <header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">{% trans title %}</h1>
+                <h1 class="pf-c-title pf-m-3xl">
+                    {% block card_title %}
+                    {% trans title %}
+                    {% endblock %}
+                </h1>
             </header>
             <div class="pf-c-login__main-body">
                 {% block card %}
                 <form method="POST" class="pf-c-form">
-                    {% include 'partials/form_login_pf4.html' %}
+                    {% include 'partials/form.html' %}
                     <div class="pf-c-form__group pf-m-action">
                         <button class="pf-c-button pf-m-primary pf-m-block" type="submit">Log in</button>
                     </div>
@@ -71,7 +76,7 @@
             <p></p>
             <ul class="pf-c-list pf-m-inline">
                 <li>
-                    <a href="https://beryju.github.io/passbook/">Help</a>
+                    <a href="https://beryju.github.io/passbook/">{% trans 'Documentation' %}</a>
                 </li>
                 <!-- todo: load config.passbook.footer.links -->
             </ul>

passbook/core/templates/login/denied.html

@@ -20,7 +20,7 @@
 </header>
 <form method="POST">
   {% csrf_token %}
-  {% include 'partials/form_login_pf4.html' %}
+  {% include 'partials/form.html' %}
   <span class="pf-icon pficon-error-circle-o btn-block"></span>
   Access denied
   {% if 'back' in request.GET %}

passbook/core/templates/login/form.html

@@ -5,13 +5,15 @@
 
 {% block card %}
 <form method="POST" class="pf-c-form">
-  {% block above_form %}
-  {% endblock %}
-  {% include 'partials/form_login_pf4.html' %}
-  {% block beneath_form %}
-  {% endblock %}
-  <div class="pf-c-form__group pf-m-action">
-    <button class="pf-c-button pf-m-primary pf-m-block" type="submit">{% trans primary_action %}</button>
-  </div>
+    {% block above_form %}
+    {% endblock %}
+
+    {% include 'partials/form.html' %}
+
+    {% block beneath_form %}
+    {% endblock %}
+    <div class="pf-c-form__group pf-m-action">
+        <button class="pf-c-button pf-m-primary pf-m-block" type="submit">{% trans primary_action %}</button>
+    </div>
 </form>
 {% endblock %}

passbook/core/templates/partials/form.html

@@ -1,50 +1,52 @@
 {% load utils %}
+{% load i18n %}
 
 {% csrf_token %}
 {% for field in form %}
-<div class="form-group {% if field.errors %} has-error {% endif %}">
-  {% if field.field.widget|fieldtype == 'RadioSelect' %}
-    <label class="col-sm-2 control-label" {% if field.field.required %}class="required"{% endif %} for="{{ field.name }}-{{ forloop.counter0 }}">
-      {{ field.label }}
-    </label>
-    {% for c in field %}
-    <div class="radio col-sm-10">
-      <input type="radio" id="{{ field.name }}-{{ forloop.counter0 }}" name="{% if wizard %}{{ wizard.steps.current }}-{% endif %}{{ field.name }}" value="{{ c.data.value }}" {% if c.data.selected %} checked {% endif %}>
-      <label class="col-sm-2 control-label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ c.choice_label }}</label>
-    </div>
-    {% endfor %}
-  {% elif field.field.widget|fieldtype == 'Select' %}
-  <label class="col-sm-2 control-label" {% if field.field.required %}class="required"{% endif %} for="{{ field.name }}-{{ forloop.counter0 }}">
-    {{ field.label }}
-  </label>
-  <div class="select col-sm-10">
-    {{ field }}
-  </div>
-  {% elif field.field.widget|fieldtype == 'CheckboxInput' %}
-  <div class="col-sm-offset-2 col-sm-10">
-    <div class="checkbox">
-      <label>
-        {{ field }} {{ field.label }}
-      </label>
-    </div>
-  </div>
-  {% else %}
-  <label class="col-sm-2 control-label" {% if field.field.required %}class="required"{% endif %} for="{{ field.name }}-{{ forloop.counter0 }}">
-    {{ field.label }}
-  </label>
-  <div class="col-sm-10">
-    {{ field|css_class:'form-control' }}
-    {% if field.help_text %}
-    <span>
-      {{ field.help_text }}
-    </span>
+<div class="pf-c-form__group {% if field.errors %} has-error {% endif %}">
+    {% if field.field.widget|fieldtype == 'RadioSelect' %}
+        <label class="pf-c-form__label" {% if field.field.required %}class="required" {% endif %}
+            for="{{ field.name }}-{{ forloop.counter0 }}">
+            {{ field.label }}
+        </label>
+        {% for c in field %}
+        <div class="radio col-sm-10">
+            <input type="radio" id="{{ field.name }}-{{ forloop.counter0 }}"
+                name="{% if wizard %}{{ wizard.steps.current }}-{% endif %}{{ field.name }}" value="{{ c.data.value }}"
+                {% if c.data.selected %} checked {% endif %}>
+            <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ c.choice_label }}</label>
+        </div>
+        {% endfor %}
+    {% elif field.field.widget|fieldtype == 'Select' %}
+        <label class="pf-c-form__label" {% if field.field.required %}class="required" {% endif %}
+            for="{{ field.name }}-{{ forloop.counter0 }}">
+            {{ field.label }}
+        </label>
+        <div class="select col-sm-10">
+            {{ field }}
+        </div>
+    {% elif field.field.widget|fieldtype == 'CheckboxInput' %}
+        <label class="checkbox-label">
+            {{ field }} {{ field.label }}
+        </label>
+    {% else %}
+        <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
+            <span class="pf-c-form__label-text">{{ field.label }}</span>
+            {% if field.field.required %}
+            <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
+            {% endif %}
+        </label>
+        {{ field|css_class:'pf-c-form-control' }}
+        {% if field.help_text %}
+        <span>
+            {{ field.help_text }}
+        </span>
+        {% endif %}
     {% endif %}
     {% for error in field.errors %}
-    <span class="help-block">
+    <p class="pf-c-form__helper-text pf-m-error">
         {{ error }}
-    </span>
+    </p>
     {% endfor %}
-  </div>
-  {% endif %}
 </div>
 {% endfor %}

passbook/core/templates/partials/form_horizontal.html

@@ -0,0 +1,59 @@
+{% load utils %}
+{% load i18n %}
+
+{% csrf_token %}
+{% for field in form %}
+<div class="pf-c-form__group {% if field.errors %} has-error {% endif %}">
+    {% if field.field.widget|fieldtype == 'RadioSelect' %}
+        <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
+            <span class="pf-c-form__label-text">{{ field.label }}</span>
+            {% if field.field.required %}
+            <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
+            {% endif %}
+        </label>
+        {% for c in field %}
+        <div class="radio col-sm-10">
+            <input type="radio" id="{{ field.name }}-{{ forloop.counter0 }}"
+                name="{% if wizard %}{{ wizard.steps.current }}-{% endif %}{{ field.name }}" value="{{ c.data.value }}"
+                {% if c.data.selected %} checked {% endif %}>
+            <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ c.choice_label }}</label>
+        </div>
+        {% endfor %}
+    {% elif field.field.widget|fieldtype == 'Select' %}
+        <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
+            <span class="pf-c-form__label-text">{{ field.label }}</span>
+            {% if field.field.required %}
+            <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
+            {% endif %}
+        </label>
+        <div class="pf-c-form__horizontal-group">
+            {{ field|css_class:"pf-c-form-control" }}
+        </div>
+    {% elif field.field.widget|fieldtype == 'CheckboxInput' %}
+        <div class="pf-c-form__horizontal-group">
+            <div class="pf-c-check">
+                {{ field|css_class:"pf-c-check__input" }}
+                <label class="pf-c-check__label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ field.label }}</label>
+            </div>
+        </div>
+    {% else %}
+        <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
+            <span class="pf-c-form__label-text">{{ field.label }}</span>
+            {% if field.field.required %}
+            <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
+            {% endif %}
+        </label>
+        <div class="c-form__horizontal-group">
+            {{ field|css_class:'pf-c-form-control' }}
+            {% if field.help_text %}
+                <p class="pf-c-form__helper-text">{{ field.help_text }}</p>
+            {% endif %}
+        </div>
+    {% endif %}
+    {% for error in field.errors %}
+    <p class="pf-c-form__helper-text pf-m-error">
+        {{ error }}
+    </p>
+    {% endfor %}
+</div>
+{% endfor %}

passbook/core/templates/partials/form_login_pf4.html

@@ -1,52 +0,0 @@
-{% load utils %}
-{% load i18n %}
-
-{% csrf_token %}
-{% for field in form %}
-<div class="pf-c-form__group {% if field.errors %} has-error {% endif %}">
-    {% if field.field.widget|fieldtype == 'RadioSelect' %}
-        <label class="pf-c-form__label" {% if field.field.required %}class="required" {% endif %}
-            for="{{ field.name }}-{{ forloop.counter0 }}">
-            {{ field.label }}
-        </label>
-        {% for c in field %}
-        <div class="radio col-sm-10">
-            <input type="radio" id="{{ field.name }}-{{ forloop.counter0 }}"
-                name="{% if wizard %}{{ wizard.steps.current }}-{% endif %}{{ field.name }}" value="{{ c.data.value }}"
-                {% if c.data.selected %} checked {% endif %}>
-            <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ c.choice_label }}</label>
-        </div>
-        {% endfor %}
-    {% elif field.field.widget|fieldtype == 'Select' %}
-        <label class="pf-c-form__label" {% if field.field.required %}class="required" {% endif %}
-            for="{{ field.name }}-{{ forloop.counter0 }}">
-            {{ field.label }}
-        </label>
-        <div class="select col-sm-10">
-            {{ field }}
-        </div>
-    {% elif field.field.widget|fieldtype == 'CheckboxInput' %}
-        <label class="checkbox-label">
-            {{ field }} {{ field.label }}
-        </label>
-    {% else %}
-        <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
-            <span class="pf-c-form__label-text">{{ field.label }}</span>
-            {% if field.field.required %}
-            <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
-            {% endif %}
-        </label>
-        {{ field|css_class:'pf-c-form-control' }}
-        {% if field.help_text %}
-        <span>
-            {{ field.help_text }}
-        </span>
-        {% endif %}
-    {% endif %}
-    {% for error in field.errors %}
-    <span class="help-block">
-        {{ error }}
-    </span>
-    {% endfor %}
-</div>
-{% endfor %}

passbook/core/templates/partials/messages.html

@@ -2,27 +2,21 @@
 <ul class="pf-c-alert-group pf-m-toast">
     {% for msg in messages %}
     <li class="pf-c-alert-group__item">
-        <div class="pf-c-alert pf-m-{{ msg.level_tag }}">
+        <div class="pf-c-alert pf-m-{{ msg.level_tag }} {% if msg.level_tag == 'error' %}pf-m-danger{% endif %}">
             <div class="pf-c-alert__icon">
-                {% if msg.level_tag == 'danger' %}
-                <o class="pficon pficon-error-circle-o"></o>
+                {% if msg.level_tag == 'error' %}
+                <i class="fas fa-exclamation-circle"></i>
                 {% elif msg.level_tag == 'warning' %}
-                <o class="pficon pficon-warning-triangle-o"></o>
+                <i class="fas fa-exclamation-triangle"></i>
                 {% elif msg.level_tag == 'success' %}
-                <o class="pficon pficon-ok"></o>
+                <i class="fas fa-check-circle"></i>
                 {% elif msg.level_tag == 'info' %}
-                <o class="pficon pficon-info"></o>
+                <i class="fas fa-info"></i>
                 {% endif %}
             </div>
-            <div class="pf-c-alert__description">
+            <h4 class="pf-c-alert__title">
                 {{ msg.message|safe }}
-            </div>
-            <div class="pf-c-alert__action">
-                <button class="pf-c-button pf-m-plain" type="button"
-                    aria-label="Close success alert: Newest notification">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
+            </h4>
         </div>
     </li>
     {% endfor %}