feat(cas_eleves): Modernize the interface

This commit is contained in:
Tom Hubrecht 2024-07-03 14:36:01 +02:00
parent 50af4e6a5b
commit 526bc7b7d8
10 changed files with 22807 additions and 107 deletions

22445
cas_eleves/static/css/bulma.css vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,254 @@
body {
align-items: stretch;
background-color: #f5f5f5;
color: #4a4a4a;
display: flex;
flex-direction: column;
font-family:
BlinkMacSystemFont,
-apple-system,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
font-size: 1em;
font-weight: 400;
justify-content: space-between;
line-height: 1.5;
min-height: 100vh;
margin: 0;
position: relative;
text-align: center;
width: auto;
}
a {
color: #485fc7;
cursor: pointer;
text-decoration: none;
}
hr {
background-color: rgb(243, 244, 246);
margin: 1.5rem 0;
border: none;
display: block;
height: 2px;
}
header {
padding: 1.5rem 0;
}
img {
margin: auto;
height: auto;
max-width: 100%;
}
h1 {
color: #363636;
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
margin-top: 3rem;
margin-bottom: 0;
}
h2 {
font-size: 1.5rem;
font-weight: 400;
margin-top: 0.5rem;
margin-bottom: 0;
}
footer {
background-color: #fafafa;
display: block;
padding: 3rem 1.5rem 6rem;
margin-top: 1.5rem;
}
main {
max-width: 500px;
margin: auto;
margin-top: 4rem;
}
.box {
background-color: #fff;
border-radius: 0.75rem;
box-shadow:
0 0.5em 1em -0.125em hsla(221deg, 14%, 4%, 0.1),
0 0px 0 1px hsla(221deg, 14%, 4%, 0.02);
padding: 1.25rem;
}
.box > h2 {
margin-top: 0;
font-size: 1.25rem;
}
form {
text-align: left;
}
label {
color: #363636;
display: block;
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5em;
}
label.checkbox {
cursor: pointer;
}
input[type="checkbox"] {
margin-right: 0.5em;
}
input:not([type="checkbox"]) {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
appearance: none;
background-color: #fff;
border-radius: 4px;
border: 1px solid;
border-color: #dbdbdb;
box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
box-shadow: none;
box-sizing: border-box;
color: #363636;
display: inline-flex;
font-size: 1rem;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
max-width: 100%;
padding-bottom: calc(0.5em - 1px);
padding-left: calc(0.75em - 1px);
padding-right: calc(0.75em - 1px);
padding-top: calc(0.5em - 1px);
position: relative;
vertical-align: top;
width: 100%;
}
input::placeholder {
color: rgba(54, 54, 54, 0.3);
}
input:not(:last-child) {
margin-bottom: 0.75rem;
}
input:hover,
select:hover {
border-color: #b5b5b5;
}
input:active,
input:focus {
border-color: rgb(66, 88, 255);
box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
outline: 0;
}
.help {
display: block;
font-size: 0.75rem;
margin-top: 0.25rem;
margin-bottom: 0.75rem;
}
button {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
background-color: #fff;
border: 1px solid transparent;
border-color: #dbdbdb;
border-radius: 4px;
border-width: 1px;
box-shadow:
rgba(51, 51, 51, 0.05) 0px 1px 2px 0px,
rgba(51, 51, 51, 0.05) 0px 2px 4px 0px;
color: #363636;
cursor: pointer;
display: flex;
font-size: 1rem;
height: 2.5em;
justify-content: center;
line-height: 1.5;
margin: 0;
padding-bottom: calc(0.5em - 1px);
padding-left: 1em;
padding-right: 1em;
padding-top: calc(0.5em - 1px);
position: relative;
text-align: center;
user-select: none;
white-space: nowrap;
width: 100%;
}
button:hover {
border-color: #b5b5b5;
background-color: rgb(226, 228, 233);
color: #363636;
}
button:active {
background-color: rgb(240, 241, 244);
border-color: #4a4a4a;
color: #363636;
}
button:focus {
border-color: #485fc7;
color: #363636;
}
button:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}
/* Notifications */
.warning {
background-color: rgb(255, 240, 204);
border-radius: 0.375rem;
color: rgb(66, 46, 0);
margin-bottom: 1.5rem;
padding: 1.375em 1.5em;
text-align: justify;
}
.error {
background-color: rgb(255, 102, 133);
border-radius: 0.375rem;
color: rgb(26, 0, 5);
margin-bottom: 1.5rem;
padding: 1.375em 1.5em;
text-align: justify;
}
.success {
background-color: rgb(216, 243, 231);
border-radius: 0.375rem;
color: rgb(22, 70, 48);
margin: 0;
padding: 1.375em 1.5em;
text-align: justify;
}

