feat(cas_eleves): Modernize the interface
This commit is contained in:
parent
50af4e6a5b
commit
526bc7b7d8
22445
cas_eleves/static/css/bulma.css
vendored
Normal file
22445
cas_eleves/static/css/bulma.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
254
cas_eleves/static/css/cas-eleves.css
Normal file
254
cas_eleves/static/css/cas-eleves.css
Normal 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;
|
||||
}
|
||||
1
cas_eleves/static/css/cas-eleves.min.css
vendored
Normal file
1
cas_eleves/static/css/cas-eleves.min.css
vendored
Normal 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}
|
||||
BIN
cas_eleves/static/img/ens-psl.png
Normal file
BIN
cas_eleves/static/img/ens-psl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
|
|
@ -1,41 +1,42 @@
|
|||
{% load i18n static %}
|
||||
|
||||
{% get_current_language as current_language %}
|
||||
<!DOCTYPE html>
|
||||
<html {% if current_language %}lang="{{ current_language }}"{% endif %}>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="keywords" content="cas,ens,sso,students">
|
||||
<meta name="description"
|
||||
content="Central Authentication Services for ENS students">
|
||||
<title>{% trans "ENS student authentication" %}</title>
|
||||
<link type="text/css" rel="stylesheet" href="{% static "css/style.css" %}" />
|
||||
<link rel="shortcut icon"
|
||||
type="image/x-icon"
|
||||
href="/static/cas_server/favicon.ico" />
|
||||
{% block "extra_head" %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img class="logo" width="73" height="100" src="{% static "img/logo.svg" %}" alt="{% trans "ENS logo" %}" />
|
||||
<div id="headtext">
|
||||
<div>{% trans "Central Authentication Service" %}</div>
|
||||
<div>{% trans "ENS Students" %}</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{% if messages %}
|
||||
<ul class="messages">
|
||||
{% for message in messages %}
|
||||
<li {% if message.tags %}class="{{ message.tags }}"{% endif %}>{{ message }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
<div id="ens_logo_foot">
|
||||
<img class="logo" width="73" height="100" src="{% static "img/logo.svg" %}" alt="{% trans "ENS logo" %}" />
|
||||
</div>
|
||||
{% block "extra_foot" %}{% endblock %}
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="keywords" content="cas,ens,sso,students" />
|
||||
<meta name="description"
|
||||
content="Central Authentication Services for ENS students" />
|
||||
<title>{% trans "ENS student authentication" %}</title>
|
||||
<link type="text/css" rel="stylesheet" href="{% static "css/cas-eleves.min.css" %}" />
|
||||
<link rel="shortcut icon"
|
||||
type="image/x-icon"
|
||||
href="/static/cas_server/favicon.ico" />
|
||||
{% block "extra_head" %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="hero is-small py-5">
|
||||
<a href="/">
|
||||
<img width="264" height="98" src="{% static "img/ens-psl.png" %}" alt="{% trans "ENS logo" %}" />
|
||||
</a>
|
||||
|
||||
<h1 class="title is-3 mt-6">{% trans "Central Authentication Service" %}</h1>
|
||||
<h2 class="subtitle is-4">{% trans "Connection to student services" %}</h2>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{% for message in messages %}<div class="warning">{{ message }}</div>{% endfor %}
|
||||
|
||||
<div class="box">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
{% blocktrans %}Powered by <a href="https://dgnum.eu">DGNum</a>.{% endblocktrans %}
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,25 @@
|
|||
{% load cas_server %}
|
||||
{% load bulma cas_server %}
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<ul class="errorlist">
|
||||
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
|
||||
</ul>
|
||||
<div class="error">
|
||||
{% for non_field_error in form.non_field_errors %}
|
||||
<b>{{ non_field_error }}</b>
|
||||
{% if not forloop.last %}<hr />{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% for field in form %}
|
||||
{% if not field|is_hidden %}
|
||||
<div id="formfield_{{ field.auto_id }}"
|
||||
class="formfield {% if not form.non_field_errors %} {% if field.errors %}error_field{% endif %} {% endif %}">
|
||||
{% spaceless %}
|
||||
{% if field.errors %}
|
||||
<ul class="errorlist">
|
||||
{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<div class="labelled_input {% if field|is_checkbox %}checkbox_input{% endif %}">
|
||||
<div class="label_line">
|
||||
<label class="control-label" for="{{ field.auto_id }}">{{ field.label }}</label>
|
||||
</div>
|
||||
{{ field }}
|
||||
</div>
|
||||
{% endspaceless %}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ field }}
|
||||
{% endif %}
|
||||
|
||||
{% for field in form.hidden_fields %}{{ field }}{% endfor %}
|
||||
{% for field in form.visible_fields %}
|
||||
{% if field|is_checkbox %}
|
||||
{% if field.auto_id %}<label class="checkbox">{{ field }} {{ field.label }}</label>{% endif %}
|
||||
{% elif field|is_input %}
|
||||
<label class="label">{{ field.label|capfirst }} :</label>
|
||||
{{ field|bulmafy:'input' }}
|
||||
{% else %}
|
||||
{% if field.auto_id %}<label class="label" for="{{ field.auto_id }}">{{ field.label }}</label>{% endif %}
|
||||
{{ field }}
|
||||
{% endif %}
|
||||
{% for error in field.errors %}<span class="help is-danger">{{ error }}</span>{% endfor %}
|
||||
{% if field.help_text %}<p class="help">{{ field.help_text|safe }}</p>{% endif %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,27 @@
|
|||
{% extends "cas_eleves/base.html" %}
|
||||
|
||||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div class="login_msg">
|
||||
<h2>{% trans "Logged in successfully" %}</h2>
|
||||
<p>{% trans "You have successfully logged into the Central Authentication Service." %}</p>
|
||||
<p>
|
||||
{% 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>
|
||||
</div>
|
||||
<form method="get" action="logout">
|
||||
<div class="formfield">
|
||||
<div class="labelled_input checkbox_input">
|
||||
<div class="label_line">
|
||||
<label for="id_all">{% trans "Log me out from all my sessions" %}</label>
|
||||
</div>
|
||||
<input type="checkbox" id="id_all" name="all" value="1" />
|
||||
</div>
|
||||
</div>
|
||||
{% if settings.CAS_FEDERATE and request.COOKIES.remember_provider %}
|
||||
<div class="formfield">
|
||||
<div class="labelled_input checkbox_input">
|
||||
<div class="label_line">
|
||||
<label for="id_forget_provider">{% trans "Forget the identity provider" %}</label>
|
||||
</div>
|
||||
<input type="checkbox"
|
||||
id="id_forget_provider"
|
||||
name="forget_provider"
|
||||
value="1" />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<button type="submit">{% trans "Logout" %}</button>
|
||||
</form>
|
||||
<h2 class="subtitle">{% trans "Logged in successfully through CAS" %}</h2>
|
||||
<hr />
|
||||
|
||||
<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." %}
|
||||
</p>
|
||||
|
||||
<form method="get" action="logout">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="id_all" name="all" />
|
||||
{% trans "Log me out from all my sessions" %}
|
||||
</label>
|
||||
|
||||
{% if settings.CAS_FEDERATE and request.COOKIES.remember_provider %}
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="id_forget_provider" name="forget_provider" />
|
||||
{% trans "Forget the identity provider" %}
|
||||
</label>
|
||||
{% endif %}
|
||||
<button class="button is-fullwidth m-0" type="submit">{% trans "Logout" %}</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
{% extends "cas_eleves/base.html" %}
|
||||
|
||||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<h2>{% trans "Please log in with your Clipper credentials" %}</h2>
|
||||
<form method="post"
|
||||
id="login_form"
|
||||
{% if post_url %}action="{{ post_url }}"{% endif %}>
|
||||
{% csrf_token %}
|
||||
{% include "cas_eleves/form.html" %}
|
||||
<button type="submit">{% trans "Log in" %}</button>
|
||||
</form>
|
||||
<h2 class="subtitle">{% trans "Please enter your Clipper credentials." %}</h2>
|
||||
<hr />
|
||||
|
||||
<form method="post"
|
||||
id="login_form"
|
||||
{% if post_url %}action="{{ post_url }}"{% endif %}>
|
||||
{% csrf_token %}
|
||||
{% include "cas_eleves/form.html" %}
|
||||
<button type="submit">{% trans "Log in" %}</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
{% extends "cas_eleves/base.html" %}
|
||||
|
||||
{% load i18n static %}
|
||||
|
||||
{% block content %}
|
||||
<h2>{% trans "Clipper logout" %}</h2>
|
||||
<p>{% trans "You have been successfully logged out from your Clipper account." %}</p>
|
||||
<h2 class="subtitle">{% trans "Clipper logout" %}</h2>
|
||||
<hr />
|
||||
|
||||
<p class="success">{% trans "You have been successfully logged out from your Clipper account." %}</p>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
{% extends "cas_eleves/base.html" %}
|
||||
|
||||
{% load i18n static %}
|
||||
|
||||
{% block content %}
|
||||
<form class="form-signin" method="post">
|
||||
{% csrf_token %}
|
||||
{% include "cas_eleves/form.html" %}
|
||||
<button type="submit">{% trans "Connect to the service" %}</button>
|
||||
</form>
|
||||
<form class="form-signin" method="post">
|
||||
{% csrf_token %}
|
||||
{% include "cas_eleves/form.html" %}
|
||||
<button type="submit">{% trans "Connect to the service" %}</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue