From 09348cbd601a0e1d1cf54d07cb21dfddd557e568 Mon Sep 17 00:00:00 2001
From: Benjamin Dauvergne <bdauvergne@entrouvert.com>
Date: Mon, 17 May 2021 14:18:41 +0200
Subject: [PATCH] misc: add template for franceconnect widget

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

diff --git a/wcs/qommon/templates/qommon/forms/widgets/select_jsonp--franceconnect.html b/wcs/qommon/templates/qommon/forms/widgets/select_jsonp--franceconnect.html
new file mode 100644
index 00000000..4d90f846
--- /dev/null
+++ b/wcs/qommon/templates/qommon/forms/widgets/select_jsonp--franceconnect.html
@@ -0,0 +1,133 @@
+{% 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) {
+        // Fixes dual-screen position                             Most browsers      Firefox
+        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;
+   $container.find('.franceconnect--clear').on('click', function () {
+       $container.find('.franceconnect--button').show();
+       $input.val('');
+       $input_display_value.val('');
+       $container.find('.franceconnect--data').hide();
+   });
+
+   $(window).on('message', function (event) {
+       console.log(event.originalEvent.data.text);
+       $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;
+   });
+
+   $.getJSON(ds_url + '?q=', function (response) {
+       const init_request_url = response.data[0].init_request_url;
+       console.log(init_request_url);
+       $button.on('click', function (event) {
+           event.preventDefault();
+           if (popup_window) {
+               try {
+                   popup_window.close();
+               } finally {
+               }
+           }
+           popup_window = popup(init_request_url + '?test=1&origin=' + window.location.origin, 'FranceConnect', 1000, 670);
+       });
+   });
+});
+</script>
+{% endblock %}
-- 
2.31.1

