Merge branch 'color_front' into 'beta'

Color front

See merge request bde/nk20!94

apps/member/templates/member/user_list.html

@@ -1,14 +1,26 @@
 {% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load render_table from django_tables2 %}
-{% load crispy_forms_tags %}
+{% load i18n crispy_forms_tags perms %}
-{% load i18n %}
+{% block contenttitle %}{% endblock %}
-{% load perms %}
 
 {% block content %}
-    <input id="searchbar" type="text" class="form-control" placeholder="Nom/prénom/note/section ...">
+{% if "member.change_profile_registration_valid"|has_perm:user %}
-
+<a class="btn btn-block btn-secondary mb-3" href="{% url 'registration:future_user_list' %}">
-    <hr>
+    <i class="fas fa-user-plus"></i> {% trans "Registrations" %}
+</a>
+{% endif %}
 
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
+        <input id="searchbar" type="text" class="form-control" placeholder="Nom/prénom/note/section...">
+    </div>
+    <div class="card-body">
         <div id="user_table">
             {% if table.data %}
             {% render_table table %}
@@ -18,54 +30,46 @@
             </div>
             {% endif %}
         </div>
-
+    </div>
-    <hr>
+</div>
-
-    {% if "member.change_profile_registration_valid"|has_perm:user %}
-        <a class="btn btn-block btn-secondary" href="{% url 'registration:future_user_list' %}">
-            <i class="fas fa-user-plus"></i> {% trans "Registrations" %}
-        </a>
-    {% endif %}
 {% endblock %}
 
 {% block extrajavascript %}
 <script type="text/javascript">
