Bootstrap 4 templates (#47)

README.rst

@@ -207,13 +207,16 @@ Template settings
 * ``CAS_SHOW_POWERED``: Set it to ``False`` to hide the powered by footer. The default is ``True``.
 * ``CAS_COMPONENT_URLS``: URLs to css and javascript external components. It is a dictionnary
   having the five following keys: ``"bootstrap3_css"``, ``"bootstrap3_js"``,
-  ``"html5shiv"``, ``"respond"``, ``"jquery"``. The default is::
+  ``bootstrap4_css``, ``bootstrap4_js``, ``"html5shiv"``, ``"respond"``, ``"jquery"``.
+  The default is::
 
         {
             "bootstrap3_css": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css",
             "bootstrap3_js": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js",
             "html5shiv": "//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js",
             "respond": "//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js",
+            "bootstrap4_css": "//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css",
+            "bootstrap4_js": "//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js",
             "jquery": "//code.jquery.com/jquery.min.js",
         }
 
@@ -245,17 +248,19 @@ Template settings
 * ``CAS_INFO_MESSAGES_ORDER``: A list of message names. Order in which info-box messages are
   displayed. Use an empty list to disable messages display. The default is ``[]``.
 * ``CAS_LOGIN_TEMPLATE``: Path to the template showed on ``/login`` then the user
-  is not autenticated.  The default is ``"cas_server/login.html"``.
+  is not autenticated.  The default is ``"cas_server/bs4/login.html"``.
 * ``CAS_WARN_TEMPLATE``: Path to the template showed on ``/login?service=...`` then
   the user is authenticated and has asked to be warned before being connected
-  to a service. The default is ``"cas_server/warn.html"``.
+  to a service. The default is ``"cas_server/bs4/warn.html"``.
 * ``CAS_LOGGED_TEMPLATE``: Path to the template showed on ``/login`` then to user is
-  authenticated. The default is ``"cas_server/logged.html"``.
+  authenticated. The default is ``"cas_server/bs4/logged.html"``.
 * ``CAS_LOGOUT_TEMPLATE``: Path to the template showed on ``/logout`` then to user
-  is being disconnected. The default is ``"cas_server/logout.html"``
+  is being disconnected. The default is ``"cas_server/bs4/logout.html"``
 * ``CAS_REDIRECT_TO_LOGIN_AFTER_LOGOUT``: Should we redirect users to ``/login`` after they
   logged out instead of displaying ``CAS_LOGOUT_TEMPLATE``. The default is ``False``.
 
+Note that the old bootstrap3 template is available in ``cas_server/bs3/``
+
 
 Authentication settings
 -----------------------

cas_server/default_settings.py

@@ -39,17 +39,19 @@ CAS_COMPONENT_URLS = {
     "bootstrap3_js": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js",
     "html5shiv": "//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js",
     "respond": "//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js",
+    "bootstrap4_css": "//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css",
+    "bootstrap4_js": "//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js",
     "jquery": "//code.jquery.com/jquery.min.js",
 }
 #: Path to the template showed on /login then the user is not autenticated.
-CAS_LOGIN_TEMPLATE = 'cas_server/login.html'
+CAS_LOGIN_TEMPLATE = 'cas_server/bs4/login.html'
 #: Path to the template showed on /login?service=... then the user is authenticated and has asked
 #: to be warned before being connected to a service.
-CAS_WARN_TEMPLATE = 'cas_server/warn.html'
+CAS_WARN_TEMPLATE = 'cas_server/bs4/warn.html'
 #: Path to the template showed on /login then to user is authenticated.
-CAS_LOGGED_TEMPLATE = 'cas_server/logged.html'
+CAS_LOGGED_TEMPLATE = 'cas_server/bs4/logged.html'
 #: Path to the template showed on /logout then to user is being disconnected.
-CAS_LOGOUT_TEMPLATE = 'cas_server/logout.html'
+CAS_LOGOUT_TEMPLATE = 'cas_server/bs4/logout.html'
 #: Should we redirect users to /login after they logged out instead of displaying
 #: :obj:`CAS_LOGOUT_TEMPLATE`.
 CAS_REDIRECT_TO_LOGIN_AFTER_LOGOUT = False

cas_server/static/cas_server/bs4/fa-lock.svg

@@ -0,0 +1,2 @@
+<!-- Icon by Font Awesome, https://fontawesome.com/, Creative Common 4.0 Attribution -->
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>

cas_server/static/cas_server/bs4/fa-user.svg

@@ -0,0 +1,2 @@
+<!-- Icon by Font Awesome, https://fontawesome.com/, Creative Common 4.0 Attribution -->
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>

cas_server/static/cas_server/bs4/styles.css

@@ -0,0 +1,34 @@
+html, body {
+  height: 100%;
+  background-color: #eee;
+}
+.cover-container {
+  max-width: 50em;
+}
+
+/* Page title */
+#app-name {
+  color: #000;
+  text-shadow: 0 .05rem .2rem rgba(255, 255, 255, .5);
+}
+#app-name img {
+  width: 110px;
+  margin-right: 1rem;
+}
+@media screen and (max-width: 680px) {
+  #app-name img {
+      display: block;
+      margin: auto;
+  }
+}
+
+/* Add icons to login form */
+/* Font-Awesome attribution is already done inside SVG files */
+.form-signin input[type="text"] {
+  background: right 1rem top 50% / 5% no-repeat url('fa-user.svg');
+  padding-right: 3rem;
+}
+.form-signin input[type="password"] {
+  background: right 1rem top 50% / 5% no-repeat url('fa-lock.svg');
+  padding-right: 3rem;
+}

