Bootstrap 4 templates (#47)

This commit is contained in:
erdnaxe 2020-01-25 10:58:23 +00:00 committed by Valentin Samir
parent 781e516769
commit aa88bf7a67
18 changed files with 257 additions and 16 deletions

View file

@ -207,13 +207,16 @@ Template settings
* ``CAS_SHOW_POWERED``: Set it to ``False`` to hide the powered by footer. The default is ``True``. * ``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 * ``CAS_COMPONENT_URLS``: URLs to css and javascript external components. It is a dictionnary
having the five following keys: ``"bootstrap3_css"``, ``"bootstrap3_js"``, 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_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", "bootstrap3_js": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js",
"html5shiv": "//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.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", "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", "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 * ``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 ``[]``. 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 * ``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 * ``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 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 * ``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 * ``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 * ``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``. 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 Authentication settings
----------------------- -----------------------

View file

@ -39,17 +39,19 @@ CAS_COMPONENT_URLS = {
"bootstrap3_js": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js", "bootstrap3_js": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js",
"html5shiv": "//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.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", "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", "jquery": "//code.jquery.com/jquery.min.js",
} }
#: Path to the template showed on /login then the user is not autenticated. #: 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 #: 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. #: 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. #: 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. #: 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 #: Should we redirect users to /login after they logged out instead of displaying
#: :obj:`CAS_LOGOUT_TEMPLATE`. #: :obj:`CAS_LOGOUT_TEMPLATE`.
CAS_REDIRECT_TO_LOGIN_AFTER_LOGOUT = False CAS_REDIRECT_TO_LOGIN_AFTER_LOGOUT = False

View file

@ -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>

After

Width:  |  Height:  |  Size: 529 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 573 B

View file

@ -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;
}

View file

@ -13,7 +13,7 @@
<script src="{{settings.CAS_COMPONENT_URLS.respond}}"></script> <script src="{{settings.CAS_COMPONENT_URLS.respond}}"></script>
<![endif]--> <![endif]-->
{% if settings.CAS_FAVICON_URL %}<link rel="shortcut icon" href="{{settings.CAS_FAVICON_URL}}" />{% 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> </head>
<body> <body>
<div id="wrap"> <div id="wrap">

View file

@ -1,4 +1,4 @@
{% extends "cas_server/base.html" %} {% extends "cas_server/bs3/base.html" %}
{% load i18n %} {% load i18n %}
{% block content %} {% 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> <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>

View file

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

View file

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

View file

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

View file

@ -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
-->

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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 %}