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 = {};
-
-(function (window) {
-    var fconnect = {
+const 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,42 +18,17 @@ var franceConnectKit = {};
     fconnectProfile.appendChild(access);
     linkAccess.onclick = toggleElement.bind(access);
   }
-    };
-
-    var document = window.document;
-
-    document.addEventListener('DOMContentLoaded', function () {
-        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);
-    }
+addEventListener('DOMContentLoaded', init);
+addEventListener('turbolinks:load', init);
 
 function toggleElement(event) {
   event.preventDefault();
-        if (this.style.display === "block") {
-            this.style.display = "none";
+  if (this.style.display === 'block') {
+    this.style.display = 'none';
   } else {
-            this.style.display = "block";
+    this.style.display = 'block';
   }
 }
 
@@ -86,7 +56,7 @@ var franceConnectKit = {};
 }
 
 function createFCIframe() {
-        var iframe = document.createElement("iframe");
+  var iframe = document.createElement('iframe');
   iframe.setAttribute('id', 'fconnect-iframe');
   iframe.frameBorder = 0;
   iframe.name = 'fconnect-iframe';
@@ -105,7 +75,6 @@ var franceConnectKit = {};
 }
 
 function createHistoryLink() {
-
   var historyLink = document.createElement('a');
   historyLink.target = 'fconnect-iframe';
   historyLink.href = '//' + fconnect.currentHost + fconnect.tracesUrl;
@@ -117,12 +86,14 @@ var franceConnectKit = {};
 
 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;
 }
@@ -130,20 +101,24 @@ var franceConnectKit = {};
 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 messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
+var messageEvent = eventMethod == 'attachEvent' ? 'onmessage' : 'message';
 
 // Listen to message from child window
-    eventer(messageEvent, function (e) {
-        var key = e.message ? "message" : "data";
+eventer(
+  messageEvent,
+  function(e) {
+    var key = e.message ? 'message' : 'data';
     var data = e[key];
     if (data === 'close_popup') {
       closeFCPopin(e);
     }
-    }, false);
-})(this);
+  },
+  false
+);