From bbaccc3bf340b27891bf7f5fbbeb77611bb9a1cf Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Fri, 21 May 2021 11:10:31 +0200
Subject: [PATCH] templates: add template for FC information retrieval (#54003)

---
 static/img/franceconnect-avatar.svg           | 33 +++++++
 static/includes/_franceconnect-data.scss      | 38 ++++++++
 static/includes/_publik.scss                  |  1 +
 .../select_jsonp--franceconnect-data.html     | 96 +++++++++++++++++++
 4 files changed, 168 insertions(+)
 create mode 100644 static/img/franceconnect-avatar.svg
 create mode 100644 static/includes/_franceconnect-data.scss
 create mode 100644 templates/qommon/forms/widgets/select_jsonp--franceconnect-data.html

diff --git a/static/img/franceconnect-avatar.svg b/static/img/franceconnect-avatar.svg
new file mode 100644
index 00000000..febad5a6
--- /dev/null
+++ b/static/img/franceconnect-avatar.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48" height="54" version="1.1" viewBox="0 0 48 54" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title>bouton-fc-standard</dc:title>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+ <title>bouton-fc-standard</title>
+ <desc>Created with Sketch.</desc>
+ <g id="Symbole" transform="translate(0 -.66667)" fill="none">
+  <polygon id="Hexagone" points="0 14.186 0 41.147 23.96 54.667 48 41.147 48 14.186 23.96 0.66667" fill="#fff"/>
+  <g id="Mosaique" transform="translate(5 5.6667)">
+   <polygon points="38 32.979 31.722 21.959 24.865 10.109 19 0 19 13.838 19 44" fill="#034ea2"/>
+   <polygon points="31.722 22 38 11.042 30.317 6.5585 24.865 10.128" fill="#0069cc"/>
+   <polygon points="30.317 6.5585 19 2.2204e-14 24.865 10.128" fill="#ed1c24"/>
+   <polygon points="24.865 10.128 19 2.2204e-14" fill="#0069cc"/>
+   <polygon points="38 33.042 38 11.042 31.722 22" fill="#ed1c24"/>
+   <polygon points="0 32.979 6.3609 21.959 13.217 10.109 19 0 19 13.838 19 44" fill="#0069cc"/>
+   <polygon points="6.3609 22 0 11.042 7.6826 6.5585 13.217 10.128" fill="#ed1c24"/>
+   <polygon points="7.6826 6.5585 19 2.2204e-14 13.217 10.128" fill="#034ea2"/>
+   <polygon points="-9.2371e-14 33.042 -9.2371e-14 11.042 6.3609 22" fill="#034ea2"/>
+  </g>
+  <g id="Marianne" transform="translate(3 16.667)">
+   <path d="m26.246 13.21c0.33846 0 0.67692-0.085 1.0154 0 0.25385 0.085 0.59231 0.085 0.59231 0.17-0.08461 0.51-0.84615 0.595-1.1846 1.105h-0.16923c-0.16923 0.085-0.08461 0.425-0.25385 0.425-0.16923-0.085-0.33846 0-0.59231 0.085 0.25385 0.255 0.59231 0.425 0.93077 0.34 0.08462 0 0.16923 0.085 0.16923 0.255 0 0 0.08461 0 0.08461-0.085 0.08462 0 0.08462 0 0.08462 0.085v0.255c-0.16923 0.255-0.50769 0.17-0.76154 0.17 0.50769 0.085 1.0154 0.085 1.4385 0 0.33846-0.17 0-0.765 0.25385-1.02-0.08461 0 0-0.17-0.16923-0.17 0.08462-0.085 0.25385-0.34 0.33846-0.34 0.08461 0 0.33846-0.085 0.33846-0.17s-0.25385-0.17-0.16923-0.34c0.33846-0.255 0.67692-0.595 0.50769-1.02-0.08461-0.17-0.59231-0.17-0.84615-0.255-0.33846-0.085-0.67692 0-1.0154 0.085-0.33846 0-0.59231 0.17-0.93077 0.255-0.42308 0.17-0.76154 0.425-1.1846 0.68 0.59231-0.255 1.0154-0.34 1.5231-0.51z" fill="#034ea2"/>
+   <path d="m32.232 16.77c-0.17054-0.33638-0.42635-0.58866-0.68216-0.92504-0.25581-0.42047-0.59689-0.75685-0.68216-1.2614-0.17054-0.50457 0-0.92504 0-1.4296 0-0.92504-0.25581-1.8501-0.51162-2.691-0.17054-0.42047-0.25581-0.92504-0.42635-1.3455-0.08527-0.25228-0.17054-0.50457-0.34108-0.75685-0.08527-0.084095-0.08527-0.33638 0-0.42047 0.25581-0.16819 0.51162-0.42047 0.68216-0.58866 0.17054-0.33638 0-0.75685-0.25581-0.92504-0.42635-0.16819-0.34108 0.42047-0.68216 0.58866h-0.17054c-0.08527-0.16819 0.08527-0.25228 0.17054-0.33638 0-0.084095 0-0.16819-0.08527-0.16819-0.25581 0-0.51162-0.084095-0.59689-0.16819-0.68216-0.84095-1.5349-1.2614-2.4728-1.5978 0.25581 0.084095 0.51162 0.084095 0.76743 0.084095 0.42635 0.084095 0.93797 0 1.2791-0.16819 0.34108-0.16819 0.34108-0.58866 0.42635-0.92504 0.08527-0.084095 0-0.16819 0-0.33638 0-0.16819-0.17054-0.33638-0.25581-0.50457 0 0-0.08527-0.084095-0.17054-0.25228-0.68216-0.75685-3.3255-2.9433-8.2712-2.6069-2.1318 0.16819-4.7751 0.75685-7.8449 2.2706-0.08527 0-0.17054 0.084095-0.34108 0.084095-0.51162 0.25228-1.1938 0.67276-1.6201 1.1773-0.51162 0.58866-0.93797 1.2614-1.1085 2.0183-0.76743 0.50457-1.2791 1.2614-1.7054 2.0183-0.51162 1.0091-1.1938 1.8501-1.1938 2.9433v0.16819c0.08527 0.33638 0.08527 0.58866 0.17054 0.92504 0.17054 0.67276 0.34108 1.3455 0.42635 2.0183 0.08527 0.33638 0.17054 0.67276 0.25581 1.0091 0.17054 0.33638 0 0.75685 0.25581 1.0932 0.08527 0.16819 0.08527 0.42047 0.34108 0.50457v0.25228c0.08527 0.08409 0.08527 0.08409 0.17054 0.08409v0.25228c0.51162 0.58866 1.1085 1.0932 1.4496 1.766 0.17054 0.33638-0.59689 0.16819-0.93797 0.08409-0.59689-0.25228-1.0232-0.75685-1.5349-1.1773l-0.08527 0.0841c0.25581 0.42047 1.1938 0.92504 0.68216 1.2614-0.25581 0.16819-0.59689-0.16819-0.76743 0.08409-0.08527 0.08409 0 0.25228 0 0.33638-0.34108-0.25228-0.76743-0.084086-1.1085-0.25228-0.25581-0.084094-0.34108-0.50457-0.59689-0.50457-0.76743-0.16819-1.5349-0.33638-2.3876-0.33638h-0.17054c-0.76743-0.08409-1.5349-0.16819-2.217-0.08409v0.84094c0.68216-0.16819 1.3643-0.33638 2.0465-0.33638h0.17054c0.17054 0 0.42635-0.0841 0.59689 0-0.25581 0-0.59689 0-0.8527 0.08409-0.68216 0.084099-1.3643 0.33638-2.0465 0.58867v0.84095c0.34108 0.08409 0.76743 0.08409 1.1085 0.16819 0.42635 0.0841 0.8527 0.16819 1.2791 0.33638 0.59689 0.16819 1.0232 0.42047 1.5349 0.67276 0.25581 0.16819 0.34108 0.33638 0.59689 0.50457 0.34108 0.16819 0.76743 0.16819 1.0232 0h0.34108c0.93797-0.25228 1.8759-0.50457 2.4728-1.2614 0 0.0841 0.08527 0.0841 0.08527 0.0841-0.17054 0.50457-0.17054 1.0091-0.51162 1.5137 0 0.08409-0.08527 0.16819 0.08527 0.25228h0.08527c-0.08527 0-0.08527 0-0.08527 0.08409 0 0.0841 0.17054 0 0.25581 0.0841-0.34108 0.08409-0.59689 0.16819-0.76743 0.42047 0 0.0841 0.08527 0.0841 0.17054 0.0841-0.08527 0.08409-0.34108 0.08409-0.34108 0.16819l0.08527 0.08409c-0.08527 0-0.08527 0-0.08527 0.0841v0.16819c-0.17054 0-0.25581 0.16819-0.34108 0.16819 0.25581 0.16819 0.42635 0 0.68216 0-0.68216 0.25228-1.1938 0.67276-1.8759 0.84095-0.08527 0 0 0.16819-0.08527 0.16819 0.17054 0.08409 0.34108-0.0841 0.51162-0.0841-0.34108 0.25228-0.68216 0.42047-1.0232 0.58866l2.0465 1.1773c0.8527-0.50457 1.6201-1.0932 2.3023-1.8501l0.08527 0.08409c-0.17054 0.58866-0.51162 1.0091-1.0232 1.4296-0.34108 0.16819-0.59689 0.50457-0.8527 0.58866l1.5349 0.84094c0.34108-0.25228 0.59689-0.42047 1.0232-0.58866 0.08527 0 0.17054 0.08409 0.34108 0.08409 0.51162-0.50457 1.1085-1.0932 1.9612-0.92504 0 0.08409 0 0.08409 0.08527 0.08409 0 0 0.08527 0 0.08527-0.08409 0 0.08409 0 0.08409-0.08527 0.08409-0.25581 0.16819-0.42635 0.33638-0.68216 0.50457-0.08527 0.0841 0 0.0841 0.08527 0.0841 0.34108-0.16819 0.51162-0.33638 0.76743-0.50457-0.08527 0.08409-0.08527 0.16819-0.08527 0.25228-0.76743 0.58866-1.3643 1.1773-1.9612 1.8501l8.1007 4.6252c0.25581-0.33638 0.59689-0.84095 0.93797-1.2614 1.5349-2.1865 3.7519-5.1298 4.4341-5.8025 0.25581-0.16819 0.51162-0.16819 0.8527-0.25228 1.0232 0 2.1318 0.25228 3.155 0.33638 0.08527 0 0.25581 0.08409 0.34108 0.08409 0.34108 0.08409 0.76743 0 1.1938-0.08409 0.42635-0.16819 0.93797-0.42047 1.1085-0.92504 0.17054-0.42047 0.25581-0.92504 0-1.3455-0.42635-0.50457 0.34108-0.75685 0.59689-1.0932 0.17054-0.33638-0.17054-0.50457-0.17054-0.75685-0.08527-0.0841-0.34108-0.0841-0.42635-0.25228 0.42635-0.16819 1.1085-0.58866 0.76743-1.0932-0.17054-0.33638-0.51162-0.75685-0.17054-1.0932 0.42635-0.25228 1.1085-0.25228 1.2791-0.67276 0.51162-0.84095-0.25581-1.4296-0.59689-2.0183zm-2.6434-3.0274c-0.08527 0.08409 0.17054 0.16819 0.17054 0.33638-0.08527 0.0841-0.25581 0.16819-0.34108 0.16819-0.08527 0.0841-0.25581 0.25228-0.34108 0.33638 0.08527 0 0 0.16819 0.17054 0.16819-0.25581 0.33638 0.17054 0.92504-0.25581 1.0091-0.42635 0.16819-0.93797 0.16819-1.4496 0 0.25581-0.08409 0.59689 0.08409 0.76743-0.16819v-0.25228c0-0.08409-0.08527-0.08409-0.08527-0.08409l-0.08527 0.08409c0-0.08409-0.17054-0.25228-0.17054-0.25228-0.34108 0.08409-0.68216-0.08409-0.93797-0.33638 0.17054-0.08409 0.34108-0.16819 0.59689-0.08409 0.17054 0 0.08527-0.33638 0.25581-0.42047h0.17054c0.34108-0.50457 1.1085-0.67276 1.1938-1.0932 0-0.08409-0.34108-0.08409-0.59689-0.16819-0.34108-0.08409-0.68216 0-1.0232 0-0.51162 0.16819-0.93797 0.16819-1.3643 0.42047 0.34108-0.25228 0.76743-0.50457 1.1938-0.67276 0.34108-0.08409 0.59689-0.25228 0.93797-0.25228 0.34108-0.08409 0.76743-0.16819 1.0232-0.08409 0.34108 0.08409 0.76743 0.08409 0.8527 0.25228-0.08527 0.50457-0.34108 0.84095-0.68216 1.0932z" fill="#fff"/>
+  </g>
+ </g>
+</svg>
diff --git a/static/includes/_franceconnect-data.scss b/static/includes/_franceconnect-data.scss
new file mode 100644
index 00000000..2bfe79a6
--- /dev/null
+++ b/static/includes/_franceconnect-data.scss
@@ -0,0 +1,38 @@
+#rub_service div.template-franceconnect-data {
+	.franceconnect--button {
+		display: block;
+		width: 160px;
+		background-image: url('../img/franceconnect-avatar.svg');
+		background-repeat: no-repeat;
+		background-size: auto 35px;
+		padding: 5px 2px 5px 40px;;
+		background-position: 5px center;
+		font-size: 85%;
+		cursor: pointer;
+	}
+
+	div.content {
+		position: relative;
+		input {
+			width: 100%;
+		}
+	}
+
+	.franceconnect--clear {
+		position: absolute;
+		right: 0;
+		bottom: 0.5em;
+		display: none;
+	}
+
+	.franceconnect--clear::before {
+		font-family: FontAwesome;
+		content: "\f057";
+		color: $link-color;
+	}
+
+	.franceconnect--error {
+		color: $error-color;
+		font-size: 90%;
+	}
+}
diff --git a/static/includes/_publik.scss b/static/includes/_publik.scss
index 4776d297..8d467f51 100644
--- a/static/includes/_publik.scss
+++ b/static/includes/_publik.scss
@@ -14,3 +14,4 @@
 @import 'carrousel';
 @import 'back-top';
 @import 'library';
