From 50f4a433436eb5e78a24e7fcb383b661fe14b8a3 Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Mon, 10 Aug 2020 11:31:35 +0200
Subject: [PATCH] Custom CSS and card for login page
---
.../static/registration/fa-lock.svg | 2 +
.../static/registration/fa-user.svg | 2 +
.../static/registration/login.css | 14 +++++
.../templates/registration/login.html | 58 +++++++++++--------
4 files changed, 53 insertions(+), 23 deletions(-)
create mode 100644 apps/registration/static/registration/fa-lock.svg
create mode 100644 apps/registration/static/registration/fa-user.svg
create mode 100644 apps/registration/static/registration/login.css
diff --git a/apps/registration/static/registration/fa-lock.svg b/apps/registration/static/registration/fa-lock.svg
new file mode 100644
index 00000000..24b8dc75
--- /dev/null
+++ b/apps/registration/static/registration/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>
\ No newline at end of file
diff --git a/apps/registration/static/registration/fa-user.svg b/apps/registration/static/registration/fa-user.svg
new file mode 100644
index 00000000..ac145d32
--- /dev/null
+++ b/apps/registration/static/registration/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>
\ No newline at end of file
diff --git a/apps/registration/static/registration/login.css b/apps/registration/static/registration/login.css
new file mode 100644
index 00000000..744e8485
--- /dev/null
+++ b/apps/registration/static/registration/login.css
@@ -0,0 +1,14 @@
+/*
+Add icons to login form
+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');
+ padding-right: 3rem;
+}
+
+#login-form input[type="password"] {
+ background: right 1rem top 50% / 5% no-repeat url('fa-lock.svg');
+ padding-right: 3rem;
+}
\ No newline at end of file
diff --git a/apps/registration/templates/registration/login.html b/apps/registration/templates/registration/login.html
index e624631f..7cdec5b3 100644
--- a/apps/registration/templates/registration/login.html
+++ b/apps/registration/templates/registration/login.html
@@ -2,33 +2,45 @@
{% comment %}
SPDX-License-Identifier: GPL-2.0-or-later
{% endcomment %}
-{% load i18n crispy_forms_tags %}
+{% load i18n crispy_forms_tags static %}
+{# Change page title without displaying it in header #}
{% block title %}{% trans "Log in" %}{% endblock %}
-{% block contenttitle %}<h1>{% trans "Log in" %}</h1>{% endblock %}
+{% block contenttitle %}{% endblock %}
+
+{% block extracss %}
+<link rel="stylesheet" href="{% static "registration/login.css" %}">
+{% endblock %}
{% block content %}
- {% if user.is_authenticated %}
- <p class="errornote">
- {% 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 %}
- </p>
- {% endif %}
+ <main class="card border-dark mx-auto" style="max-width: 30rem;">
+ <h3 class="card-header text-center">
+ {% trans "Log in" %}
+ </h3>
+ <div class="card-body">
+ {% if user.is_authenticated %}
+ <p class="errornote">
+ {% 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 %}
+ </p>
+ {% 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 %}
+ {% 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">
- <a href="{% url 'password_reset' %}" class="badge badge-light">{% trans 'Forgotten your password or username?' %}</a>
- </form>
+ <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>
+ </main>
{% endblock %}
--
GitLab