cas_server/templates/cas_server/bs3/base.html

@@ -13,7 +13,7 @@
         <script src="{{settings.CAS_COMPONENT_URLS.respond}}"></script>
         <![endif]-->
         {% if settings.CAS_FAVICON_URL %}<link rel="shortcut icon" href="{{settings.CAS_FAVICON_URL}}" />{% endif %}
-        <link href="{% static "cas_server/styles.css" %}" rel="stylesheet">
+        <link href="{% static "cas_server/bs3/styles.css" %}" rel="stylesheet">
     </head>
     <body>
       <div id="wrap">

cas_server/templates/cas_server/bs3/logged.html

@@ -1,4 +1,4 @@
-{% extends "cas_server/base.html" %}
+{% extends "cas_server/bs3/base.html" %}
 {% load i18n %}
 {% block content %}
 <div class="alert alert-success" role="alert">{% blocktrans %}<h3>Log In Successful</h3>You have successfully logged into the Central Authentication Service.<br/>For security reasons, please Log Out and Exit your web browser when you are done accessing services that require authentication!{% endblocktrans %}</div>

cas_server/templates/cas_server/bs3/login.html

@@ -1,4 +1,4 @@
-{% extends "cas_server/base.html" %}
+{% extends "cas_server/bs3/base.html" %}
 {% load i18n %}
 
 {% block ante_messages %}
@@ -9,7 +9,7 @@
 {% block content %}
 <form class="form-signin" method="post" id="login_form"{% if post_url %} action="{{post_url}}"{% endif %}>
   {% csrf_token %}
-  {% include "cas_server/form.html" %}
+  {% include "cas_server/bs3/form.html" %}
   {% if auto_submit %}<noscript>{% endif %}
   <button class="btn btn-primary btn-block btn-lg" type="submit">{% trans "Login" %}</button>
   {% if auto_submit %}</noscript>{% endif %}

cas_server/templates/cas_server/bs3/logout.html

@@ -1,4 +1,4 @@
-{% extends "cas_server/base.html" %}
+{% extends "cas_server/bs3/base.html" %}
 {% load static %}
 {% load i18n %}
 {% block content %}

cas_server/templates/cas_server/bs3/warn.html

@@ -1,11 +1,11 @@
-{% extends "cas_server/base.html" %}
+{% extends "cas_server/bs3/base.html" %}
 {% load static %}
 {% load i18n %}
 
 {% block content %}
       <form class="form-signin" method="post">
 {% csrf_token %}
-{% include "cas_server/form.html" %}
+{% include "cas_server/bs3/form.html" %}
 <button class="btn btn-primary btn-block btn-lg" type="submit">{% trans "Connect to the service" %}</button>
       </form>
 {% endblock %}

cas_server/templates/cas_server/bs4/base.html