+@import 'franceconnect-data';
diff --git a/templates/qommon/forms/widgets/select_jsonp--franceconnect-data.html b/templates/qommon/forms/widgets/select_jsonp--franceconnect-data.html
new file mode 100644
index 00000000..95dfd524
--- /dev/null
+++ b/templates/qommon/forms/widgets/select_jsonp--franceconnect-data.html
@@ -0,0 +1,96 @@
+{% extends "qommon/forms/widget.html" %}
+
+{% block widget-error %}
+{{ block.super }}
+<span class="franceconnect--error" id="form_{{widget.name}}_error" style="display: none">Une erreur s'est produite lors de la récupération des données.</span>
+{% endblock %}
+
+{% block widget-control %}
+<input id="form_{{widget.name}}" type="hidden" name="{{widget.name}}" data-initial-display-value="{{widget.get_display_value|default_if_none:''}}" data-url="{{widget.get_select2_url}}"{% if widget.value %} value="{{ widget.value }}"{% endif %} />
+<input id="form_{{widget.name}}_display" type="text" name="{{widget.name}}_display" style="display: none" readonly />
+<a class="franceconnect--clear" id="form_{{widget.name}}_clear" title="Supprimer" role="button" data-field-id="form_{{widget.name}}"></a>
+<button class="franceconnect--button" id="form_{{widget.name}}_fc_button" data-field-id="form_{{widget.name}}" role="button">Obtenir avec FranceConnect</button>
+
+{% if not request.is_in_backoffice %}
+<script>
+$(function () {
+  const fc_popup = function(url) {
+       const height = 670;
+       const width = 1000;
+       const left = (screen.width/2)-(width/2);
+       const top = (screen.height/2)-(height/2);
+       const popup = window.open(url, 'FranceConnect',
+         'scrollbars=true, width='+width+', height='+height+',top='+top+', left='+left+', resizable=no,copyhistory=no'
+       );
+       if (window.focus) popup.focus();
+       return popup;
+  };
+
+  const reset_field = function() {
+      const field_id = '#' + $(this).data('field-id');
+      $(field_id + '_fc_button').show();
+      $(field_id).val('');
+      $(this).hide();
+      $(field_id + '_display').val('');
+      $(field_id + '_display').hide();
+  };
+
+  const fill_field = function(field_id, value, display_value) {
+      const field_selector = '#' + field_id;
+      $(field_selector).val(value);
+
+      const $field_display_value = $(field_selector + '_display');
+      $field_display_value.val(display_value);
+      $field_display_value.show();
+      $(field_selector + '_fc_button').hide();
+      $(field_selector + '_clear').show();
+  };
+
+  let popup_window = null;
+  let field_id = null;
+  const $input = $('div.template-franceconnect-data #form_{{widget.name}}');
+
+  if ($input.val()) {
+     fill_field($input.attr('id'), $input.val(), $input.data('initial-display-value'));
+  }
+
+  $('.franceconnect--clear').on('click', reset_field);
+
+  $.getJSON($input.data('url') + '?q=', function (response) {
+     const init_request_url = response.data[0].init_request_url;
+     $('.franceconnect--button').on('click', function (event) {
+         if (popup_window) {
+           popup_window.close();
+         }
+         field_id = $(this).data('field-id');
+         let popup_url = init_request_url;
+         const origin = 'origin=' + window.location.href;
+         if (init_request_url.indexOf('?') != -1) {
+           popup_url += '&' + origin;
+         } else {
+           popup_url += '?' + origin;
+         }
+         popup_window = fc_popup(popup_url);
+         return false;
+       });
+  });
+
+  $(window).on('message', function (event) {
+      if (!event.originalEvent.data.error) {
+          fill_field(field_id, event.originalEvent.data.id, event.originalEvent.data.text);
+      } else {
+          $('#' + field_id + '_error').show();
+          console.error(event.originalEvent.data.error);
+          console.error(event.originalEvent.data.data);
+      }
+      if (popup_window) {
+          popup_window.close();
+      }
+      popup_window = null;
+      field_id = null;
+   });
+});
+</script>
+{% endif %}
+
+{% endblock %}
-- 
2.32.0

