From 9e439e262ace4abf2dd695a54b4d8c7ba42f9382 Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Fri, 17 May 2019 16:42:46 +0200
Subject: [PATCH] templates: restyle authorization page

---
 static/grandlyon-cut/_custom.scss             | 79 ++++++++++++++++---
 .../authentic2_idp_oidc/authorization.html    | 37 ++++++---
 2 files changed, 92 insertions(+), 24 deletions(-)

diff --git a/static/grandlyon-cut/_custom.scss b/static/grandlyon-cut/_custom.scss
index 819aa0b..44dda9e 100644
--- a/static/grandlyon-cut/_custom.scss
+++ b/static/grandlyon-cut/_custom.scss
@@ -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;
         }
diff --git a/templates/authentic2_idp_oidc/authorization.html b/templates/authentic2_idp_oidc/authorization.html
index 1800139..4b73045 100644
--- a/templates/authentic2_idp_oidc/authorization.html
+++ b/templates/authentic2_idp_oidc/authorization.html
@@ -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 %}