From 3722961e4aa6518bc94dcf16dba306064e2bf38e Mon Sep 17 00:00:00 2001
From: Benjamin Dauvergne <bdauvergne@entrouvert.com>
Date: Thu, 27 May 2021 11:08:49 +0200
Subject: [PATCH] add template for FranceConnect connector item field (#54003)

---
 .../widgets/select_jsonp--franceconnect.html  | 159 ++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 templates/qommon/forms/widgets/select_jsonp--franceconnect.html

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..53f6f14a
--- /dev/null
+++ b/templates/qommon/forms/widgets/select_jsonp--franceconnect.html
@@ -0,0 +1,159 @@
+{% extends "qommon/forms/widgets/select_jsonp.html" %}
+{% load i18n %}
+{% block widget-control %}
+<style>
+  div.gru-content .franceconnect--button {
+      background: #034ea2;
+      width: 300px;
+      display: block;
+  }
+  .franceconnect--image {
+      float: left;
+      width: 100px;
+      height: 100px;
+      display: block;
+  }
+  .franceconnect--data {
+      display: none;
+  }
+  .franceconnect--caption {
+      float: right;
+      display: block;
+      width: 150px;
+      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+      font-weight: 100;
+      text-align: center;
+  }
+  .franceconnect--text {
+      width: calc(100% - 3em);
+  }
+  .franceconnect--clear {
+      float: right;
+  }
+</style>
+<div class="wcs-widget-select2-container">
+  <button class="franceconnect--button" >
+    <img class="franceconnect--image" src="https://fcp.integ01.dev-franceconnect.fr/images/fc-avatar.png"/>
+    <span class="franceconnect--caption">Valider mon identité avec FranceConnect</span>
+  </button>
+  <div class="franceconnect--result" data-initial-display-value="{{widget.get_display_value|default_if_none:''}}">
+    <span class="franceconnect--value"><span>
+  </div>
+  <div class="franceconnect--data">
+    <input class="franceconnect--input" type="hidden" id="form_{{widget.name}}" name="{{widget.name}}" {% if widget.value %}value="{{ widget.value }}" {% endif %}data-select2-url="{{widget.get_select2_url}}" data-initial-display-value="{{widget.get_display_value|default_if_none:''}}"/>
+    <input class="franceconnect--text" readonly/>
+    <span class="franceconnect--clear"><a>&#128465;</a></span>
+  </div>
+</div>
+<script>
+$(function () {
+    const popup = function(url, title, w, h) {
+        // Method to open a centered popup on desktop browsers using window.open(),
+        // it's useless on mobile which will always open a tab.
+        // I don't know if I can force opening a tab on desktop too.
+
+        const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;
+        const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;
+
+        const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
+        const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
+
+        const systemZoom = width / window.screen.availWidth;
+        const left = (width - w) / 2 / systemZoom + dualScreenLeft
+        const top = (height - h) / 2 / systemZoom + dualScreenTop
+        const popup = window.open(url, title, 
+          `
+          scrollbars=yes,
+          width=${w / systemZoom}, 
+          height=${h / systemZoom}, 
+          top=${top}, 
+          left=${left}
+          `
+        )
+
+        if (window.focus) popup.focus();
+        return popup;
+    };
+
+   const $input = $('#form_{{widget.name}}');
+   const $input_display_value = $('<input>', {
+          type: 'hidden',
+          name: $input.attr('name') + '_display',
+          value: $input.data('initial-display-value')
+   });
+   $input_display_value.insertAfter($input);
+   const $container = $input.parents('.wcs-widget-select2-container');
+   const ds_url = $input.data('select2-url');
+   const $button = $container.find('button');
+
+   if ($input.val() != '') {
+       $container.find('.franceconnect--text').val($input.data('initial-display-value'));
+       $container.find('.franceconnect--data').show();
+       $container.find('.franceconnect--button').hide();
+   }
+
+   var popup_window = null;
+
+   /* Button to reset the data and show the FC button again. */
+   $container.find('.franceconnect--clear').on('click', function () {
+       $container.find('.franceconnect--button').show();
+       $input.val('');
+       $input_display_value.val('');
+       $container.find('.franceconnect--data').hide();
+   });
+
+   /* Use a query call to the fake data source to obtain the URL for the popup.
+    * The `q` parameter is mandatory to respect the contract of the
+    * Autocomplete w.c.s. API.
+    */
+   var service_origin = null;
+
+   $.getJSON(ds_url + '?q=', function (response) {
+       const init_request_url = response.data[0].init_request_url;
+       service_origin = response.data[0].service_origin;
+
+       $button.on('click', function (event) {
+           event.preventDefault();
+           if (popup_window) {
+               try {
+                   popup_window.close();
+               } finally {
+               }
+           }
+           if (init_request_url.indexOf('?') == -1) {
+               url = init_request_url + '?origin=' + encodeURIComponent(window.location.origin);
+           } else {
+               url = init_request_url + '&origin=' + encodeURIComponent(window.location.origin);
+           }
+           popup_window = popup(url, 'FranceConnect', 1000, 670);
+       });
+   });
+
+   /* React to response from the popup sent using window.opener.postMessage() :
+    */
+   $(window).on('message', function (event) {
+       const origin = event.originalEvent.origin;
+
+       if (origin != service_origin) {
+           console.log('wrong origin', origin, service_origin);
+           /* ignore message from wrong origin */
+           return;
+       }
+       $container.find('.franceconnect--text').val(event.originalEvent.data.text);
+       $input.val(event.originalEvent.data.id);
+       $input_display_value.val(event.originalEvent.data.text);
+       $container.find('.franceconnect--data').show();
+       $container.find('.franceconnect--button').hide();
+
+       if (popup_window) {
+           try {
+               popup_window.close();
+           } finally {
+           }
+       }
+       popup_window = null;
+   });
+
+});
+</script>
+{% endblock %}
-- 
2.32.0.rc0