@@ -0,0 +1,91 @@
+{% load i18n %}{% load static %}{% get_current_language as LANGUAGE_CODE %}<!DOCTYPE html>
+<html{% if LANGUAGE_CODE %} lang="{{LANGUAGE_CODE}}"{% endif %}>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>{% block title %}{% trans "Central Authentication Service"  %}{% endblock %}</title>
+        <link href="{{settings.CAS_COMPONENT_URLS.bootstrap4_css}}" rel="stylesheet" crossorigin="anonymous">
+        {% if settings.CAS_FAVICON_URL %}<link rel="shortcut icon" href="{{settings.CAS_FAVICON_URL}}" />{% endif %}
+        <link href="{% static "cas_server/bs4/styles.css" %}" rel="stylesheet">
+    </head>
+    <body>
+      <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
+        {% if auto_submit %}<noscript>{% endif %}
+        <header class="mb-auto">
+          <h1 id="app-name" class="text-center">
+            {% if settings.CAS_LOGO_URL %}<img src="{{settings.CAS_LOGO_URL}}" alt="cas-logo" />{% endif %}
+            {% trans "Central Authentication Service" %}
+          </h1>
+          {% for msg in CAS_INFO_RENDER %}
+            <div class="alert alert-{{msg.type}}{% if msg.discardable %} alert-dismissable{% endif %}">
+              {% if msg.discardable %}<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{% endif %}
+              {{msg.message}}
+            </div>
+          {% endfor %}
+          {% if settings.CAS_NEW_VERSION_HTML_WARNING and upgrade_available %}
+            <div class="alert alert-info alert-dismissable">
+              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+              <p>{% blocktrans %}A new version of the application is available. This instance runs {{VERSION}} and the last version is {{LAST_VERSION}}. Please consider upgrading.{% endblocktrans %}</p>
+            </div>
+          {% endif %}
+        </header>
+        {% if auto_submit %}</noscript>{% endif %}
+
+        <main class="card border-dark mx-auto" style="max-width: 30rem;">
+          {% block ante_messages %}{% endblock %}
+          <div class="card-body">
+            {% for message in messages %}
+              <div {% spaceless %}
+                  {% if message.level == message_levels.DEBUG %}
+                      class="alert alert-warning"
+                  {% elif message.level == message_levels.INFO %}
+                      class="alert alert-info"
+                  {% elif message.level == message_levels.SUCCESS %}
+                      class="alert alert-success"
+                  {% elif message.level == message_levels.WARNING %}
+                      class="alert alert-warning"
+                  {% else %}
+                      class="alert alert-danger"
+                  {% endif %}
+              {% endspaceless %}>
+                  <p>{{message}}</p>
+              </div>
+            {% endfor %}
+            {% block content %}{% endblock %}
+          </div>
+        </main>
+
+        {% if settings.CAS_SHOW_POWERED %}
+        <footer class="mt-auto">
+            <p class="text-center">
+              <a class="text-muted" href="https://pypi.org/project/django-cas-server/">
+                django-cas-server powered
+              </a>
+            </p>
+        </footer>
+        {% endif %}
+      </div>
+
+      <script src="{{settings.CAS_COMPONENT_URLS.jquery}}" crossorigin="anonymous"></script>
+      <script src="{{settings.CAS_COMPONENT_URLS.bootstrap4_js}}" crossorigin="anonymous"></script>
+      <script src="{% static "cas_server/functions.js" %}"></script>
+      <script type="text/javascript">
+      {% if settings.CAS_NEW_VERSION_HTML_WARNING and upgrade_available %}
+      discard_and_remember("#alert-version", "cas-alert-version", "{{LAST_VERSION}}");
+      {% endif %}
+      {% for msg in CAS_INFO_RENDER %}
+      {% if msg.discardable %}
+      discard_and_remember("#info-{{msg.name}}", "cas-info-{{msg.name}}", "{{msg.hash}}");
+      {% endif %}
+      {% endfor %}
+      {% block javascript_inline %}{% endblock %}
+      </script>
+      {% block javascript %}{% endblock %}
+    </body>
+</html>
+<!--
+Powered by django-cas-server version {{VERSION}}
+
+Pypi: https://pypi.org/project/django-cas-server/
+github: https://github.com/nitmir/django-cas-server
+-->

cas_server/templates/cas_server/bs4/form.html

