From 1524880eec5a55b4b9e1995351f099f20ac36f4a Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 8 Jul 2020 14:17:29 +0200
Subject: [PATCH] core: add generic login/base_full template for static login
 views

---
 passbook/core/templates/error/generic.html    | 66 ++++------------
 passbook/core/templates/login/base_full.html  | 53 +++++++++++++
 passbook/core/templates/login/denied.html     | 76 +++++--------------
 passbook/flows/templates/flows/shell.html     | 55 +++-----------
 .../providers/saml/autosubmit_form.html       |  2 +-
 .../sources/saml/templates/saml/sp/login.html | 15 ++--
 6 files changed, 104 insertions(+), 163 deletions(-)
 create mode 100644 passbook/core/templates/login/base_full.html

diff --git a/passbook/core/templates/error/generic.html b/passbook/core/templates/error/generic.html
index c25f9a061..2e61ea09e 100644
--- a/passbook/core/templates/error/generic.html
+++ b/passbook/core/templates/error/generic.html
@@ -1,58 +1,20 @@
-{% extends 'base/skeleton.html' %}
+{% extends 'login/base_full.html' %}
 
 {% load static %}
 {% load i18n %}
 {% load passbook_utils %}
 
-{% block body %}
-<div class="pf-c-background-image">
-    <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
-        <filter id="image_overlay">
-            <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
-            <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-                <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
-                <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
-                <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
-                <feFuncA type="table" tableValues="0 1"></feFuncA>
-            </feComponentTransfer>
-        </filter>
-    </svg>
-</div>
-<div class="pf-c-login">
-    <div class="pf-c-login__container">
-        <header class="pf-c-login__header">
-            <img class="pf-c-brand" src="{% static 'passbook/logo.svg' %}" style="height: 60px;" alt="passbook icon" />
-            <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" style="height: 60px;" alt="passbook branding" />
-        </header>
-        <main class="pf-c-login__main" id="flow-body">
-            <header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">
-                    {% trans 'Bad Request' %}
-                </h1>
-            </header>
-            <div class="pf-c-login__main-body">
-                {% block card %}
-                <form method="POST" class="pf-c-form">
-                    {% if message %}
-                    <h3>{% trans message %}</h3>
-                    {% endif %}
-                    {% if 'back' in request.GET %}
-                    <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
-                    {% endif %}
-                </form>
-                {% endblock %}
-            </div>
-        </main>
-        <footer class="pf-c-login__footer">
-            <p></p>
-            <ul class="pf-c-list pf-m-inline">
-                {% for link in config.passbook.footer_links %}
-                <li>
-                    <a href="{{ link.href }}">{{ link.name }}</a>
-                </li>
-                {% endfor %}
-            </ul>
-        </footer>
-    </div>
-</div>
+{% block title %}
+{% trans 'Bad Request' %}
+{% endblock %}
+
+{% block card %}
+<form method="POST" class="pf-c-form">
+    {% if message %}
+    <h3>{% trans message %}</h3>
+    {% endif %}
+    {% if 'back' in request.GET %}
+    <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
+    {% endif %}
+</form>
 {% endblock %}
