Add login templates

lglog/settings.py

@@ -38,6 +38,8 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
 
+    'crispy_forms',
+
     'lg',
 ]
 
@@ -130,3 +132,12 @@ USE_TZ = True
 STATIC_URL = '/static/'
 
 STATIC_ROOT = BASE_DIR / 'static'
+
+STATICFILES_DIRS = [
+    BASE_DIR / 'lglog/static',
+    '/usr/share/javascript',
+]
+
+CRISPY_TEMPLATE_PACK = 'bootstrap4'
+
+DJANGO_TABLES2_TEMPLATE = 'django_tables2/bootstrap4.html'

lglog/static/css/custom.css

@@ -0,0 +1,96 @@
+.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;
+    width: 200px;
+}
+
+.bs-tooltip-bottom .arrow::before {
+    border-bottom-color: rgba(0, 0, 0, .250);
+}
+
+/* Fixed width picture column */
+.picture-col {
+    max-width: 202px;
+}
+
+/* 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;
+    cursor: pointer;
+}
+
+/* Remove horizontal padding on mark */
+.mark,
+mark {
+    padding: .2em 0;
+}
+
+/* Make navbar more readable */
+.navbar-dark .navbar-nav .nav-link {
+    color: rgba(255, 255, 255, .75);
+}
+
+/* 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);
+}
+
+.btn-outline-primary:hover,
+.btn-outline-primary:not(:disabled):not(.disabled).active,
+.btn-outline-primary:not(:disabled):not(.disabled):active {
+    color: #fff;
+    background-color: rgb(0, 119, 139);
+    border-color: rgb(0, 119, 139);
+}
+
+.btn-outline-primary {
+    color: rgb(0, 119, 139);
+    background-color: rgba(248, 249, 250, 0.9);
+    border-color: rgb(0, 119, 139);
+}
+
+.turbolinks-progress-bar {
+    background-color: #01D3FB;
+}

lglog/static/css/login.css

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

lglog/static/img/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>

lglog/static/img/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>

lglog/templates/registration/logged_out.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n %}
+
+{% 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 %}

lglog/templates/registration/login.html

@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-2.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags static %}
+{% block title %}{% trans "Log in" %}{% endblock %}
+
+{% block extracss %}
+<link rel="stylesheet" href="{% static "css/login.css" %}">
+{% endblock %}
+
+{% block content %}
+<div class="card bg-light mx-auto" style="max-width: 30rem;">
+    <h3 class="card-header text-center">
+        {% trans "Log in" %}
+    </h3>
+    <div class="card-body">
+        {% if user.is_authenticated %}
+        <div class="alert alert-warning">
+            {% blocktrans trimmed with username=request.user.username %}
+            You are authenticated as {{ username }}, but are not authorized to
+            access this page. Would you like to login to a different account,
+            or with a higher permission mask?
+            {% endblocktrans %}
+        </div>
+        {% endif %}
+
+        {% if request.resolver_match.view_name == 'admin:login' %}
+        <div class="alert alert-info">
+            {% blocktrans trimmed %}
+            You must be logged with a staff account with the higher mask to access Django Admin.
+            {% endblocktrans %}
+        </div>
+        {% endif %}
+
+        <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>
+        </form>
+    </div>
+</div>
+{% endblock %}

lglog/templates/registration/password_change_done.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n %}
+
+{% 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 %}

lglog/templates/registration/password_change_form.html

@@ -0,0 +1,20 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
+
+{% 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 %}

lglog/templates/registration/password_reset_complete.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n %}
+
+{% 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 %}

lglog/templates/registration/password_reset_confirm.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
+
+{% 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 %}
+            {{ form | crispy }}
+            <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>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}

lglog/templates/registration/password_reset_done.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n %}
+
+{% 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 %}

lglog/templates/registration/password_reset_form.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
+
+{% 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 | crispy }}
+            <input class="btn btn-primary" type="submit" value="{% trans 'Reset my password' %}">
+        </form>
+    </div>
+</div>
+{% endblock %}

requirements.txt

@@ -1,4 +1,5 @@
 Django~=3.1
+django-crispy-forms
 django-polymorphic~=3.0
 django-tables2~=2.3
 gunicorn~=20.0