templates: add template for FC information retrieval (#54003)

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%;
+	}
+}

static/includes/_publik.scss

@@ -14,3 +14,4 @@
 @import 'carrousel';
 @import 'back-top';
 @import 'library';
+@import 'franceconnect-data';

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 %}