templates: restyle authorization page
This commit is contained in:
parent
9ccae22a64
commit
9e439e262a
|
|
@ -13,6 +13,24 @@ a.button {
|
|||
@include button;
|
||||
}
|
||||
|
||||
a.support-link {
|
||||
border-bottom: 2px solid $link-color;
|
||||
}
|
||||
|
||||
a.show-scopes {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 2ex 0;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
content: '\f0dd';
|
||||
font-family: FontAwesome;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
font-size: 1.45em !important;
|
||||
}
|
||||
|
|
@ -522,29 +540,64 @@ div#main-content {
|
|||
@include header(100%);
|
||||
}
|
||||
}
|
||||
form#a2-oidc-authorization-form {
|
||||
div.a2-authorization {
|
||||
width: 60em;
|
||||
margin: 0 auto;
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
div.a2-authorization-explanation {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> div {
|
||||
width: 28em;
|
||||
margin: 15px;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
span.a2-authorization-explanation-title {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: auto;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
.scopes {
|
||||
font-size: 20px;
|
||||
#scopes {
|
||||
display: none;
|
||||
&:target {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 5ex;
|
||||
}
|
||||
input[type=submit] {
|
||||
width: 11em;
|
||||
margin: 0 0.8em;
|
||||
&.lock {
|
||||
background-image: url(images/lock.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 85%;
|
||||
background-size: 15px;
|
||||
}
|
||||
}
|
||||
div.a2-authorization-form {
|
||||
form p {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
input[type=submit] {
|
||||
width: 11em;
|
||||
margin: 5px 0.8em;
|
||||
&.lock {
|
||||
background-image: url(images/lock.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10%;
|
||||
background-size: 15px;
|
||||
}
|
||||
&.refuse {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,32 @@
|
|||
{% extends "authentic2/base-page.html" %}
|
||||
{% block content %}
|
||||
{% include "registration/registration_steps.html" with active_step="share" %}
|
||||
<form method="post" id="a2-oidc-authorization-form">
|
||||
<p class="highlight">Afin de poursuivre votre navigation <a href="{{ request.partner.url }}" style="color: {{ request.partner.color }}">{{ request.partner.name }}</a> souhaite accéder aux informations de votre {{ account_label }}.
|
||||
{% if scopes %}
|
||||
<br /><span class="scopes">({% for scope in scopes %}{% if scope == "profile" %}nom, prénoms, date, lieu et pays de naissance, civilité{% elif scope == "crown" %}nom d'usage, prénoms d'usage, adresse postale, numéros de téléphone et département de naissance{% elif scope == "email" %}courriel{% endif %}{% if not forloop.last %}, {% endif %}{% endfor %})</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% csrf_token %}
|
||||
<div class="a2-authorization">
|
||||
<h2>Partage d’informations {% if request.partner.url %} avec <a href="{{ request.partner.url }}" style="color: {{ request.partner.color }}">{{ request.partner.name }}</a>{% endif %}</h2>
|
||||
<div class="a2-authorization-explanation">
|
||||
<div>
|
||||
<span class="a2-authorization-explanation-title">Pourquoi partager vos informations ?</span>
|
||||
Afin de poursuivre votre navigation {{ request.partner.name }} souhaite accéder aux informations de votre {{ account_label }}.<br/>
|
||||
Les informations partagées permettent de compléter votre profil pour simplifier vos futures démarches, leur partage est sécurisé.
|
||||
{% if scopes %}
|
||||
<br /><a href="#" class="show-scopes">Afficher les informations partagées</a>
|
||||
<span id="scopes">{% for scope in scopes %}{% if scope == "profile" %}nom, prénoms, date, lieu et pays de naissance, civilité{% elif scope == "crown" %}nom d'usage, prénoms d'usage, adresse postale, numéros de téléphone et département de naissance{% elif scope == "email" %}courriel{% endif %}{% if not forloop.last %}, {% endif %}{% endfor %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<span class="a2-authorization-explanation-title">Que se passe-t-il si vous refusez ?</span>
|
||||
En ne partageant pas vos informations, vous ne pourrez pas accéder au service en ligne.
|
||||
<a href="{{ support_url }}" class="support-link">Cliquez ici pour en savoir plus</a>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="a2-authorization-form">
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<input type="submit" name="accept" value="Accepter" class="lock">
|
||||
<input type="submit" name="refuse" value="Refuser">
|
||||
<input type="submit" name="accept" value="Partager" class="lock">
|
||||
<input type="submit" name="refuse" value="Abandonner" class="refuse">
|
||||
</p>
|
||||
<p class="scopes">Sans cette autorisation, il ne vous sera pas possible d’aller sur les services de <a href="{{ request.partner.url }}" style="color: {{ request.partner.color }}">{{ request.partner.name }}</a> avec votre {{ account_label }}.</p>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Reference in New Issue