From b6326f399c2e4f35dd0f2430cd46ff4c1c38c0cc Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 21 Feb 2020 15:00:45 +0100
Subject: [PATCH] ui: clean up more generic forms, remove is_login everywhere

---
 .../admin/templates/administration/base.html  |   6 -
 passbook/admin/templates/generic/form.html    |  74 ++++---
 passbook/admin/templates/generic/list.html    |  29 ---
 passbook/core/templates/error/400.html        |   7 +-
 passbook/core/templates/generic/delete.html   |  52 +++--
 passbook/core/templates/login/base.html       |  11 +-
 passbook/core/templates/login/denied.html     |   2 +-
 passbook/core/templates/login/form.html       |  18 +-
 passbook/core/templates/partials/form.html    |  82 +++----
 .../templates/partials/form_horizontal.html   |  59 +++++
 .../templates/partials/form_login_pf4.html    |  52 -----
 .../core/templates/partials/messages.html     |  22 +-
 passbook/core/views/authentication.py         |   2 -
 passbook/core/views/error.py                  |   8 -
 passbook/core/views/user.py                   |   1 -
 passbook/core/views/utils.py                  |   2 -
 passbook/factors/base.py                      |   1 -
 passbook/factors/otp/views.py                 |   1 -
 passbook/providers/oauth/views/oauth2.py      |   5 -
 passbook/providers/saml/views.py              |  19 +-
 passbook/root/settings.py                     |   2 +-
 passbook/static/static/passbook/pf.css        | 207 ++++++++++++++++++
 22 files changed, 423 insertions(+), 239 deletions(-)
 delete mode 100644 passbook/admin/templates/generic/list.html
 create mode 100644 passbook/core/templates/partials/form_horizontal.html
 delete mode 100644 passbook/core/templates/partials/form_login_pf4.html

diff --git a/passbook/admin/templates/administration/base.html b/passbook/admin/templates/administration/base.html
index 1fb106800..e4892177f 100644
--- a/passbook/admin/templates/administration/base.html
+++ b/passbook/admin/templates/administration/base.html
@@ -1,7 +1 @@
 {% extends "overview/base.html" %}
-
-{% load i18n %}
-{% load is_active %}
-
-{% block nav_secondary %}
-{% endblock %}
diff --git a/passbook/admin/templates/generic/form.html b/passbook/admin/templates/generic/form.html
index b25fe016b..006e932f1 100644
--- a/passbook/admin/templates/generic/form.html
+++ b/passbook/admin/templates/generic/form.html
@@ -24,41 +24,57 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
-  {% block above_form %}
-  {% endblock %}
-  <div class="">
-    <form action="" method="post" class="form-horizontal">
-      {% include 'partials/form.html' with form=form %}
-      {% block beneath_form %}
-      {% endblock %}
-      <a class="btn btn-default" href="{% back %}">{% trans "Cancel" %}</a>
-      <input type="submit" class="btn btn-primary" value="{% block action %}{% endblock %}" />
-    </form>
-  </div>
-  <script>
+<section class="pf-c-page__main-section pf-m-light">
+    <div class="pf-c-content">
+        {% block above_form %}
+        {% endblock %}
+    </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 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="{% block action %}{% endblock %}" />
+                                    <a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<script>
     const attributes = document.getElementsByName('attributes');
     if (attributes.length > 0) {
-      // https://github.com/codemirror/CodeMirror/issues/5092
-      attributes[0].removeAttribute("required");
-      const attributesCM = CodeMirror.fromTextArea(attributes[0], {
-        mode: 'yaml',
-        theme: 'monokai',
-        lineNumbers: true,
-      });
+        // https://github.com/codemirror/CodeMirror/issues/5092
+        attributes[0].removeAttribute("required");
+        const attributesCM = CodeMirror.fromTextArea(attributes[0], {
+            mode: 'yaml',
+            theme: 'monokai',
+            lineNumbers: true,
+        });
     }
     const expressions = document.getElementsByName('expression');
     if (expressions.length > 0) {
-      // https://github.com/codemirror/CodeMirror/issues/5092
-      expressions[0].removeAttribute("required");
-      const expressionCM = CodeMirror.fromTextArea(expressions[0], {
-        mode: 'jinja2',
-        theme: 'monokai',
-        lineNumbers: true,
-      });
+        // https://github.com/codemirror/CodeMirror/issues/5092
+        expressions[0].removeAttribute("required");
+        const expressionCM = CodeMirror.fromTextArea(expressions[0], {
+            mode: 'jinja2',
+            theme: 'monokai',
+            lineNumbers: true,
+        });
     }