View file

@ -0,0 +1 @@
h1,h2{margin-bottom:0}.help,input:not(:last-child){margin-bottom:.75rem}a,button,label.checkbox{cursor:pointer}body,button{display:flex;margin:0;text-align:center}button,input:not([type=checkbox]){background-color:#fff;height:2.5em;line-height:1.5;padding-bottom:calc(.5em - 1px);padding-top:calc(.5em - 1px);position:relative;width:100%}button:hover,input:hover,select:hover{border-color:#b5b5b5}button:focus:not(:active),input:active,input:focus{box-shadow:0 0 0 .125em rgba(72,95,199,.25)}body{align-items:stretch;background-color:#f5f5f5;color:#4a4a4a;flex-direction:column;font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1em;font-weight:400;justify-content:space-between;line-height:1.5;min-height:100vh;position:relative;width:auto}.help,footer,hr,label{display:block}a{color:#485fc7;text-decoration:none}hr{background-color:#f3f4f6;margin:1.5rem 0;border:none;height:2px}header{padding:1.5rem 0}img{margin:auto;height:auto;max-width:100%}h1{color:#363636;font-size:2rem;font-weight:600;line-height:1.125;margin-top:3rem}h2{font-size:1.5rem;font-weight:400;margin-top:.5rem}footer{background-color:#fafafa;padding:3rem 1.5rem 6rem;margin-top:1.5rem}main{max-width:500px;margin:4rem auto auto}.box{background-color:#fff;border-radius:.75rem;box-shadow:0 .5em 1em -.125em hsla(221deg,14%,4%,.1),0 0 0 1px hsla(221deg,14%,4%,.02);padding:1.25rem}.box>h2{margin-top:0;font-size:1.25rem}button,input:not([type=checkbox]),label{font-size:1rem;color:#363636}form{text-align:left}label{font-weight:700;margin-bottom:.5em}input[type=checkbox]{margin-right:.5em}input:not([type=checkbox]){-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;border-radius:4px;border:1px solid #dbdbdb;box-shadow:inset 0 .0625em .125em rgba(10,10,10,.05);box-shadow:none;box-sizing:border-box;display:inline-flex;justify-content:flex-start;max-width:100%;padding-left:calc(.75em - 1px);padding-right:calc(.75em - 1px);vertical-align:top}input::placeholder{color:rgba(54,54,54,.3)}input:active,input:focus{border-color:#4258ff;outline:0}.help{font-size:.75rem;margin-top:.25rem}.error,.warning{margin-bottom:1.5rem}button{-moz-appearance:none;-webkit-appearance:none;align-items:center;border:1px solid #dbdbdb;border-radius:4px;box-shadow:rgba(51,51,51,.05) 0 1px 2px 0,rgba(51,51,51,.05) 0 2px 4px 0;justify-content:center;padding-left:1em;padding-right:1em;user-select:none;white-space:nowrap}.error,.success,.warning{border-radius:.375rem;padding:1.375em 1.5em;text-align:justify}button:hover{background-color:#e2e4e9;color:#363636}button:active{background-color:#f0f1f4;border-color:#4a4a4a;color:#363636}button:focus{border-color:#485fc7;color:#363636}.warning{background-color:#fff0cc;color:#422e00}.error{background-color:#ff6685;color:#1a0005}.success{background-color:#d8f3e7;color:#164630;margin:0}

Binary file not shown.

After

Width:  |  Height:  |  Size: 463 KiB

View file

@ -1,41 +1,42 @@
{% load i18n static %} {% load i18n static %}
{% get_current_language as current_language %} {% get_current_language as current_language %}
<!DOCTYPE html> <!DOCTYPE html>
<html {% if current_language %}lang="{{ current_language }}"{% endif %}> <html {% if current_language %}lang="{{ current_language }}"{% endif %}>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="cas,ens,sso,students"> <meta name="keywords" content="cas,ens,sso,students" />
<meta name="description" <meta name="description"
content="Central Authentication Services for ENS students"> content="Central Authentication Services for ENS students" />
<title>{% trans "ENS student authentication" %}</title> <title>{% trans "ENS student authentication" %}</title>
<link type="text/css" rel="stylesheet" href="{% static "css/style.css" %}" /> <link type="text/css" rel="stylesheet" href="{% static "css/cas-eleves.min.css" %}" />
<link rel="shortcut icon" <link rel="shortcut icon"
type="image/x-icon" type="image/x-icon"
href="/static/cas_server/favicon.ico" /> href="/static/cas_server/favicon.ico" />
{% block "extra_head" %}{% endblock %} {% block "extra_head" %}{% endblock %}
</head> </head>
<body>
<header> <body>
<img class="logo" width="73" height="100" src="{% static "img/logo.svg" %}" alt="{% trans "ENS logo" %}" /> <header class="hero is-small py-5">
<div id="headtext"> <a href="/">
<div>{% trans "Central Authentication Service" %}</div> <img width="264" height="98" src="{% static "img/ens-psl.png" %}" alt="{% trans "ENS logo" %}" />
<div>{% trans "ENS Students" %}</div> </a>
</div>
</header> <h1 class="title is-3 mt-6">{% trans "Central Authentication Service" %}</h1>
<main> <h2 class="subtitle is-4">{% trans "Connection to student services" %}</h2>
{% if messages %} </header>
<ul class="messages">
{% for message in messages %} <main>
<li {% if message.tags %}class="{{ message.tags }}"{% endif %}>{{ message }}</li> {% for message in messages %}<div class="warning">{{ message }}</div>{% endfor %}
{% endfor %}
</ul> <div class="box">
{% endif %} {% block content %}{% endblock %}
{% block content %}{% endblock %} </div>
</main> </main>
<div id="ens_logo_foot">
<img class="logo" width="73" height="100" src="{% static "img/logo.svg" %}" alt="{% trans "ENS logo" %}" /> <footer>
</div> {% blocktrans %}Powered by <a href="https://dgnum.eu">DGNum</a>.{% endblocktrans %}
{% block "extra_foot" %}{% endblock %} </footer>
</body> </body>
</html> </html>

View file

@ -1,28 +1,25 @@
{% load cas_server %} {% load bulma cas_server %}
{% if form.non_field_errors %} {% if form.non_field_errors %}
<ul class="errorlist"> <div class="error">
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %} {% for non_field_error in form.non_field_errors %}
</ul> <b>{{ non_field_error }}</b>
{% if not forloop.last %}<hr />{% endif %}
{% endfor %}
</div>
{% endif %} {% endif %}
{% for field in form %}
{% if not field|is_hidden %} {% for field in form.hidden_fields %}{{ field }}{% endfor %}
<div id="formfield_{{ field.auto_id }}" {% for field in form.visible_fields %}
class="formfield {% if not form.non_field_errors %} {% if field.errors %}error_field{% endif %} {% endif %}"> {% if field|is_checkbox %}
{% spaceless %} {% if field.auto_id %}<label class="checkbox">{{ field }} {{ field.label }}</label>{% endif %}
{% if field.errors %} {% elif field|is_input %}
<ul class="errorlist"> <label class="label">{{ field.label|capfirst }} :</label>
{% for error in field.errors %}<li>{{ error }}</li>{% endfor %} {{ field|bulmafy:'input' }}
</ul> {% else %}
{% endif %} {% if field.auto_id %}<label class="label" for="{{ field.auto_id }}">{{ field.label }}</label>{% endif %}
<div class="labelled_input {% if field|is_checkbox %}checkbox_input{% endif %}"> {{ field }}
<div class="label_line"> {% endif %}
<label class="control-label" for="{{ field.auto_id }}">{{ field.label }}</label> {% for error in field.errors %}<span class="help is-danger">{{ error }}</span>{% endfor %}
</div> {% if field.help_text %}<p class="help">{{ field.help_text|safe }}</p>{% endif %}
{{ field }}
</div>
{% endspaceless %}
</div>
{% else %}
{{ field }}
{% endif %}
{% endfor %} {% endfor %}