-    $(document).ready(function() {
+    let pattern = '';
-        let old_pattern = null;
-        let searchbar_obj = $("#searchbar");
-        var timer_on = false;
-        var timer;
 
     function reloadTable() {
-            let pattern = searchbar_obj.val();
+        pattern = $("#searchbar").val();
 
-            if (pattern === old_pattern || pattern === "")
+        if (pattern.length > 2)
-                return;
+            $("#user_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #user_table", init_table);
-
-            $("#user_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #user_table", init);
     }
 
-        searchbar_obj.keyup(function() {
+    function init_table() {
-            if (timer_on)
+        // On row click, go to object
-                clearTimeout(timer);
+        $(".table-row").click(function () {
-            timer_on = true;
-            setTimeout(reloadTable, 0);
-        });
-
-        function init() {
-            $(".table-row").click(function() {
             window.document.location = $(this).data("href");
-                timer_on = false;
         });
 
-            $("tr").each(function() {
+        // Highlight searched terms
-                $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function() {
+        $("tr").each(function () {
-                    $(this).html($(this).text().replace(new RegExp(searchbar_obj.val(), 'i'), "<mark>$&</mark>"));
+            $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function () {
+                $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
             });
         });
     }
 
-        init();
+    $(document).ready(function () {
+        // Recover last search from url
+        let searchParams = new URLSearchParams(window.location.search)
+        if (searchParams.has('search'))
+            pattern = searchParams.get('search');
+
+        // On search, refresh table
+        $("#searchbar").keyup(debounce(reloadTable, 300));
+
+        // First init
+        init_table();
     });
 </script>
 {% endblock %}

apps/note/templates/note/conso_form.html

@@ -14,7 +14,7 @@
             <div class="row">
                 {# User details column #}
                 <div class="col">
-                    <div class="card border-success shadow mb-4 text-center">
+                    <div class="card bg-light border-success mb-4 text-center">
                         <a id="profile_pic_link" href="#">
                             <img src="/media/pic/default.png"
                                  id="profile_pic" alt="" class="card-img-top">
@@ -27,7 +27,7 @@
 
                 {# User selection column #}
                 <div class="col-xl-7" id="user_select_div">
-                    <div class="card border-success shadow mb-4">
+                    <div class="card bg-light border-success mb-4">
                         <div class="card-header">
                             <p class="card-text font-weight-bold">
                                 {% trans "Consum" %}
@@ -47,7 +47,7 @@
                 </div>
                 {# Summary of consumption and consume button #}
                 <div class="col-xl-5 d-none" id="consos_list_div">
-                    <div class="card border-info shadow mb-4">
+                    <div class="card bg-light border-info mb-4">
                         <div class="card-header">
                             <p class="card-text font-weight-bold">
                                 {% trans "Select consumptions" %}
@@ -70,7 +70,7 @@
         {# Buttons column #}
         <div class="col">
             {# Show last used buttons #}
-            <div class="card shadow mb-4">
+            <div class="card bg-light mb-4">
                 <div class="card-header">
                     <p class="card-text font-weight-bold">
                         {% trans "Highlighted buttons" %}
@@ -92,7 +92,7 @@
 
             {# Regroup buttons under categories #}
 
-            <div class="card border-primary text-center shadow mb-4">
+            <div class="card bg-light border-primary text-center mb-4">
                 {# Tabs for button categories #}
                 <div class="card-header">
                     <ul class="nav nav-tabs nav-fill card-header-tabs">

apps/note/templates/note/transaction_form.html

@@ -37,7 +37,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
     <div class="row">
         {#  Preview note profile (picture, username and balance) #}
         <div class="col-md-3" id="note_infos_div">
-            <div class="card border-success shadow mb-4">
+            <div class="card bg-light border-success shadow mb-4">
                 <a id="profile_pic_link" href="#"><img src="/media/pic/default.png"
                         id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block"></a>
                 <div class="card-body text-center">
@@ -45,9 +45,10 @@ SPDX-License-Identifier: GPL-2.0-or-later
                 </div>
             </div>
         </div>
+
         {# list of emitters #}
         <div class="col-md-3" id="emitters_div">
-            <div class="card border-success shadow mb-4">
+            <div class="card bg-light border-success shadow mb-4">
                 <div class="card-header">
                     <p class="card-text font-weight-bold">
                         {% trans "Select emitters" %}
@@ -66,9 +67,10 @@ SPDX-License-Identifier: GPL-2.0-or-later
                 </div>
             </div>
         </div>
-{# list of receiver #}
+
+        {# list of receiver #}
         <div class="col-md-3" id="dests_div">
-            <div class="card border-info shadow mb-4">
+            <div class="card bg-light border-info shadow mb-4">
                 <div class="card-header">
                     <p class="card-text font-weight-bold" id="dest_title">
                         {% trans "Select receivers" %}
@@ -83,9 +85,10 @@ SPDX-License-Identifier: GPL-2.0-or-later
                 </div>
             </div>
         </div>
-{# Information on transaction (amount, reason, name,...) #}
+
+        {# Information on transaction (amount, reason, name,...) #}
         <div class="col-md-3" id="external_div">
-            <div class="card border-warning shadow mb-4">
+            <div class="card bg-light border-warning shadow mb-4">
                 <div class="card-header">
                     <p class="card-text font-weight-bold">
                         {% trans "Action" %}

apps/registration/static/registration/login.css

@@ -4,11 +4,15 @@ Font-Awesome attribution is already done inside SVG files
 */
 
 #login-form input[type="text"] {
-    background: right 1rem top 50% / 5% no-repeat url('fa-user.svg');
+    background: #fff right 1rem top 50% / 5% no-repeat url('fa-user.svg');
     padding-right: 3rem;
 }
 
 #login-form input[type="password"] {
-    background: right 1rem top 50% / 5% no-repeat url('fa-lock.svg');
+    background: #fff right 1rem top 50% / 5% no-repeat url('fa-lock.svg');
     padding-right: 3rem;
 }
+
+#login-form select {
+    -moz-appearance: none;
+}

note_kfet/static/css/custom.css

@@ -0,0 +1,56 @@
+.validate:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+/* Opaque tooltip with white background */
+.tooltip.show {
+   opacity: 1;
+}
+.tooltip-inner {
+    background-color: #fff;
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+    border: 1px solid rgba(0,0,0,.250);
+    color: #000;
+    margin: 0 .5rem .25rem .5rem;
+    padding: 0;
+}
+.bs-tooltip-bottom .arrow::before {
+    border-bottom-color: rgba(0,0,0,.250);
+}
+
+/* Limit fluid container to a max size */
+.container-fluid {
+    max-width: 1600px;
+}
+
+/* Apply Bootstrap table-responsive to all Django tables */
+.table-container {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* Smaller language selector */
+select.language {
+    padding: 0;
+    background: transparent;
+    border: none;
+    height: calc(1.5em + .5rem);
+    color: #6c757d;
+    -moz-appearance: none;
+    width: auto;
+}
+
+/* Last BDE colors */
+.bg-primary {
+    background-color: rgb(0, 119, 139) !important;
+}
+html {
+    scrollbar-color: rgba(121, 121, 123, 1) rgba(35, 35, 39, 1);
+}
+body {
+    background-color: rgba(64, 64, 64, 1);
+    background-image: url(../img/background-texture.png);
+}

note_kfet/static/js/base.js

@@ -7,7 +7,7 @@
  * @param value the balance, in cents
  * @returns {string}
  */
-function pretty_money(value) {
+function pretty_money (value) {
     if (value % 100 === 0)
         return (value < 0 ? "- " : "") + Math.floor(Math.abs(value) / 100) + " €";
     else
@@ -21,7 +21,7 @@ function pretty_money(value) {
  * @param alert_type The type of the alert. Choices: info, success, warning, danger
  * @param timeout The delay (in millis) after that the message is auto-closed. If negative, then it is ignored.
  */
-function addMsg(msg, alert_type, timeout = -1) {
+function addMsg (msg, alert_type, timeout = -1) {
     let msgDiv = $("#messages");
     let html = msgDiv.html();
     let id = Math.floor(10000 * Math.random() + 1);
@@ -42,7 +42,7 @@ function addMsg(msg, alert_type, timeout = -1) {
  * @param errs_obj [{error_code:erro_message}]
  * @param timeout The delay (in millis) after that the message is auto-closed. If negative, then it is ignored.
  */
-function errMsg(errs_obj, timeout = -1) {
+function errMsg (errs_obj, timeout = -1) {
     for (const err_msg of Object.values(errs_obj)) {
         addMsg(err_msg, 'danger', timeout);
     }
@@ -51,9 +51,9 @@ function errMsg(errs_obj, timeout = -1) {
 var reloadWithTurbolinks = (function () {
     var scrollPosition;
 
-    function reload() {
+    function reload () {
         scrollPosition = [window.scrollX, window.scrollY];
-        Turbolinks.visit(window.location.toString(), {action: 'replace'})
+        Turbolinks.visit(window.location.toString(), { action: 'replace' })
     }
 
     document.addEventListener('turbolinks:load', function () {
@@ -69,7 +69,7 @@ var reloadWithTurbolinks = (function () {
 /**
  * Reload the balance of the user on the right top corner
  */
-function refreshBalance() {
+function refreshBalance () {
     $("#user_balance").load("/ #user_balance");
 }
 
@@ -78,14 +78,14 @@ function refreshBalance() {
  * @param pattern The pattern that is queried
  * @param fun For each found note with the matched alias `alias`, fun(note, alias) is called.
  */
-function getMatchedNotes(pattern, fun) {
+function getMatchedNotes (pattern, fun) {
     $.getJSON("/api/note/alias/?format=json&alias=" + pattern + "&search=user|club&ordering=normalized_name", fun);
 }
 
 /**
  * Generate a <li> entry with a given id and text
  */
-function li(id, text, extra_css) {
+function li (id, text, extra_css) {
     return "<li class=\"list-group-item py-1 px-2 d-flex justify-content-between align-items-center text-truncate "
         + (extra_css ? extra_css : "") + "\"" + " id=\"" + id + "\">" + text + "</li>\n";
 }
@@ -94,7 +94,7 @@ function li(id, text, extra_css) {
  * Return style to apply according to the balance of the note and the validation status of the email address
  * @param note The concerned note.
  */
-function displayStyle(note) {
+function displayStyle (note) {
     if (!note)
         return "";
     let balance = note.balance;
@@ -120,7 +120,7 @@ function displayStyle(note) {
  * @param user_note_field
  * @param profile_pic_field
  */
-function displayNote(note, alias, user_note_field = null, profile_pic_field = null) {
+function displayNote (note, alias, user_note_field = null, profile_pic_field = null) {
     if (!note.display_image) {
         note.display_image = '/media/pic/default.png';
     }
@@ -152,7 +152,7 @@ function displayNote(note, alias, user_note_field = null, profile_pic_field = nu
  *                          (useful in consumptions, put null if not used)
  * @returns an anonymous function to be compatible with jQuery events
  */
-function removeNote(d, note_prefix = "note", notes_display, note_list_id, user_note_field = null, profile_pic_field = null) {
+function removeNote (d, note_prefix = "note", notes_display, note_list_id, user_note_field = null, profile_pic_field = null) {
     return (function () {
         let new_notes_display = [];
         let html = "";
@@ -199,7 +199,7 @@ function removeNote(d, note_prefix = "note", notes_display, note_list_id, user_n
  *                    the associated note is not displayed.
  *                    Useful for a consumption if the item is selected before.
  */
-function autoCompleteNote(field_id, note_list_id, notes, notes_display, alias_prefix = "alias",
+function autoCompleteNote (field_id, note_list_id, notes, notes_display, alias_prefix = "alias",
     note_prefix = "note", user_note_field = null, profile_pic_field = null, alias_click = null) {
     let field = $("#" + field_id);
 
@@ -348,7 +348,7 @@ function autoCompleteNote(field_id, note_list_id, notes, notes_display, alias_pr
 
 
 // When a validate button is clicked, we switch the validation status
-function de_validate(id, validated, resourcetype) {
+function de_validate (id, validated, resourcetype) {
     let validate_obj = $("#validate_" + id);
 
     if (validate_obj.data("pending"))
@@ -392,3 +392,17 @@ function de_validate(id, validated, resourcetype) {
         }
     });
 }
+
+/**
+ * Simple debouncer
+ * @param callback Function to call
+ * @param wait Debounced milliseconds
+ */
+function debounce (callback, wait) {
+    let timeout;
+    return (...args) => {
+        const context = this;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => callback.apply(context, args), wait);
+    };
+}

note_kfet/templates/base.html

@@ -22,13 +22,15 @@ SPDX-License-Identifier: GPL-3.0-or-later
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="msapplication-config" content="{% static "favicon/browserconfig.xml" %}">
     <meta name="theme-color" content="#ffffff">
-    {# Bootstrap CSS #}
+
+    {# Bootstrap, Font Awesome and custom CSS #}
     <link rel="stylesheet"
           href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
           integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
           crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
+    <link rel="stylesheet" href="{% static "css/custom.css" %}">
 
     {# JQuery, Bootstrap and Turbolinks JavaScript #}
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"
@@ -42,52 +44,19 @@ SPDX-License-Identifier: GPL-3.0-or-later
             crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js"
             crossorigin="anonymous"></script>
-    <script src="/static/js/base.js"></script>
+    <script src="{% static "js/base.js" %}"></script>
 
     {# Si un formulaire requiert des données supplémentaires (notamment JS), les données sont chargées #}
     {% if form.media %}
         {{ form.media }}
     {% endif %}
 
-    <style>
-        .validate:hover {
-            cursor: pointer;
-            text-decoration: underline;
-        }
-        .tooltip.show {
-           opacity: 1; /* opaque tooltip */
-        }
-        .tooltip-inner {
-            background-color: #fff;
-            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
-            border: 1px solid rgba(0,0,0,.250);
-            color: #000;
-            margin: 0 .5rem .25rem .5rem;
-            padding: 0;
-        }
-        .bs-tooltip-bottom .arrow::before {
-            border-bottom-color: rgba(0,0,0,.250);
-        }
-
-        /* Limit fluid container to a max size */
-        .container-fluid {
-            max-width: 1600px;
-        }
-
-        /* Apply Bootstrap table-responsive to all Django tables */
-        .table-container {
-            display: block;
-            width: 100%;
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
-        }
-    </style>
-
     {% block extracss %}{% endblock %}
 </head>
 <body class="d-flex w-100 h-100 flex-column">
 <main class="mb-auto">
-    <nav class="navbar navbar-expand-md navbar-light bg-light fixed-navbar shadow-sm">
+    <nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-navbar shadow-sm">
+        <div class="container-fluid">
             <a class="navbar-brand" href="/">{{ request.site.name }}</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse"
                     data-target="#navbarNavDropdown"
@@ -98,47 +67,47 @@ SPDX-License-Identifier: GPL-3.0-or-later
             <div class="collapse navbar-collapse" id="navbarNavDropdown">
                 <ul class="navbar-nav">
                     {% if "note.transactiontemplate"|not_empty_model_list %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'note:consos' %}"><i class="fas fa-coffee"></i> {% trans 'Consumptions' %}</a>
                         </li>
                     {% endif %}
                     {% if "note.transaction"|not_empty_model_list %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'note:transfer' %}"><i class="fas fa-exchange-alt"></i> {% trans 'Transfer' %} </a>
                         </li>
                     {% endif %}
                     {% if "auth.user"|model_list_length >= 2 %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'member:user_list' %}"><i class="fas fa-user"></i> {% trans 'Users' %}</a>
                         </li>
                     {% endif %}
                     {% if "member.club"|not_empty_model_list %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'member:club_list' %}"><i class="fas fa-users"></i> {% trans 'Clubs' %}</a>
                         </li>
                     {% endif %}
                     {% if "activity.activity"|not_empty_model_list %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'activity:activity_list' %}"><i class="fas fa-calendar"></i> {% trans 'Activities' %}</a>
                         </li>
                     {% endif %}
                     {% if "treasury.invoice"|not_empty_model_list %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'treasury:invoice_list' %}"><i class="fas fa-credit-card"></i> {% trans 'Treasury' %}</a>
                         </li>
                     {% endif %}
                     {% if "wei.weiclub"|not_empty_model_list %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'wei:current_wei_detail' %}"><i class="fas fa-bus"></i> {% trans 'WEI' %}</a>
                         </li>
                     {% endif %}
                     {% if request.user.is_authenticated %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'permission:rights' %}"><i class="fas fa-balance-scale"></i> {% trans 'Rights' %}</a>
                         </li>
                     {% endif %}
                     {% if request.user.is_staff and ""|has_perm:user %}
-                    <li class="nav-item active">
+                        <li class="nav-item">
                             <a data-turbolinks="false" class="nav-link" href="{% url 'admin:index' %}"><i class="fas fa-user-cog"></i> {% trans 'Admin' %}</a>
                         </li>
                     {% endif %}
@@ -161,19 +130,24 @@ SPDX-License-Identifier: GPL-3.0-or-later
                             </div>
                         </li>
                     {% else %}
-                    <li class="nav-item active">
+                {% if request.path != "/registration/signup/" %}
+                            <li class="nav-item">
                                 <a class="nav-link" href="{% url 'registration:signup' %}">
                                     <i class="fas fa-user-plus"></i> S'inscrire
                                 </a>
                             </li>
-                    <li class="nav-item active">
+                        {% endif %}
+                {% if request.path != "/accounts/login/" %}
+                            <li class="nav-item">
                                 <a class="nav-link" href="{% url 'login' %}">
                                     <i class="fas fa-sign-in-alt"></i> Se connecter
                                 </a>
                             </li>
                         {% endif %}
+                    {% endif %}
                 </ul>
             </div>
+        </div>
     </nav>
     <div class="{% block containertype %}container{% endblock %} my-3">
         {% if request.user.is_authenticated and not request.user.profile.email_confirmed %}
@@ -181,7 +155,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                 {% trans "Your e-mail address is not validated. Please check your mail inbox and click on the validation link." %}
             </div>
         {% endif %}
-        {% block contenttitle %}<h1>{{ title }}</h1>{% endblock %}
+        {% block contenttitle %}<h1 class="text-white">{{ title }}</h1>{% endblock %}
         <div class="alert alert-warning alert-dismissible">
             <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&#215;</button>
             Attention : la Note Kfet 2020 est en phase de beta. Des fonctionnalités pourront être rajoutées d'ici à la version
@@ -196,23 +170,22 @@ SPDX-License-Identifier: GPL-3.0-or-later
         <div id="messages"></div>
         {% block content %}
             <p>Default content...</p>
-        {% endblock content %}
+        {% endblock %}
     </div>
 </main>
-<footer class="bg-light mt-auto py-2">
+<footer class="bg-dark text-white mt-auto py-2">
     <div class="container-fluid">
         <div class="row">
-            <div class="col-sm">
+            <div class="col-10">
                 <form action="{% url 'set_language' %}" method="post"
                       class="form-inline">
                     <span class="text-muted mr-1">
-                        NoteKfet2020 &mdash;
                         <a href="mailto:{{ "CONTACT_EMAIL" | getenv }}"
                            class="text-muted">Nous contacter</a> &mdash;
                     </span>
                     {% csrf_token %}
                     <select title="language" name="language"
-                            class="custom-select custom-select-sm"
+                            class="form-control form-control-sm language"
                             onchange="this.form.submit()">
                         {% get_current_language as LANGUAGE_CODE %}
                         {% get_available_languages as LANGUAGES %}
@@ -230,8 +203,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
                     </noscript>
                 </form>
             </div>
-            <div class="col-sm text-right">
+            <div class="col text-right">
-                <a href="#" class="text-muted">Retour en haut</a>
+                <a href="#" data-turbolinks="false" class="text-muted">
+                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
+                </a>
             </div>
         </div>
     </div>
@@ -242,7 +217,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
     $(".invalid-feedback").addClass("d-block");
 </script>
 
-{% block extrajavascript %}
+{% block extrajavascript %}{% endblock %}
-{% endblock extrajavascript %}
 </body>
 </html>

note_kfet/templates/registration/logged_out.html

@@ -3,8 +3,16 @@
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 {% load i18n %}
+{% block contenttitle %}{% endblock %}
 
 {% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
         <p>{% trans "Thanks for spending some quality time with the Web site today." %}</p>
         <p><a href="{% url 'index' %}">{% trans 'Log in again' %}</a></p>
+    </div>
+</div>
 {% endblock %}

note_kfet/templates/registration/login.html

@@ -3,8 +3,6 @@
 SPDX-License-Identifier: GPL-2.0-or-later
 {% endcomment %}
 {% load i18n crispy_forms_tags static %}
-
-{# Change page title without displaying it in header #}
 {% block title %}{% trans "Log in" %}{% endblock %}
 {% block contenttitle %}{% endblock %}
 
@@ -13,7 +11,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
 {% endblock %}
 
 {% block content %}
-    <main class="card border-dark mx-auto" style="max-width: 30rem;">
+<div class="card bg-light mx-auto" style="max-width: 30rem;">
     <h3 class="card-header text-center">
         {% trans "Log in" %}
     </h3>
@@ -39,8 +37,9 @@ SPDX-License-Identifier: GPL-2.0-or-later
         <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
             {{ form | crispy }}
             <input type="submit" value="{% trans 'Log in' %}" class="btn btn-primary btn-block btn-lg">
-                <a href="{% url 'password_reset' %}" class="badge badge-light">{% trans 'Forgotten your password or username?' %}</a>
+            <a href="{% url 'password_reset' %}"
+                class="badge badge-light">{% trans 'Forgotten your password or username?' %}</a>
         </form>
     </div>
-    </main>
+</div>
 {% endblock %}

note_kfet/templates/registration/password_change_done.html

@@ -3,7 +3,15 @@
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 {% load i18n %}
+{% block contenttitle %}{% endblock %}
 
 {% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
         <p>{% trans 'Your password was changed.' %}</p>
+    </div>
+</div>
 {% endblock %}

note_kfet/templates/registration/password_change_form.html

@@ -3,11 +3,19 @@
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 {% load i18n crispy_forms_tags %}
+{% block contenttitle %}{% endblock %}
 
 {% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
         <form method="post">{% csrf_token %}
             <p>{% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}</p>
             {{ form | crispy }}
             <input class="btn btn-primary" type="submit" value="{% trans 'Change my password' %}">
         </form>
+    </div>
+</div>
 {% endblock %}

note_kfet/templates/registration/password_reset_complete.html

@@ -3,10 +3,18 @@
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 {% load i18n %}
+{% block contenttitle %}{% endblock %}
 
 {% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
         <p>{% trans "Your password has been set.  You may go ahead and log in now." %}</p>
         <p>
             <a href="{{ login_url }}" class="btn btn-success">{% trans 'Log in' %}</a>
         </p>
+    </div>
+</div>
 {% endblock %}

note_kfet/templates/registration/password_reset_confirm.html

@@ -3,8 +3,14 @@
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 {% load i18n crispy_forms_tags %}
+{% block contenttitle %}{% endblock %}
 
 {% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
         {% if validlink %}
         <p>{% trans "Please enter your new password twice so we can verify you typed it in correctly." %}</p>
         <form method="post">{% csrf_token %}
@@ -12,6 +18,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
             <input class="btn btn-primary" type="submit" value="{% trans 'Change my password' %}">
         </form>
         {% else %}
-        <p>{% trans "The password reset link was invalid, possibly because it has already been used.  Please request a new password reset." %}</p>
+        <p>
+            {% trans "The password reset link was invalid, possibly because it has already been used.  Please request a new password reset." %}
+        </p>
         {% endif %}
+    </div>
+</div>
 {% endblock %}

note_kfet/templates/registration/password_reset_done.html

@@ -3,8 +3,16 @@
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 {% load i18n %}
+{% block contenttitle %}{% endblock %}
 
 {% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
         <p>{% trans "We've emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly." %}</p>
         <p>{% trans "If you don't receive an email, please make sure you've entered the address you registered with, and check your spam folder." %}</p>
+    </div>
+</div>
 {% endblock %}

note_kfet/templates/registration/password_reset_form.html

@@ -3,11 +3,21 @@
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 {% load i18n crispy_forms_tags %}
+{% block contenttitle %}{% endblock %}
 
 {% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
         <p>{% trans "Forgotten your password? Enter your email address below, and we'll email instructions for setting a new one." %}</p>
-    <form method="post">{% csrf_token %}
+
+        <form method="post">
+            {% csrf_token %}
             {{ form | crispy }}
             <input class="btn btn-primary" type="submit" value="{% trans 'Reset my password' %}">
         </form>
+    </div>
+</div>
 {% endblock %}

note_kfet/templates/registration/signup.html

@@ -1,15 +1,23 @@
-<!-- templates/signup.html -->
 {% extends 'base.html' %}
-{% load crispy_forms_tags %}
+{% comment %}
-{% load i18n %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
 {% block title %}{% trans "Sign up" %}{% endblock %}
-
+{% block contenttitle %}{% endblock %}
-{# Use a fixed-width container #}
-{% block containertype %}container{% endblock %}
 
 {% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {% trans "Sign up" %}
+    </h3>
+    <div class="card-body">
         <div class="alert alert-warning">
-        {% blocktrans %}If you already signed up, your registration is taken into account. The BDE must validate your account before your can log in. You have to go to the Kfet and pay the registration fee. You must also validate your email address by following the link you received.{% endblocktrans %}
+            {% blocktrans trimmed %}
+            If you already signed up, your registration is taken into account. The BDE must validate
+            your account before your can log in. You have to go to the Kfet and pay the registration fee. You must also
+            validate your email address by following the link you received.
+            {% endblocktrans %}
         </div>
 
         <form method="post">
@@ -20,4 +28,6 @@
                 {% trans "Sign up" %}
             </button>
         </form>
+    </div>
+</div>
 {% endblock %}