-  </script>
-</div>
+</script>
 {% endblock %}
 
 {% block scripts %}
diff --git a/passbook/admin/templates/generic/list.html b/passbook/admin/templates/generic/list.html
deleted file mode 100644
index a3ee7ac83..000000000
--- a/passbook/admin/templates/generic/list.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{% extends "administration/base.html" %}
-
-{% load i18n %}
-{% load utils %}
-
-{% block content %}
-<div class="container">
-  {% block above_table %}
-  {% endblock %}
-  <table class="table table-striped table-bordered">
-    <thead>
-      <tr>
-        <th>{% trans 'Name' %}</th>
-        <th>{% trans 'Class' %}</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for source in object_list %}
-        <tr>
-          <td>{{ source.name }}</td>
-          <td>{{ source.cast|fieldtype }}</td>
-          <td><a href="{% url 'passbook_admin:source-update' pk=source.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a></td>
-        </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
-{% endblock %}
\ No newline at end of file
diff --git a/passbook/core/templates/error/400.html b/passbook/core/templates/error/400.html
index 410263962..4c6d5c069 100644
--- a/passbook/core/templates/error/400.html
+++ b/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>
diff --git a/passbook/core/templates/generic/delete.html b/passbook/core/templates/generic/delete.html
index 41cb1bd2d..592f11f90 100644
--- a/passbook/core/templates/generic/delete.html
+++ b/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 %}
diff --git a/passbook/core/templates/login/base.html b/passbook/core/templates/login/base.html
index 6c59152f7..45339ae5a 100644
--- a/passbook/core/templates/login/base.html
+++ b/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>
diff --git a/passbook/core/templates/login/denied.html b/passbook/core/templates/login/denied.html
index 7ce0ae67f..592ae2a5b 100644
--- a/passbook/core/templates/login/denied.html
+++ b/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 %}
diff --git a/passbook/core/templates/login/form.html b/passbook/core/templates/login/form.html
index bdc138755..f03fdd3c2 100644
--- a/passbook/core/templates/login/form.html
+++ b/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 %}
diff --git a/passbook/core/templates/partials/form.html b/passbook/core/templates/partials/form.html
index 715bb1a66..dfe2b564a 100644
--- a/passbook/core/templates/partials/form.html
+++ b/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 %}
diff --git a/passbook/core/templates/partials/form_horizontal.html b/passbook/core/templates/partials/form_horizontal.html
new file mode 100644
index 000000000..1cd716129
--- /dev/null
+++ b/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 %}
diff --git a/passbook/core/templates/partials/form_login_pf4.html b/passbook/core/templates/partials/form_login_pf4.html
deleted file mode 100644
index 551a3f85a..000000000
--- a/passbook/core/templates/partials/form_login_pf4.html
+++ /dev/null
@@ -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 %}
diff --git a/passbook/core/templates/partials/messages.html b/passbook/core/templates/partials/messages.html
index 74adc8845..7d1125eaa 100644
--- a/passbook/core/templates/partials/messages.html
+++ b/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 %}
diff --git a/passbook/core/views/authentication.py b/passbook/core/views/authentication.py
index 2014e199a..af9f83ef0 100644
--- a/passbook/core/views/authentication.py
+++ b/passbook/core/views/authentication.py
@@ -40,7 +40,6 @@ class LoginView(UserPassesTestMixin, FormView):
 
     def get_context_data(self, **kwargs):
         kwargs["config"] = CONFIG.y("passbook")