diff --git a/passbook/core/templates/login/base_full.html b/passbook/core/templates/login/base_full.html
new file mode 100644
index 000000000..6d93eb632
--- /dev/null
+++ b/passbook/core/templates/login/base_full.html
@@ -0,0 +1,53 @@
+{% extends 'base/skeleton.html' %}
+
+{% load static %}
+{% load i18n %}
+{% load passbook_utils %}
+
+{% block body %}
+<div class="pf-c-background-image">
+    <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
+        <filter id="image_overlay">
+            <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
+            <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
+                <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
+                <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
+                <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
+                <feFuncA type="table" tableValues="0 1"></feFuncA>
+            </feComponentTransfer>
+        </filter>
+    </svg>
+</div>
+<div class="pf-c-login">
+    <div class="pf-c-login__container">
+        <header class="pf-c-login__header">
+            <img class="pf-c-brand" src="{% static 'passbook/logo.svg' %}" style="height: 60px;" alt="passbook icon" />
+            <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" style="height: 60px;" alt="passbook branding" />
+        </header>
+        {% block main_container %}
+        <main class="pf-c-login__main">
+            <header class="pf-c-login__main-header">
+                <h1 class="pf-c-title pf-m-3xl">
+                    {% block title %}
+                    {% endblock %}
+                </h1>
+            </header>
+            <div class="pf-c-login__main-body">
+                {% block card %}
+                {% endblock %}
+            </div>
+        </main>
+        {% endblock %}
+        <footer class="pf-c-login__footer">
+            <p></p>
+            <ul class="pf-c-list pf-m-inline">
+                {% for link in config.passbook.footer_links %}
+                <li>
+                    <a href="{{ link.href }}">{{ link.name }}</a>
+                </li>
+                {% endfor %}
+            </ul>
+        </footer>
+    </div>
+</div>
+{% endblock %}
diff --git a/passbook/core/templates/login/denied.html b/passbook/core/templates/login/denied.html
index 2be7d36fa..4d8ac623a 100644
--- a/passbook/core/templates/login/denied.html
+++ b/passbook/core/templates/login/denied.html
@@ -1,63 +1,25 @@
-{% extends 'base/skeleton.html' %}
+{% extends 'login/base_full.html' %}
 
 {% load static %}
 {% load i18n %}
 {% load passbook_utils %}
 
-{% block body %}
-<div class="pf-c-background-image">
-    <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
-        <filter id="image_overlay">
-            <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
-            <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-                <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
-                <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
-                <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
-                <feFuncA type="table" tableValues="0 1"></feFuncA>
-            </feComponentTransfer>
-        </filter>
-    </svg>
-</div>
-<div class="pf-c-login">
-    <div class="pf-c-login__container">
-        <header class="pf-c-login__header">
-            <img class="pf-c-brand" src="{% static 'passbook/logo.svg' %}" style="height: 60px;" alt="passbook icon" />
-            <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" style="height: 60px;" alt="passbook branding" />
-        </header>
-        <main class="pf-c-login__main" id="flow-body">
-            <header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">
-                    {% trans 'Permission denied' %}
-                </h1>
-            </header>
-            <div class="pf-c-login__main-body">
-                {% block card %}
-                    <form method="POST" class="pf-c-form">
-                        {% csrf_token %}
-                        {% include 'partials/form.html' %}
-                        <div class="pf-c-form__group">
-                            <p>
-                                <i class="pf-icon pf-icon-error-circle-o"></i>
-                                {% trans 'Access denied' %}
-                            </p>
-                        </div>
-                        {% if 'back' in request.GET %}
-                        <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
-                        {% endif %}
-                    </form>
-                {% endblock %}
-            </div>
-        </main>
-        <footer class="pf-c-login__footer">
-            <p></p>
-            <ul class="pf-c-list pf-m-inline">
-                {% for link in config.passbook.footer_links %}
-                <li>
-                    <a href="{{ link.href }}">{{ link.name }}</a>
-                </li>
-                {% endfor %}
-            </ul>
-        </footer>
-    </div>
-</div>
+{% block title %}
+{% trans 'Permission denied' %}
+{% endblock %}
+
+{% block card %}
+    <form method="POST" class="pf-c-form">
+        {% csrf_token %}
+        {% include 'partials/form.html' %}
+        <div class="pf-c-form__group">
+            <p>
+                <i class="pf-icon pf-icon-error-circle-o"></i>
+                {% trans 'Access denied' %}
+            </p>
+        </div>
+        {% if 'back' in request.GET %}
+        <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
+        {% endif %}
+    </form>
 {% endblock %}
diff --git a/passbook/flows/templates/flows/shell.html b/passbook/flows/templates/flows/shell.html
index 6aa9e855e..20422c157 100644
--- a/passbook/flows/templates/flows/shell.html
+++ b/passbook/flows/templates/flows/shell.html
@@ -1,4 +1,4 @@
-{% extends 'base/skeleton.html' %}
+{% extends 'login/base_full.html' %}
 
 {% load static %}
 {% load i18n %}
@@ -20,51 +20,16 @@
 </style>
 {% endblock %}
 