View file

@ -1,35 +1,27 @@
{% extends "cas_eleves/base.html" %} {% extends "cas_eleves/base.html" %}
{% load i18n %} {% load i18n %}
{% block content %} {% block content %}
<div class="login_msg"> <h2 class="subtitle">{% trans "Logged in successfully through CAS" %}</h2>
<h2>{% trans "Logged in successfully" %}</h2> <hr />
<p>{% trans "You have successfully logged into the Central Authentication Service." %}</p>
<p> <p class="warning">
{% trans "When you are done using ENS students' services, you can log out to prevent anyone unauthorized from accessing your sessions on this computer." %} {% trans "When you are done using ENS students' services, you can log out to prevent anyone unauthorized from accessing your sessions on this computer." %}
</p> </p>
</div>
<form method="get" action="logout"> <form method="get" action="logout">
<div class="formfield"> <label class="checkbox">
<div class="labelled_input checkbox_input"> <input type="checkbox" id="id_all" name="all" />
<div class="label_line"> {% trans "Log me out from all my sessions" %}
<label for="id_all">{% trans "Log me out from all my sessions" %}</label> </label>
</div>
<input type="checkbox" id="id_all" name="all" value="1" /> {% if settings.CAS_FEDERATE and request.COOKIES.remember_provider %}
</div> <label class="checkbox">
</div> <input type="checkbox" id="id_forget_provider" name="forget_provider" />
{% if settings.CAS_FEDERATE and request.COOKIES.remember_provider %} {% trans "Forget the identity provider" %}
<div class="formfield"> </label>
<div class="labelled_input checkbox_input"> {% endif %}
<div class="label_line"> <button class="button is-fullwidth m-0" type="submit">{% trans "Logout" %}</button>
<label for="id_forget_provider">{% trans "Forget the identity provider" %}</label> </form>
</div>
<input type="checkbox"
id="id_forget_provider"
name="forget_provider"
value="1" />
</div>
</div>
{% endif %}
<button type="submit">{% trans "Logout" %}</button>
</form>
{% endblock %} {% endblock %}