-        kwargs["is_login"] = True
         kwargs["title"] = _("Log in to your account")
         kwargs["primary_action"] = _("Log in")
         kwargs["show_sign_up_notice"] = CONFIG.y("passbook.sign_up.enabled")
@@ -139,7 +138,6 @@ class SignUpView(UserPassesTestMixin, FormView):
 
     def get_context_data(self, **kwargs):
         kwargs["config"] = CONFIG.y("passbook")
-        kwargs["is_login"] = True
         kwargs["title"] = _("Sign Up")
         kwargs["primary_action"] = _("Sign up")
         return super().get_context_data(**kwargs)
diff --git a/passbook/core/views/error.py b/passbook/core/views/error.py
index b9301d385..f199d8df1 100644
--- a/passbook/core/views/error.py
+++ b/passbook/core/views/error.py
@@ -32,8 +32,6 @@ class BadRequestView(TemplateView):
     response_class = BadRequestTemplateResponse
     template_name = "error/400.html"
 
-    extra_context = {"is_login": True}
-
 
 class ForbiddenView(TemplateView):
     """Show Forbidden message"""
@@ -41,8 +39,6 @@ class ForbiddenView(TemplateView):
     response_class = ForbiddenTemplateResponse
     template_name = "error/403.html"
 
-    extra_context = {"is_login": True}
-
 
 class NotFoundView(TemplateView):
     """Show Not Found message"""
@@ -50,8 +46,6 @@ class NotFoundView(TemplateView):
     response_class = NotFoundTemplateResponse
     template_name = "error/404.html"
 
-    extra_context = {"is_login": True}
-
 
 class ServerErrorView(TemplateView):
     """Show Server Error message"""
@@ -59,8 +53,6 @@ class ServerErrorView(TemplateView):
     response_class = ServerErrorTemplateResponse
     template_name = "error/500.html"
 
-    extra_context = {"is_login": True}
-
     # pylint: disable=useless-super-delegation
     def dispatch(self, *args, **kwargs):
         """Little wrapper so django accepts this function"""
diff --git a/passbook/core/views/user.py b/passbook/core/views/user.py
index caa4e3914..6c4bdcfc6 100644
--- a/passbook/core/views/user.py
+++ b/passbook/core/views/user.py
@@ -67,7 +67,6 @@ class UserChangePasswordView(LoginRequiredMixin, FormView):
 
     def get_context_data(self, **kwargs):
         kwargs["config"] = CONFIG.y("passbook")
-        kwargs["is_login"] = True
         kwargs["title"] = _("Change Password")
         kwargs["primary_action"] = _("Change")
         return super().get_context_data(**kwargs)
diff --git a/passbook/core/views/utils.py b/passbook/core/views/utils.py
index 1bedcff24..3a28c95a5 100644
--- a/passbook/core/views/utils.py
+++ b/passbook/core/views/utils.py
@@ -15,7 +15,6 @@ class LoadingView(TemplateView):
         return self.target_url
 
     def get_context_data(self, **kwargs):
-        kwargs["is_login"] = True
         kwargs["title"] = self.title
         kwargs["target_url"] = self.get_url()
         return super().get_context_data(**kwargs)
@@ -28,6 +27,5 @@ class PermissionDeniedView(TemplateView):
     title = _("Permission denied.")
 
     def get_context_data(self, **kwargs):
-        kwargs["is_login"] = True
         kwargs["title"] = self.title
         return super().get_context_data(**kwargs)
diff --git a/passbook/factors/base.py b/passbook/factors/base.py
index 1aec40ca5..ec44b213d 100644
--- a/passbook/factors/base.py
+++ b/passbook/factors/base.py
@@ -25,7 +25,6 @@ class AuthenticationFactor(TemplateView):
 
     def get_context_data(self, **kwargs):
         kwargs["config"] = CONFIG.y("passbook")
-        kwargs["is_login"] = True
         kwargs["title"] = _("Log in to your account")
         kwargs["primary_action"] = _("Log in")
         kwargs["user"] = self.pending_user
