IPA Warning Banner

banner.js

/*  Authors:
 *    Petr Vobornik <[email protected]>
 *    Dan Clark     <[email protected]>
 *
 * Copyright (C) 2014 Red Hat
 * Copyright (C) 2019 Red Hat
 * see file 'COPYING' for use and warranty information
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
define([
        'freeipa/jquery',
        'freeipa/phases'
    ],
    function($, phases) {

var banner = {

    template: "<div id=\"banner_notice\"><center>BANNER TEXT</center> </a></div>",

    css: {
        position: 'fixed',
        top: '0px',
        left: '0px',
        width: '100%',
        'z-index': '100',
        'background-color': '#00CD00',
        padding: '6px',
        fontSize: 'medium',
        border: "1px solid black"
    },

    render: function() {
        var $notice = $(this.template).appendTo($("body")).css(this.css);
    }
};

phases.on('login', function() {
    banner.render();
    return true;
}, 20);

return banner;
});

Place the above file into the folder: /usr/share/ipa/ui/js/plugins/banner
on each IPA server. Update the banner text and color as needed.

Using "position: fixed" means the banner will always be at the top of the page even as you scroll up or down. The banner will cover things up at the top of the page and as you scroll down

Using "position: relative" means the banner will be at the top of the page, will not cover anything up, but as you scroll down the banner will disappear, staying at the top of the whole web page.