View file

@ -1,12 +1,16 @@
{% extends "cas_eleves/base.html" %} {% extends "cas_eleves/base.html" %}
{% load i18n %} {% load i18n %}
{% block content %} {% block content %}
<h2>{% trans "Please log in with your Clipper credentials" %}</h2> <h2 class="subtitle">{% trans "Please enter your Clipper credentials." %}</h2>
<form method="post" <hr />
id="login_form"
{% if post_url %}action="{{ post_url }}"{% endif %}> <form method="post"
{% csrf_token %} id="login_form"
{% include "cas_eleves/form.html" %} {% if post_url %}action="{{ post_url }}"{% endif %}>
<button type="submit">{% trans "Log in" %}</button> {% csrf_token %}
</form> {% include "cas_eleves/form.html" %}
<button type="submit">{% trans "Log in" %}</button>
</form>
{% endblock %} {% endblock %}

View file

@ -1,6 +1,10 @@
{% extends "cas_eleves/base.html" %} {% extends "cas_eleves/base.html" %}
{% load i18n static %} {% load i18n static %}
{% block content %} {% block content %}
<h2>{% trans "Clipper logout" %}</h2> <h2 class="subtitle">{% trans "Clipper logout" %}</h2>
<p>{% trans "You have been successfully logged out from your Clipper account." %}</p> <hr />
<p class="success">{% trans "You have been successfully logged out from your Clipper account." %}</p>
{% endblock %} {% endblock %}

View file

@ -1,9 +1,11 @@
{% extends "cas_eleves/base.html" %} {% extends "cas_eleves/base.html" %}
{% load i18n static %} {% load i18n static %}
{% block content %} {% block content %}
<form class="form-signin" method="post"> <form class="form-signin" method="post">
{% csrf_token %} {% csrf_token %}
{% include "cas_eleves/form.html" %} {% include "cas_eleves/form.html" %}
<button type="submit">{% trans "Connect to the service" %}</button> <button type="submit">{% trans "Connect to the service" %}</button>
</form> </form>
{% endblock %} {% endblock %}