Compile FranceConnect module with webpacker

app/assets/javascripts/application.js

@@ -20,7 +20,6 @@
 //= require leaflet.freedraw
 //= require smart_listing
 //= require turf-area
-//= require franceconnect
 //= require bootstrap-wysihtml5
 //= require bootstrap-wysihtml5/locales/fr-FR
 

app/assets/javascripts/old_design/franceconnect_kit.js

@@ -1,5 +0,0 @@
-$(document).on('turbolinks:load', franceconnect_kit);
-
-function franceconnect_kit() {
-  franceConnectKit.init()
-}

app/javascript/packs/application-old.js

@@ -9,6 +9,7 @@ import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';
 import '../shared/autocomplete';
 import '../shared/remote-input';
+import '../shared/franceconnect';
 
 // Start Rails helpers
 Rails.start();

app/javascript/packs/application.js

@@ -11,6 +11,7 @@ import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';
 import '../shared/autocomplete';
 import '../shared/remote-input';
+import '../shared/franceconnect';
 
 import '../new_design/spinner';
 import '../new_design/dropdown';

app/javascript/shared/franceconnect.js

@@ -1,15 +1,10 @@
-var franceConnectKit = {};
+const fconnect = {
-
-(function (window) {
-    var fconnect = {
   tracesUrl: '/traces',
   aboutUrl: ''
-    };
+};
-
+const document = window.document;
-    franceConnectKit.init = function () {
-        //initCurrentHostnameSource();
-        //includeFCCss();
 
+function init() {
   fconnect.currentHost = 'fcp.integ01.dev-franceconnect.fr';
 
   if (window.location.hostname == 'www.demarches-simplifiees.fr')
@@ -23,54 +18,29 @@ var franceConnectKit = {};
     fconnectProfile.appendChild(access);
     linkAccess.onclick = toggleElement.bind(access);
   }
-    };
+}
 
-    var document = window.document;
+addEventListener('DOMContentLoaded', init);
+addEventListener('turbolinks:load', init);
 
-    document.addEventListener('DOMContentLoaded', function () {
+function toggleElement(event) {
-        franceConnectKit.init();
-    });
-
-    function initCurrentHostnameSource() {
-        var currentScript = document.querySelector('script[src^="/assets/franceconnect"]').getAttribute('src');
-        var parseUrl = currentScript.split('/');
-        fconnect.currentHost = parseUrl[2];
-    }
-
-    function includeFCCss() {
-        var ss = document.styleSheets;
-        for (var i = 0, max = ss.length; i < max; i++) {
-            if (ss[i].href == 'http://' + fconnect.currentHost + '/stylesheets/franceconnect.css' || ss[i].href == 'https://' + fconnect.currentHost + '/stylesheets/franceconnect.css')
-                return;
-        }
-
-        var linkCss = document.createElement('link');
-        linkCss.rel = 'stylesheet';
-        linkCss.href = '//' + fconnect.currentHost + '/stylesheets/franceconnect.css';
-        linkCss.type = 'text/css';
-        linkCss.media = 'screen';
-
-        document.getElementsByTagName('head')[0].appendChild(linkCss);
-    }
-
-    function toggleElement(event) {
   event.preventDefault();
-        if (this.style.display === "block") {
+  if (this.style.display === 'block') {
-            this.style.display = "none";
+    this.style.display = 'none';
   } else {
-            this.style.display = "block";
+    this.style.display = 'block';
-        }
   }
+}
 
-    function closeFCPopin(event) {
+function closeFCPopin(event) {
   event.preventDefault();
   fconnect.popin.className = 'fade-out';
-        setTimeout(function () {
+  setTimeout(function() {
     document.body.removeChild(fconnect.popin);
   }, 200);
-    }
+}
 
-    function openFCPopin() {
+function openFCPopin() {
   fconnect.popin = document.createElement('div');
   fconnect.popin.id = 'fc-background';
 
@@ -80,20 +50,20 @@ var franceConnectKit = {};
 
   fconnect.popin.appendChild(iframe);
 
-        setTimeout(function () {
+  setTimeout(function() {
     fconnect.popin.className = 'fade-in';
   }, 200);
-    }
+}
 
-    function createFCIframe() {
+function createFCIframe() {
-        var iframe = document.createElement("iframe");
+  var iframe = document.createElement('iframe');
   iframe.setAttribute('id', 'fconnect-iframe');
   iframe.frameBorder = 0;
   iframe.name = 'fconnect-iframe';
   return iframe;
-    }
+}
 
-    function createFCAccessElement(logoutUrl) {
+function createFCAccessElement(logoutUrl) {
   var access = document.createElement('div');
   access.id = 'fconnect-access';
   access.innerHTML = '<h5>Vous êtes identifié grâce à FranceConnect</h5>';
@@ -102,10 +72,9 @@ var franceConnectKit = {};
   access.appendChild(createHistoryLink());
   access.appendChild(createLogoutElement(logoutUrl));
   return access;
-    }
+}
-
-    function createHistoryLink() {
 
+function createHistoryLink() {
   var historyLink = document.createElement('a');
   historyLink.target = 'fconnect-iframe';
   historyLink.href = '//' + fconnect.currentHost + fconnect.tracesUrl;
@@ -113,37 +82,43 @@ var franceConnectKit = {};
   historyLink.innerHTML = 'Historique des connexions/échanges de données';
 
   return historyLink;
-    }
+}
 
-    function createAboutLink() {
+function createAboutLink() {
   var aboutLink = document.createElement('a');
-        aboutLink.href = fconnect.aboutUrl ? '//' + fconnect.currentHost + fconnect.aboutUrl : '#';
+  aboutLink.href = fconnect.aboutUrl
+    ? '//' + fconnect.currentHost + fconnect.aboutUrl
+    : '#';
   if (fconnect.aboutUrl) {
     aboutLink.target = 'fconnect-iframe';
     aboutLink.onclick = openFCPopin;
   }
-        aboutLink.innerHTML = 'Qu\'est-ce-que FranceConnect ?';
+  aboutLink.innerHTML = "Qu'est-ce-que FranceConnect ?";
 
   return aboutLink;
-    }
+}
 
-    function createLogoutElement(logoutUrl) {
+function createLogoutElement(logoutUrl) {
   var elm = document.createElement('div');
   elm.className = 'logout';
-        elm.innerHTML = '<a class="btn btn-default" href="' + logoutUrl + '">Se déconnecter</a>';
+  elm.innerHTML =
+    '<a class="btn btn-default" href="' + logoutUrl + '">Se déconnecter</a>';
   return elm;
-    }
+}
 
-    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
-    var eventer = window[eventMethod];
+var eventer = window[eventMethod];
-    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
+var messageEvent = eventMethod == 'attachEvent' ? 'onmessage' : 'message';
 
-    // Listen to message from child window
+// Listen to message from child window
-    eventer(messageEvent, function (e) {
+eventer(
-        var key = e.message ? "message" : "data";
+  messageEvent,
+  function(e) {
+    var key = e.message ? 'message' : 'data';
     var data = e[key];
     if (data === 'close_popup') {
       closeFCPopin(e);
     }
-    }, false);
+  },
-})(this);
+  false
+);