Fix franceconnect kit integration

app/assets/javascripts/application.js

@@ -24,4 +24,5 @@
 //= require concavehull.min
 //= require graham_scan.min
 //= require leaflet.freedraw
-//= require smart_listing
+//= require smart_listing
+//= require franceconnect_kit

app/assets/javascripts/franceconnect_kit.js

@@ -0,0 +1,133 @@
+$(document).on('page:load', franceconnect_kit);
+$(document).ready(franceconnect_kit);
+
+function franceconnect_kit() {
+    init_franceconnect_kit();
+}
+
+var fconnect = {
+    tracesUrl: '/traces',
+    aboutUrl: ''
+};
+
+function init_franceconnect_kit() {
+    initCurrentHostnameSource();
+    includeFCCss();
+    var fconnectProfile = document.getElementById('fconnect-profile');
+    if (fconnectProfile) {
+        var fcLogoutUrl = fconnectProfile.getAttribute('data-fc-logout-url');
+        var access = createFCAccessElement(fcLogoutUrl);
+        fconnectProfile.parentNode.appendChild(access);
+        fconnectProfile.onclick = toogleElement.bind(access);
+    }
+}
+
+function initCurrentHostnameSource() {
+    var currentScript = 'https://fcp.integ01.dev-franceconnect.fr/js/franceconnect.js';
+    var parseUrl = currentScript.split('/');
+    fconnect.currentHost = parseUrl[2];
+}
+
+function includeFCCss() {
+    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 toogleElement(event) {
+    event.preventDefault();
+    if (this.style.display === "block") {
+        this.style.display = "none";
+    } else {
+        this.style.display = "block";
+    }
+}
+
+function closeFCPopin(event) {
+    event.preventDefault();
+    fconnect.popin.className = 'fade-out';
+    setTimeout(function() {
+        document.body.removeChild(fconnect.popin);
+    }, 200);
+}
+
+function openFCPopin() {
+    fconnect.popin = document.createElement('div');
+    fconnect.popin.id = 'fc-background';
+
+    var iframe = createFCIframe();
+
+    document.body.appendChild(fconnect.popin);
+
+    fconnect.popin.appendChild(iframe);
+
+    setTimeout(function() {
+        fconnect.popin.className = 'fade-in';
+    }, 200);
+}
+
+function createFCIframe() {
+    var iframe = document.createElement("iframe");
+    iframe.setAttribute('id', 'fconnect-iframe');
+    iframe.frameBorder = 0;
+    iframe.name = 'fconnect-iframe';
+    return iframe;
+}
+
+function createFCAccessElement(logoutUrl) {
+    var access = document.createElement('div');
+    access.id = 'fconnect-access';
+    access.innerHTML = '<h5>Vous êtes identifié grâce à FranceConnect</h5>';
+    access.appendChild(createAboutLink());
+    access.appendChild(document.createElement('hr'));
+    access.appendChild(createHistoryLink());
+    access.appendChild(createLogoutElement(logoutUrl));
+    return access;
+}
+
+function createHistoryLink() {
+
+    var historyLink = document.createElement('a');
+    historyLink.target = 'fconnect-iframe';
+    historyLink.href = '//' + fconnect.currentHost + fconnect.tracesUrl;
+    historyLink.onclick = openFCPopin;
+    historyLink.innerHTML = 'Historique des connexions/échanges de données';
+
+    return historyLink;
+}
+
+function createAboutLink() {
+    var aboutLink = document.createElement('a');
+    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 ?';
+
+    return aboutLink;
+}
+
+function createLogoutElement(logoutUrl) {
+    var elm = document.createElement('div');
+    elm.className = 'logout';
+    elm.innerHTML = '<a class="btn btn-default" href="' + logoutUrl + '">Se déconnecter</a>'
+    return elm;
+}
+
+var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+var eventer = window[eventMethod];
+var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
+
+// Listen to message from child window
+eventer(messageEvent,function(e) {
+    var key = e.message ? "message" : "data";
+    var data = e[key];
+    if(data === 'close_popup'){
+        closeFCPopin(e);
+    }
+},false);

app/assets/stylesheets/application.scss

@@ -191,6 +191,19 @@ div.pagination {
   margin-top: -4px;
 }
 
+
+#fconnect-access {
+  right: 50px;
+}
+
+#fconnect-access:before {
+  left: 22.7% !important;
+}
+
+#fconnect-access:after {
+  left: 23% !important;
+}
+
 #fconnect-profile {
   margin-top: 5px;
   display: inline-block;

app/views/layouts/application.html.haml

@@ -49,4 +49,3 @@
       %div{:style => 'margin-left:10%; margin-right:10%;'}
         = yield
 
-    %script{ src: "https://fcp.integ01.dev-franceconnect.fr/js/franceconnect.js" }