@@ -0,0 +1,33 @@
+{% load cas_server %}
+
+{% for error in form.non_field_errors %}
+  <div class="alert alert-danger alert-dismissable">
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    {{error}}
+  </div>
+{% endfor %}
+
+{% for field in form %}{% if not field|is_hidden %}
+<div class="form-group
+  {% if not form.non_field_errors %}
+    {% if field.errors %} has-error
+    {% elif form.cleaned_data %} has-success
+    {% endif %}
+  {% endif %}"
+>{% spaceless %}
+  {% if field|is_checkbox %}
+    <div class="form-check">
+      <span class="form-check-input mt-0">{{field}}</span>
+      <label class="form-check-label" for="{{field.auto_id}}">
+        {{field.label}}
+      </label>
+    </div>
+  {% else %}
+    <label class="control-label" for="{{field.auto_id}}">{{field.label|capfirst}}</label>
+    {{field}}
+  {% endif %}
+  {% for error in field.errors %}
+    <span class="help-block">{{error}}</span>
+  {% endfor %}
+{% endspaceless %}</div>
+{% else %}{{field}}{% endif %}{% endfor %}

cas_server/templates/cas_server/bs4/logged.html

@@ -0,0 +1,21 @@
+{% extends "cas_server/bs4/base.html" %}
+{% load i18n %}
+{% block content %}
+<div class="alert alert-success" role="alert">{% blocktrans %}<h3>Log In Successful</h3>You have successfully logged into the Central Authentication Service.<br/>For security reasons, please Log Out and Exit your web browser when you are done accessing services that require authentication!{% endblocktrans %}</div>
+<form class="form-signin" method="get" action="logout">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" name="all" value="1">{% trans "Log me out from all my sessions" %}
+    </label>
+  </div>
+  {% if settings.CAS_FEDERATE and request.COOKIES.remember_provider %}
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" name="forget_provider" value="1">{% trans "Forget the identity provider" %}
+    </label>
+  </div>
+  {% endif %}
+  <button class="btn btn-danger btn-block btn-lg" type="submit">{% trans "Logout" %}</button>
+</form>
+{% endblock %}
+

cas_server/templates/cas_server/bs4/login.html

@@ -0,0 +1,33 @@
+{% extends "cas_server/bs4/base.html" %}
+{% load i18n %}
+
+{% block ante_messages %}
+  {% if auto_submit %}<noscript>{% endif %}
+  <div class="card-header text-center">
+    <h2 class="form-signin-heading">{% trans "Please log in" %}</h2>
+  </div>
+  {% if auto_submit %}</noscript>{% endif %}
+{% endblock %}
+
+{% block content %}
+  <form class="form-signin" method="post" id="login_form"{% if post_url %} action="{{post_url}}"{% endif %}>
+    {% csrf_token %}
+    {% include "cas_server/bs4/form.html" %}
+    {% if auto_submit %}<noscript>{% endif %}
+    <button class="btn btn-primary btn-block btn-lg" type="submit">{% trans "Login" %}</button>
+    {% if auto_submit %}</noscript>{% endif %}
+  </form>
+{% endblock %}
+
+{% block javascript_inline %}
+jQuery(function( $ ){
+  $("#id_warn").click(function(e){
+    if($("#id_warn").is(':checked')){
+      createCookie("warn", "on", 10 * 365);
+    } else {
+      eraseCookie("warn");
+    }
+  });
+});
+{% if auto_submit %}document.getElementById('login_form').submit(); // SUBMIT FORM{% endif %}
+{% endblock %}

cas_server/templates/cas_server/bs4/logout.html

@@ -0,0 +1,7 @@
+{% extends "cas_server/bs4/base.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+<div class="alert alert-success" role="alert">{{logout_msg}}</div>
+{% endblock %}
+

cas_server/templates/cas_server/bs4/warn.html

@@ -0,0 +1,11 @@
+{% extends "cas_server/bs4/base.html" %}
+{% load static %}
+{% load i18n %}
+
+{% block content %}
+      <form class="form-signin" method="post">
+{% csrf_token %}
+{% include "cas_server/bs4/form.html" %}
+<button class="btn btn-primary btn-block btn-lg" type="submit">{% trans "Connect to the service" %}</button>
+      </form>
+{% endblock %}