diff --git a/passbook/factors/otp/views.py b/passbook/factors/otp/views.py
index 7435d9488..5561482ce 100644
--- a/passbook/factors/otp/views.py
+++ b/passbook/factors/otp/views.py
@@ -77,7 +77,6 @@ class EnableView(LoginRequiredMixin, FormView):
     # TODO: Check if OTP Factor exists and applies to user
     def get_context_data(self, **kwargs):
         kwargs["config"] = CONFIG.y("passbook")
-        kwargs["is_login"] = True
         kwargs["title"] = _("Configure OTP")
         kwargs["primary_action"] = _("Setup")
         return super().get_context_data(**kwargs)
diff --git a/passbook/providers/oauth/views/oauth2.py b/passbook/providers/oauth/views/oauth2.py
index 1a8aa90d0..3006f08e6 100644
--- a/passbook/providers/oauth/views/oauth2.py
+++ b/passbook/providers/oauth/views/oauth2.py
@@ -74,11 +74,6 @@ class PassbookAuthorizationView(AccessMixin, AuthorizationView):
             LOGGER.debug(request.GET.get("redirect_uri"))
         return actual_response
 
-    def render_to_response(self, context, **kwargs):
-        # Always set is_login to true for correct css class
-        context["is_login"] = True
-        return super().render_to_response(context, **kwargs)
-
     def form_valid(self, form):
         # User has clicked on "Authorize"
         Event.new(
diff --git a/passbook/providers/saml/views.py b/passbook/providers/saml/views.py
index 2c1931056..daf646cbc 100644
--- a/passbook/providers/saml/views.py
+++ b/passbook/providers/saml/views.py
@@ -66,10 +66,7 @@ class AccessRequiredView(AccessMixin, View):
             return render(
                 request,
                 "login/denied.html",
-                {
-                    "title": _("You don't have access to this application"),
-                    "is_login": True,
-                },
+                {"title": _("You don't have access to this application"),},
             )
         return super().dispatch(request, *args, **kwargs)
 
@@ -142,12 +139,7 @@ class LoginProcessView(AccessRequiredView):
             return render(
                 request,
                 "saml/idp/login.html",
-                {
-                    "saml_params": params,
-                    "provider": self.provider,
-                    # This is only needed to for the template to render correctly
-                    "is_login": True,
-                },
+                {"saml_params": params, "provider": self.provider,},
             )
 
         except exceptions.CannotHandleAssertion as exc:
@@ -308,10 +300,5 @@ class InitiateLoginView(AccessRequiredView):
         return render(
             request,
             "saml/idp/login.html",
-            {
-                "saml_params": params,
-                "provider": self.provider,
-                # This is only needed to for the template to render correctly
-                "is_login": True,
-            },
+            {"saml_params": params, "provider": self.provider,},
         )
diff --git a/passbook/root/settings.py b/passbook/root/settings.py
index b51758fd4..1ac829ed1 100644
--- a/passbook/root/settings.py
+++ b/passbook/root/settings.py
@@ -78,7 +78,7 @@ INSTALLED_APPS = [
     "guardian",
     "django_prometheus",
     "passbook.core.apps.PassbookCoreConfig",
-    'passbook.static.apps.PassbookStaticConfig',
+    "passbook.static.apps.PassbookStaticConfig",
     "passbook.admin.apps.PassbookAdminConfig",
     "passbook.api.apps.PassbookAPIConfig",
     "passbook.lib.apps.PassbookLibConfig",
diff --git a/passbook/static/static/passbook/pf.css b/passbook/static/static/passbook/pf.css
index 1be41fc58..718b516f5 100644
--- a/passbook/static/static/passbook/pf.css
+++ b/passbook/static/static/passbook/pf.css
@@ -1,3 +1,4 @@
+/* Fix patternfly sidebar and header with open Modal */
 .pf-c-page__sidebar {
     z-index: 0;
 }
@@ -5,3 +6,209 @@
 .pf-c-page__header {
     z-index: 0;
 }
+
+@@ -1,204 +0,0 @@
+.navbar-brand-name {
+    height: 35px;
+}
+
+.dynamic-array-widget .array-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.dynamic-array-widget .remove_sign {
+  width: 10px;
+  height: 2px;
+  background: #a41515;
+  border-radius: 1px;
+}
+
+.dynamic-array-widget .remove {
+  height: 15px;
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+}
+
+.dynamic-array-widget .remove:hover {
+  cursor: pointer;
+}
+
+/* Selector */
+.selector {
+    display: flex;
+    width: 100%;
+    height: 45vh;
+}
+
+.selector .selector-filter {
+    display: flex;
+    align-items: center;
+}
+
+.selector .selector-filter label {
+    margin: 0 8px 0 0;
+}
+
+.selector .selector-filter input {
+    width: auto;
+    min-height: 0;
+    flex: 1 1;
+}
+
+.selector-available, .selector-chosen {
+    width: auto;
+    flex: 1 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.selector select {
+    width: 100%;
+    flex: 1 0 auto;
+    margin-bottom: 5px;
+}
+
+.selector ul.selector-chooser {
+    width: 26px;
+    height: 52px;
+    padding: 2px 0;
+    margin: auto 15px;
+    border-radius: 20px;
+    transform: translateY(-10px);
+    list-style: none;
+}
+
+.selector-add, .selector-remove {
+    width: 20px;
+    height: 20px;
+    background-size: 20px auto;
+}
+
+.selector-add {
+    background-position: 0 -120px;
+}
+
+.selector-remove {
+    background-position: 0 -80px;
+}
+
+a.selector-chooseall, a.selector-clearall {
+    align-self: center;
+}
+
+.stacked {
+    flex-direction: column;
+    max-width: 480px;
+}
+
+.stacked > * {
+    flex: 0 1 auto;
+}
+
+.stacked select {
+    margin-bottom: 0;
+}
+
+.stacked .selector-available, .stacked .selector-chosen {
+    width: auto;
+}
+
+.stacked ul.selector-chooser {
+    width: 52px;
+    height: 26px;
+    padding: 0 2px;
+    margin: 15px auto;
+    transform: none;
+}
+
+.stacked .selector-chooser li {
+    padding: 3px;
+}
+
+.stacked .selector-add, .stacked .selector-remove {
+    background-size: 20px auto;
+}
+
+.stacked .selector-add {
+    background-position: 0 -40px;
+}
+
+.stacked .active.selector-add {
+    background-position: 0 -60px;
+}
+
+.stacked .selector-remove {
+    background-position: 0 0;
+}
+
+.stacked .active.selector-remove {
+    background-position: 0 -20px;
+}
+
+.help-tooltip, .selector .help-icon {
+    display: none;
+}
+
+form .form-row p.datetime {
+    width: 100%;
+}
+
+.datetime input {
+    width: 50%;
+    max-width: 120px;
+}
+
+.datetime span {
+    font-size: 13px;
+}
+
+.datetime .timezonewarning {
+    display: block;
+    font-size: 11px;
+    color: #999;
+}
+
+.datetimeshortcuts {
+    color: #ccc;
+}
+
+.inline-group {
+    overflow: auto;
+}
+
+.selector-add, .selector-remove {
+    width: 16px;
+    height: 16px;
+    display: block;
+    text-indent: -3000px;
+    overflow: hidden;
+    cursor: default;
+    opacity: 0.3;
+}
+
+.active.selector-add, .active.selector-remove {
+    opacity: 1;
+}
+
+.active.selector-add:hover, .active.selector-remove:hover {
+    cursor: pointer;
+}
+
+.selector-add {
+    background: url(../admin/img/selector-icons.svg) 0 -96px no-repeat;
+}
+
+.active.selector-add:focus, .active.selector-add:hover {
+    background-position: 0 -112px;
+}
+
+.selector-remove {
+    background: url(../admin/img/selector-icons.svg) 0 -64px no-repeat;
+}
+
+input[data-is-monospace] {
+    font-family: monospace;
+}