Add FranceConnect Kit

app/assets/stylesheets/application.scss

@@ -61,7 +61,7 @@ body {
   box-shadow: none;
   float: right;
   margin-top: 8px;
-  margin-right: 80px;
+  margin-right: 105px;
 }
 
 .alert.alert-success,
@@ -184,4 +184,21 @@ div.pagination {
 .fa {
   width: 15px;
   text-align: center;
+}
+
+.off-fc-link {
+  font-size: 17px !important;
+  margin-top: -5px;
+}
+
+#fconnect-profile {
+  padding-top: 3px;
+  display: inline-block;
+
+  a {
+    color: #3471A9 !important;
+    text-decoration: none;
+    margin-right: 0px !important;
+  }
+
 }

app/views/layouts/application.html.haml

@@ -26,11 +26,17 @@
           - elsif user_signed_in?
             %div.user
               -if current_user.loged_in_with_france_connect?
-                = image_tag('logo_FC_02_small.png', class: 'logo_fc_small')
+                %div{ id: "fconnect-profile", "data-fc-logout-url" => '/users/sign_out" data-method="delete' }
+                  %a.text-info{ href: "#" }
+                    = "#{current_user.given_name} #{current_user.family_name}"
+
+                = link_to "", '/users/sign_out', method: :delete, :class => 'btn fa fa-power-off off-fc-link'
+
               -else
                 %i.fa.fa-user
-              = current_user.email
-              = link_to "Déconnexion", '/users/sign_out', method: :delete, :class => 'btn btn-md'
+                = current_user.email
+
+                = link_to "Déconnexion", '/users/sign_out', method: :delete, :class => 'btn btn-md'
 
       #flash_message.center
       - if flash.notice
@@ -42,3 +48,5 @@
 
       %div{:style => 'margin-left:10%; margin-right:10%;'}
         = yield
+
+    %script{ src: "http://fcp.integ01.dev-franceconnect.fr/js/franceconnect.js" }