Support informative on/off top bar

Author: ioigoume

themes/ssp/default/includes/header.php

@@ -2,6 +2,10 @@
 
 $themeConfig = SimpleSAML\Configuration::getConfig('module_themevanilla.php');
 $ribbonText = $themeConfig->getValue('ribbon_text');
+$notyText = !empty($themeConfig->getValue('noty_text')) ? $themeConfig->getValue('noty_text') : '';
+$notyClass = !empty($themeConfig->getValue('noty_class'))
+             ? 'noty-top-' . $themeConfig->getValue('noty_class')
+             : 'noty-top-info';
 
 /**
  * Support the htmlinject hook, which allows modules to change header, pre and post body on all pages.
@@ -74,7 +78,12 @@
             SimpleSAML\Module::getModuleURL('themevanilla/resources/images/favicon.ico')
         ) ?>"
     />
-
+    <link
+        rel="stylesheet"
+        href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
+        integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V"
+        crossorigin="anonymous"
+    />
     <?php
 
     if (!empty($jquery)) {
@@ -143,11 +152,23 @@
 <body<?= $onLoad ?>>
 
     <div class="header">
+        <!--   Ribbon Text     -->
         <?php if (!empty($ribbonText)) : ?>
         <div class="corner-ribbon red">
             <?= $ribbonText ?>
         </div>
         <?php endif; ?>
+
+        <!--    Noty top bar    -->
+        <?php if (!empty($notyText)) : ?>
+        <div id="noty-info-bar" class="<?= $notyClass ?> noty-top-global">
+            <?=  $notyText ?>
+            <a class="noty-top-close" href="#" onclick="closeNoty(this)">
+                <i class="fas fa-times"></i>
+            </a>
+        </div>
+        <?php endif; ?>
+
         <div class="text-center ssp-logo">
             <a
                 <?=

www/resources/icons/error.png

@@ -28,6 +28,11 @@ function resizeAll() {
   }
 };
 
+// Hide Top Bar notification
+function closeNoty(element) {
+  $(element).parent().hide()
+}
+
 $(document).ready(function() {
   if (!Cookies.get('cookies_accepted')) {
     $('#cookies').show();

www/resources/icons/info.png

@@ -0,0 +1,41 @@
+/* CSS Style for notification boxes*/
+.noty-top-info, .noty-top-success, .noty-top-warning, .noty-top-error {
+  border-bottom: 1px solid;
+  /*padding:15px 10px 15px 50px;*/
+  /*background-repeat: no-repeat;*/
+  /*background-position: 10px center;*/
+}
+.noty-top-info {
+  color: #00529B;
+  background-color: #BDE5F8;
+  /*background-image: url('../../resources/icons/info.png');*/
+}
+.noty-top-success {
+  color: #4F8A10;
+  background-color: #DFF2BF;
+  /*background-image:url('../../resources/icons/success.png');*/
+}
+.noty-top-warning {
+  color: #9F6000;
+  background-color: #FEEFB3;
+  /*background-image: url('../../resources/icons/warning.png');*/
+}
+.noty-top-error {
+  color: #D8000C;
+  background-color: #FFBABA;
+  /*background-image: url('../../resources/icons/error.png');*/
+}
+.noty-top-global {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  position: absolute;
+  z-index: 2000;
+  padding: 0.5em; /* Use this property only without the icons */
+}
+.noty-top-close {
+  text-decoration: none;
+  color: unset;
+}
+/*/*/

www/resources/icons/success.png

@@ -5,4 +5,5 @@
 @import "extra";
 @import "loader";
 @import "cmg_loader";
+@import "noty";
 @import "idps_buttons";