From 72560b36bb50673fbcf8b5be2ac851ba0199624c 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/fc-avatar.png                      | Bin 0 -> 5304 bytes
 static/includes/_fc.scss                      |  48 +++++++++
 static/includes/_publik.scss                  |   1 +
 .../widgets/select_jsonp--franceconnect.html  |  92 ++++++++++++++++++
 4 files changed, 141 insertions(+)
 create mode 100644 static/img/fc-avatar.png
 create mode 100644 static/includes/_fc.scss
 create mode 100644 templates/qommon/forms/widgets/select_jsonp--franceconnect.html

diff --git a/static/img/fc-avatar.png b/static/img/fc-avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd8a447265ef39a680f9b75761bb99f29b5eeb7d
GIT binary patch
diff --git a/static/includes/_fc.scss b/static/includes/_fc.scss
new file mode 100644
index 00000000..bea9bb2d
--- /dev/null
+++ b/static/includes/_fc.scss
@@ -0,0 +1,48 @@
+div.template-franceconnect {
+	.franceconnect--button {
+		display: block;
+		width: 160px;
+		background-image: url('../img/fc-avatar.png');
+		background-repeat: no-repeat;
+		background-size: auto 85%;
+		padding: 5px 2px 5px 40px;;
+		background-position: 5px center;
+		color: white;
+		font-size: 85%;
+		cursor: pointer;
+		&:hover {
+			background-image: url('../img/fc-avatar.png');
+			background-repeat: no-repeat;
+			background-size: auto 85%;
+			padding: 5px 2px 5px 40px;;
+			background-position: 5px center;
+		}
+	}
+
+	.franceconnect--data {
+		position: relative;
+	}
+
+	.franceconnect--text {
+		width: calc(100% - 1em);
+		display: none;
+	}
+
+	.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..3f4e1d68 100644
--- a/static/includes/_publik.scss
+++ b/static/includes/_publik.scss
@@ -14,3 +14,4 @@
 @import 'carrousel';
 @import 'back-top';
 @import 'library';
+@import 'fc';
diff --git a/templates/qommon/forms/widgets/select_jsonp--franceconnect.html b/templates/qommon/forms/widgets/select_jsonp--franceconnect.html
new file mode 100644
index 00000000..0e3976e6
--- /dev/null
+++ b/templates/qommon/forms/widgets/select_jsonp--franceconnect.html
@@ -0,0 +1,92 @@
+{% extends "qommon/forms/widget.html" %}
+
+{% 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 />
+
+<div class="franceconnect--data">
+  <a class="franceconnect--clear" title="Supprimer"></a>
+  <button class="franceconnect--button">Obtenir avec FranceConnect</button>
+  <span class="franceconnect--error" style="display: none">Une erreur s'est produite lors de la récupération des données.</span>
+</div>
+
+<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 $input = $('div.template-franceconnect #form_{{widget.name}}');
+   const $input_display_value = $('div.template-franceconnect #form_{{widget.name}}_display');
+
+   const $container = $input.siblings('.franceconnect--data');
+
+   const $fc_button = $container.find('.franceconnect--button');
+   const $fc_clear = $container.find('a.franceconnect--clear');
+   const $fc_error = $container.find('.franceconnect--error');
+
+   $fc_clear.on('click', function () {
+       $fc_button.show();
+       $input.val('');
+       $(this).hide();
+       $input_display_value.hide();
+       $input_display_value.val('');
+   });
+
+   if ($input.val()) {
+       $input_display_value.val($input.data('initial-display-value'));
+       $input_display_value.show();
+       $fc_clear.show();
+       $fc_button.hide();
+   }
+
+   var popup_window = null;
+   var init_request_url = null;
+
+  $.getJSON($input.data('url') + '?q=', function (response) {
+       init_request_url = response.data[0].init_request_url;
+       $fc_button.on('click', function (event) {
+           event.preventDefault();
+           if (popup_window) {
+               popup_window.close();
+           }
+           if (init_request_url.indexOf('?') != -1) {
+               popup_window = fc_popup(init_request_url + '&origin=' + window.location.href);
+           } else {
+               popup_window = fc_popup(init_request_url + '?origin=' + window.location.href);
+           }
+       });
+   });
+
+  $(window).on('message', function (event) {
+      if(init_request_url.indexOf(event.originalEvent.origin) == -1) {
+        return
+      }
+      if (!event.originalEvent.data.error) {
+          $input.val(event.originalEvent.data.id);
+          $input_display_value.val(event.originalEvent.data.text);
+          $input_display_value.show();
+          $fc_error.hide();
+          $fc_button.hide();
+          $fc_clear.show();
+      } else {
+          $fc_error.show();
+          console.log(event.originalEvent.data.error);
+          console.log(event.originalEvent.data.data);
+      }
+      if (popup_window) {
+          popup_window.close();
+      }
+      popup_window = null;
+   });
+});
+</script>
+{% endblock %}
-- 
2.32.0

