From f6136243ec3a16946fe5f6583e0354f68a5731b0 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  | 102 ++++++++++++++++++
 4 files changed, 151 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..6f4bbcfb
--- /dev/null
+++ b/templates/qommon/forms/widgets/select_jsonp--franceconnect.html
@@ -0,0 +1,102 @@
+{% extends "qommon/forms/widgets/select_jsonp.html" %}
+
+{% block widget-control %}
+
+<style>
+  .select2-container {
+      display: none;
+  }
+</style>
+
+{{ block.super }}
+
+<div class="franceconnect--data">
+  <input class="franceconnect--text" readonly />
+  <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 popup = window.open(url, 'FranceConnect',
+          scrollbars=true,
+          width=1000,
+          height=670,
+          top=0,
+          left=0
+        );
+        if (window.focus) popup.focus();
+        return popup;
+    };
+
+   const $input = $('div.template-franceconnect #form_{{widget.name}}');
+   const $input_display_value = $("<input name=['{{widget.name}}_display]'>");
+
+   const $container = $input.parents('.wcs-widget-select2-container').siblings('.franceconnect--data');
+
+   const $fc_button = $container.find('.franceconnect--button');
+   const $fc_clear = $container.find('a.franceconnect--clear');
+   const $fc_text = $container.find('.franceconnect--text');
+   const $fc_error = $container.find('.franceconnect--error');
+
+   $fc_clear.on('click', function () {
+       $fc_button.show();
+       $input.val('');
+       $input_display_value.val('');
+       $(this).hide();
+       $fc_text.hide();
+   });
+
+   if ($input.val()) {
+       $fc_text.val($input.data('initial-display-value'));
+       $fc_text.show();
+       $fc_clear.show();
+       $fc_button.hide();
+   }
+
+   var popup_window = null;
+   var init_request_url = null;
+
+   $.getJSON($input.data('select2-url') + '?q=', function (response) {
+       init_request_url = response.data[0].init_request_url;
+       console.log(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.origin);
+           } else {
+               popup_window = fc_popup(init_request_url + '?origin=' + window.location.origin);
+           }
+       });
+   });
+
+  $(window).on('message', function (event) {
+      if(init_request_url.indexOf(event.originalEvent.origin) == -1) {
+        return
+      }
+      if (!event.originalEvent.data.error) {
+          $fc_text.val(event.originalEvent.data.text);
+          $input.val(event.originalEvent.data.id);
+          $input_display_value.val(event.originalEvent.data.text);
+          $fc_text.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.rc2

