From 7d56fe15a9d79220c9192120125d51de063a60c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20P=C3=A9pin?= Date: Mon, 18 May 2020 01:27:12 +0200 Subject: [PATCH 1/7] Templates: first draft --- authens/static/authens/css/authens.css | 69 +++++++++++++++++++++ authens/templates/authens/base.html | 22 +++++++ authens/templates/authens/login_switch.html | 36 ++++++----- authens/templates/authens/pwd_login.html | 51 +++++---------- example_site/example_site/settings.py | 6 +- 5 files changed, 132 insertions(+), 52 deletions(-) create mode 100644 authens/static/authens/css/authens.css create mode 100644 authens/templates/authens/base.html diff --git a/authens/static/authens/css/authens.css b/authens/static/authens/css/authens.css new file mode 100644 index 0000000..7242e10 --- /dev/null +++ b/authens/static/authens/css/authens.css @@ -0,0 +1,69 @@ +html, body { + width: 100%; + background: #ccc; + font-family: monospace; + margin: 0; + padding: 0; +} + +#container { + display: flex; + flex-flow: row wrap; + padding: 10% 1em; + min-width: 300px; + max-width: 900px; + margin: auto; +} + +h2 { + margin: 0; + padding: 15px; + width: 100%; + background: #505160; + color: white; + font-weight: initial; + font-size: 2em; +} + +.cas { + background: #4D85BD; + color: white; +} + +.exte { + background: #749F2A; + color: white; +} + +form { + padding: 0.5em; + text-align: center; + width: 100%; + font-size: 2em; +} + +form table { + margin: auto; +} + +/* TODO: https://git.eleves.ens.fr/klub-dev-ens/authens/issues/9 */ +.oldcas { + background: #CB6318; + color: white; +} + +a { + flex: 1; + height: 200px; + min-width: 300px; + text-align: center; + font-size: 3em; + color: white; + line-height: 200px; + text-decoration: none; +} + +a:hover { + text-decoration: underline; + font-weight: bold; +} diff --git a/authens/templates/authens/base.html b/authens/templates/authens/base.html new file mode 100644 index 0000000..129af08 --- /dev/null +++ b/authens/templates/authens/base.html @@ -0,0 +1,22 @@ +{% load static %} + + + + + + + + + + + + {% if request.site.name %}{{ request.site.name }} - login + {% else %}ENS Auth{% endif %} + + + +
+ {% block content %}{% endblock %} +
+ + diff --git a/authens/templates/authens/login_switch.html b/authens/templates/authens/login_switch.html index fe16203..84cf665 100644 --- a/authens/templates/authens/login_switch.html +++ b/authens/templates/authens/login_switch.html @@ -1,17 +1,23 @@ +{% extends "authens/base.html" %} {% load i18n %} - - - - - ENS Auth - - -

- {% trans "Login par CAS" %} -

-

- {% trans "Login par mot de passe" %} -

- - +{% block content %} +

{% trans "Mode de connexion" %}

+ +
+ {% trans "Clipper" %} +
+ + +
+ {% trans "Mot de passe" %} +
+ + {% comment %} TODO: https://git.eleves.ens.fr/klub-dev-ens/authens/issues/9 + +
+ {% trans "Vieilleux" %} +
+ + {% endcomment %} +{% endblock %} diff --git a/authens/templates/authens/pwd_login.html b/authens/templates/authens/pwd_login.html index 960d5b8..8965c62 100644 --- a/authens/templates/authens/pwd_login.html +++ b/authens/templates/authens/pwd_login.html @@ -1,38 +1,19 @@ - - - - - ENS Auth - - - {% if form.errors %} -

Your username and password didn't match. Please try again.

- {% endif %} +{% extends "authens/base.html" %} +{% load i18n %} - {% if next %} - {% if user.is_authenticated %} -

Your account doesn't have access to this page. To proceed, - please login with an account that has access.

- {% else %} -

Please login to see this page.

- {% endif %} - {% endif %} +{% block content %} +

{% trans "Connexion par mot de passe" %}

-
- {% csrf_token %} - - - - - - - - - -
{{ form.username.label_tag }}{{ form.username }}
{{ form.password.label_tag }}{{ form.password }}
+ {% if form.errors %} +

{% trans "Nom d'utilisateur et/ou mot de passe incorrect" %}

+ {% endif %} - - -
- - +
+ {% csrf_token %} + + {{ form.as_table }} +
+ + +
+{% endblock %} diff --git a/example_site/example_site/settings.py b/example_site/example_site/settings.py index d2e7c11..3148128 100644 --- a/example_site/example_site/settings.py +++ b/example_site/example_site/settings.py @@ -120,13 +120,15 @@ STATIC_URL = "/static/" from django.urls import reverse_lazy # noqa +# This is mandatory INSTALLED_APPS += ["example", "authens"] - AUTHENTICATION_BACKENDS = [ "django.contrib.auth.backends.ModelBackend", "authens.backends.ENSCASBackend", ] - LOGIN_URL = reverse_lazy("authens:login") + +# This is cosmetic LOGIN_REDIRECT_URL = reverse_lazy("home") LOGOUT_REDIRECT_URL = reverse_lazy("home") +LANGUAGE_CODE = "fr-fr" From 73e79d65096936a101f76fe49b5d47e0ed9307e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20P=C3=A9pin?= Date: Fri, 12 Jun 2020 12:13:53 +0200 Subject: [PATCH 2/7] Apply some of Aufinal's design remarks --- authens/static/authens/css/authens.css | 29 +++++++++++++------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/authens/static/authens/css/authens.css b/authens/static/authens/css/authens.css index 7242e10..1ac0446 100644 --- a/authens/static/authens/css/authens.css +++ b/authens/static/authens/css/authens.css @@ -1,7 +1,7 @@ html, body { width: 100%; - background: #ccc; - font-family: monospace; + background: #eee; + font-family: sans-serif; margin: 0; padding: 0; } @@ -35,29 +35,29 @@ h2 { color: white; } -form { - padding: 0.5em; - text-align: center; - width: 100%; - font-size: 2em; -} - -form table { - margin: auto; -} - /* TODO: https://git.eleves.ens.fr/klub-dev-ens/authens/issues/9 */ .oldcas { background: #CB6318; color: white; } +form { + padding: 0.5em; + text-align: center; + width: 100%; + font-size: 1.5em; +} + +form table { + margin: auto; +} + a { flex: 1; height: 200px; min-width: 300px; text-align: center; - font-size: 3em; + font-size: 2.5em; color: white; line-height: 200px; text-decoration: none; @@ -65,5 +65,4 @@ a { a:hover { text-decoration: underline; - font-weight: bold; } From a6f4bfcb16a12cba71bfc734d57738d0ea2fd456 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20P=C3=A9pin?= Date: Fri, 12 Jun 2020 17:55:15 +0200 Subject: [PATCH 3/7] Better html title --- authens/templates/authens/base.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/authens/templates/authens/base.html b/authens/templates/authens/base.html index 129af08..f8714d5 100644 --- a/authens/templates/authens/base.html +++ b/authens/templates/authens/base.html @@ -10,8 +10,7 @@ - {% if request.site.name %}{{ request.site.name }} - login - {% else %}ENS Auth{% endif %} + {% if request.site.name %}{{ request.site.name }}{% else %}AuthENS{% endif %} - login From b0a0c4884abef07ff77cd487a823b7abd6e642d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20P=C3=A9pin?= Date: Fri, 12 Jun 2020 18:06:30 +0200 Subject: [PATCH 4/7] A little bit styling for form inputs --- authens/static/authens/css/authens.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/authens/static/authens/css/authens.css b/authens/static/authens/css/authens.css index 1ac0446..2b64229 100644 --- a/authens/static/authens/css/authens.css +++ b/authens/static/authens/css/authens.css @@ -50,6 +50,20 @@ form { form table { margin: auto; + border-spacing: 0.3em; +} + +th { + text-align: right; +} + +input { + font-size: 1em; +} + +input[type="text"], input[type="password"] { + border: 0; + padding: 5px; } a { From fa82ee251ea2d0de35de7d43784f6d2f8875494d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20P=C3=A9pin?= Date: Fri, 12 Jun 2020 18:13:45 +0200 Subject: [PATCH 5/7] Put the site's name in every h2 --- authens/templates/authens/login_switch.html | 2 +- authens/templates/authens/pwd_login.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/authens/templates/authens/login_switch.html b/authens/templates/authens/login_switch.html index 84cf665..16917d1 100644 --- a/authens/templates/authens/login_switch.html +++ b/authens/templates/authens/login_switch.html @@ -2,7 +2,7 @@ {% load i18n %} {% block content %} -

{% trans "Mode de connexion" %}

+

{% if request.site.name %}{{ request.site.name }}{% else %}AuthENS{% endif %} - {% trans "Mode de connexion" %}

{% trans "Clipper" %} diff --git a/authens/templates/authens/pwd_login.html b/authens/templates/authens/pwd_login.html index 8965c62..46bbb87 100644 --- a/authens/templates/authens/pwd_login.html +++ b/authens/templates/authens/pwd_login.html @@ -2,7 +2,7 @@ {% load i18n %} {% block content %} -

{% trans "Connexion par mot de passe" %}

+

{% if request.site.name %}{{ request.site.name }}{% else %}AuthENS{% endif %} - {% trans "Connexion par mot de passe" %}

{% if form.errors %}

{% trans "Nom d'utilisateur et/ou mot de passe incorrect" %}

From bc1632dd1b1f9d84258ed08dd205317598cd00bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20P=C3=A9pin?= Date: Sat, 13 Jun 2020 17:14:51 +0200 Subject: [PATCH 6/7] Errors deserve CSS too! --- authens/static/authens/css/authens.css | 10 ++++++++++ authens/templates/authens/pwd_login.html | 11 +++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/authens/static/authens/css/authens.css b/authens/static/authens/css/authens.css index 2b64229..35e078e 100644 --- a/authens/static/authens/css/authens.css +++ b/authens/static/authens/css/authens.css @@ -48,6 +48,16 @@ form { font-size: 1.5em; } +.error { + background: red; + color: white; + width: 100%; + padding: 0.5em; + margin: 0; + font-size: 1.2em; + text-align: center; +} + form table { margin: auto; border-spacing: 0.3em; diff --git a/authens/templates/authens/pwd_login.html b/authens/templates/authens/pwd_login.html index 46bbb87..3e82fdf 100644 --- a/authens/templates/authens/pwd_login.html +++ b/authens/templates/authens/pwd_login.html @@ -5,13 +5,20 @@

{% if request.site.name %}{{ request.site.name }}{% else %}AuthENS{% endif %} - {% trans "Connexion par mot de passe" %}

{% if form.errors %} -

{% trans "Nom d'utilisateur et/ou mot de passe incorrect" %}

+

{% trans "Nom d'utilisateur et/ou mot de passe incorrect" %}

{% endif %}
{% csrf_token %} - {{ form.as_table }} + + {% for field in form %} + + + + + {% endfor %} +
{{ field.label_tag }}{{ field }}
From 6042a50214167c68a9ad23823c2f5c5151c48915 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20P=C3=A9pin?= Date: Sat, 13 Jun 2020 18:12:12 +0200 Subject: [PATCH 7/7] Fancier submit button --- authens/static/authens/css/authens.css | 14 ++++++++++++++ authens/templates/authens/pwd_login.html | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/authens/static/authens/css/authens.css b/authens/static/authens/css/authens.css index 35e078e..66379b1 100644 --- a/authens/static/authens/css/authens.css +++ b/authens/static/authens/css/authens.css @@ -76,6 +76,20 @@ input[type="text"], input[type="password"] { padding: 5px; } +input[type="submit"] { + font-size: 1.2em; + background: #505160; + color: white; + border-radius: 0.25rem; + border: solid #505160; + padding: 0.2em 0.5em; + cursor: pointer; +} + +input[type="submit"]:hover { + border-color: white; +} + a { flex: 1; height: 200px; diff --git a/authens/templates/authens/pwd_login.html b/authens/templates/authens/pwd_login.html index 3e82fdf..94b0321 100644 --- a/authens/templates/authens/pwd_login.html +++ b/authens/templates/authens/pwd_login.html @@ -20,7 +20,7 @@ {% endfor %} - + {% endblock %}