-{% block body %}
-<div class="pf-c-background-image">
-    <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
-        <filter id="image_overlay">
-            <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
-            <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-                <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
-                <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
-                <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
-                <feFuncA type="table" tableValues="0 1"></feFuncA>
-            </feComponentTransfer>
-        </filter>
-    </svg>
-</div>
-<ul class="pf-c-alert-group pf-m-toast">
-</ul>
-<div class="pf-c-login">
-    <div class="pf-c-login__container">
-        <header class="pf-c-login__header">
-            <img class="pf-c-brand" src="{% static 'passbook/logo.svg' %}" style="height: 60px;"
-                alt="passbook icon" />
-            <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" style="height: 60px;"
-                alt="passbook branding" />
-        </header>
-        <main class="pf-c-login__main" id="flow-body">
-            <div class="pf-c-login__main-body pb-loading">
-                <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
-                    <span class="pf-c-spinner__clipper"></span>
-                    <span class="pf-c-spinner__lead-ball"></span>
-                    <span class="pf-c-spinner__tail-ball"></span>
-                </span>
-            </div>
-        </main>
-        <footer class="pf-c-login__footer">
-            <p></p>
-            <ul class="pf-c-list pf-m-inline">
-                {% for link in config.passbook.footer_links %}
-                <li>
-                    <a href="{{ link.href }}">{{ link.name }}</a>
-                </li>
-                {% endfor %}
-            </ul>
-        </footer>
+{% block main_container %}
+<main class="pf-c-login__main" id="flow-body">
+    <div class="pf-c-login__main-body pb-loading">
+        <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
+            <span class="pf-c-spinner__clipper"></span>
+            <span class="pf-c-spinner__lead-ball"></span>
+            <span class="pf-c-spinner__tail-ball"></span>
+        </span>
     </div>
-</div>
+</main>
 <script>
 const flowBodyUrl = "{{ exec_url }}";
 const messagesUrl = "{{ msg_url }}";
diff --git a/passbook/providers/saml/templates/providers/saml/autosubmit_form.html b/passbook/providers/saml/templates/providers/saml/autosubmit_form.html
index baac6834d..489e00f55 100644
--- a/passbook/providers/saml/templates/providers/saml/autosubmit_form.html
+++ b/passbook/providers/saml/templates/providers/saml/autosubmit_form.html
@@ -1,4 +1,4 @@
-{% extends "login/denied.html" %}
+{% extends "login/base_full.html" %}
 
 {% load passbook_utils %}
 {% load i18n %}
diff --git a/passbook/sources/saml/templates/saml/sp/login.html b/passbook/sources/saml/templates/saml/sp/login.html
index 89dcfa19b..9edaf9d4a 100644
--- a/passbook/sources/saml/templates/saml/sp/login.html
+++ b/passbook/sources/saml/templates/saml/sp/login.html
@@ -1,4 +1,4 @@
-{% extends "login/base.html" %}
+{% extends "login/base_full.html" %}
 
 {% load passbook_utils %}
 {% load i18n %}
@@ -8,20 +8,19 @@
 {% endblock %}
 
 {% block card %}
-<header class="login-pf-header">
-    <h1>{% trans 'Authorize Application' %}</h1>
-</header>
-<form method="POST" action="{{ request_url }}">
+<form class="pf-c-form" method="POST" action="{{ request_url }}">
     {% csrf_token %}
     <input type="hidden" name="SAMLRequest" value="{{ request }}" />
     <input type="hidden" name="RelayState" value="{{ relay_state }}" />
     <div class="login-group">
         <h3>
-            {% blocktrans with remote=source.name %}
-            You're about to sign-in via {{ remote }}
+            {% blocktrans with source=source.name %}
+            You're about to sign-in via {{ source }}.
             {% endblocktrans %}
         </h3>
-        <input class="btn btn-primary btn-block btn-lg" type="submit" value="{% trans 'Continue' %}" />
+    </div>
+    <div class="pf-c-form__group pf-m-action">
+        <button class="pf-c-button pf-m-primary pf-m-block" type="submit">{% trans "Continue" %}</button>
     </div>
 </form>
 {% endblock %}