Merge branch 'franceconnect_local' into develop

# Conflicts:
#	app/assets/javascripts/application.js

app/assets/javascripts/application.js

@@ -26,6 +26,7 @@
 //= require leaflet.freedraw
 //= require smart_listing
 //= require turf
+//= require franceconnect
 
 $(document).ready(function() {
     $('.js-scrollTo').on('click', function() { // Au clic sur un élément

app/assets/javascripts/franceconnect_kit.js

@@ -2,6 +2,6 @@ $(document).on('page:load', franceconnect_kit);
 $(document).ready(franceconnect_kit);
 
 function franceconnect_kit() {
-    
+    franceConnectKit.init()
 }
 

app/assets/stylesheets/application.scss

@@ -17,6 +17,7 @@
  *= require bootstrap-datepicker3
  *= require leaflet
  *= require font-awesome
+ *= require franceconnect
  */
 @import "bootstrap-sprockets";
 @import "bootstrap";

app/views/layouts/application.html.haml

@@ -4,7 +4,6 @@
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
     %title TPS - Téléprocédures simplifiées
     %meta{'http-equiv' => "X-UA-Compatible", :content => "IE=edge"}
-    %script{src: 'http://fcp.integ01.dev-franceconnect.fr/js/franceconnect.js'}
 
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
     = javascript_include_tag 'application', 'data-turbolinks-track' => true

vendor/assets/javascripts/franceconnect.js

@@ -0,0 +1,147 @@
+var franceConnectKit = {};
+
+(function (window) {
+    var fconnect = {
+        tracesUrl: '/traces',
+        aboutUrl: ''
+    };
+
+    franceConnectKit.init = function() {
+        //initCurrentHostnameSource();
+        //includeFCCss();
+
+        fconnect.currentHost = 'fcp.integ01.dev-franceconnect.fr'
+
+        var fconnectProfile = document.getElementById('fconnect-profile');
+        if (fconnectProfile) {
+            var linkAccess = document.querySelector('#fconnect-profile > a');
+            var fcLogoutUrl = fconnectProfile.getAttribute('data-fc-logout-url');
+            var access = createFCAccessElement(fcLogoutUrl);
+            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);
+    }
+
+    function toggleElement(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);
+})(this);
+

vendor/assets/stylesheets/franceconnect.scss

@@ -0,0 +1,151 @@
+.btn-fconnect {
+    all: initial;
+    color: #0b6ba8;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid #ccc;
+    display: inline-block;
+    margin-bottom: 0;
+    line-height: 20px;
+    text-align: center;
+    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
+    vertical-align: middle;
+    cursor: pointer;
+    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
+}
+
+.btn-fconnect-full {
+    font-size: 14px;
+    max-width: 175px;
+    padding: 11px 19px;
+    border-radius: 6px;
+}
+
+.btn-fconnect-mini {
+    font-size: 14px;
+    width: 182px;
+    padding: 11px 19px;
+    border-radius: 6px;
+}
+
+.btn-fconnect-full img {
+    width: 100%;
+}
+
+.btn-fconnect-mini img {
+    float:left;
+    width: 38px;
+}
+
+#fconnect-profile > a {
+    padding: 15px 0 15px 50px;
+    color: #ffffff;
+    margin-right: 10px;
+    font-size: 18px;
+    background: image-url('logo_mini_FC.png') left center no-repeat;
+    background-size: 40px;
+}
+
+#fconnect-access {
+    all: initial;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    display: none;
+    position: absolute;
+    background: white;
+    border: 1px solid #ccc;
+    width: 300px;
+    padding: 15px;
+    margin-top: 20px;
+    z-index: 9990;
+    box-shadow: 1px 1px 3px #ccc;
+}
+
+#fconnect-access hr {
+    margin: 15px 0;
+}
+
+#fconnect-access:after, #fconnect-access:before {
+    bottom: 100%;
+    border: solid transparent;
+    content: "";
+    position: absolute;
+}
+
+#fconnect-access:after {
+    border-bottom-color: white;
+    border-width: 13px;
+    left: 10%;
+}
+
+#fconnect-access:before {
+    border-bottom-color: #ccc;
+    border-width: 14px;
+    left: 9.70%;
+}
+
+#fconnect-access .logout {
+    text-align: center;
+    margin-top: 15px;
+}
+
+#fconnect-access .btn {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+#fconnect-access .btn-default {
+    color: #333;
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+#fconnect-access .btn-default:hover,
+#fconnect-access .btn-default:focus {
+    color: #333;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+    text-decoration: none;
+}
+
+#fc-background {
+    all: initial;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.80);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    opacity: 0;
+    transition: opacity 0.2s ease-in;
+}
+
+#fc-background.fade-in {
+    opacity: 1;
+}
+
+#fc-background.fade-out {
+    opacity: 0;
+}
+
+#fconnect-iframe {
+    display: block;
+    width: 600px;
+    height: 500px;
+    margin: 60px auto 0 auto;
+}