reformats AWS sso page with added favourites. (greasemonkey script)

formatsso-favs.js

// ==UserScript==
// @name        format-sso
// @namespace   signin.aws.amazon.com
// @description reformats that page, with favourites that persist in browser memory
// @include     https://signin.aws.amazon.com/saml
// @version     1
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
var storedObject = JSON.parse(GM_getValue("favourite", "{}"));
console.log(storedObject);

if (storedObject == null) {
    storedObject = JSON.parse('{"favs":[],"current":""}')
    GM_setValue("favourite", JSON.stringify(storedObject));
}

var index = "favs"
var current = "current"

$('#saml_form').css('max-width', 'none');
$('fieldset').css('width', 'none');
$('fieldset > div.saml-account').css('border', '1px solid black');
$('fieldset > div.saml-account').css('float', 'left');
$('fieldset > div.saml-account').css('margin', '5px');
$('fieldset > div.saml-account').css('margin-bottom', '20px');
$('fieldset > div.saml-account').css('padding', '5px');
$('fieldset > div.saml-account').css('padding-bottom', '20px');
$('fieldset > div.saml-account').css('width', '48%');
$('fieldset > div.saml-account').css('height', '190px');
$('fieldset > div.saml-account').css('cursor', 'pointer');
$('fieldset > div.saml-account').css('overflow', 'scroll');

$('fieldset > div.saml-account').click(function(){
  $('fieldset > div.saml-account').css('background-color', 'white');
  $('fieldset > div.saml-account').removeClass('selectedItem');

  if ($(this).find('input').length == 1) {
    $(this).find('input').attr('checked', 'checked');
  } else {
    numberItems = $(this).find('input').length;
    selectedItem = 0;

    i = 0;
    $(this).find('input').each(function(){
      if ($(this).is(':checked')) {
        selectedItem = i;
      }
      i++;
    });

    selectedItem++;
    if(selectedItem >= numberItems) {
      selectedItem = 0;
    }

    i = 0;
    $(this).find('input').each(function(){
      if (i == selectedItem) {
        $(this).attr('checked', 'checked');
        selectedItem = -1;
      }
      i++;
    });
  }


  $(this).toggleClass('selectedItem');
  $(this).css('background-color', 'yellowgreen');
});

$('fieldset > div.saml-account').mouseenter(function(){
  $(this).css('background-color', 'yellow');
}).mouseleave(function(){
  if ($(this).hasClass('selectedItem')) {
    $(this).css('background-color', 'yellowgreen');
  } else {
    $(this).css('background-color', 'white');
  }

});

$('div.saml-account-name').css('font-size', '14px');
$('div.saml-account-name').each(function(){
  $(this).text(
   $(this).text().replace("Account: ", "")
  );
})

$('fieldset').before('<div id="containerbox"></div>')
$('#containerbox').append('<div id="searchbox" class="tamperbox"><input type="text" placeholder="find account..."></div>');
$('#containerbox').append('<div id="favbox" class="tamperbox"><input type="text" placeholder="add favourite..."></div>');
$('#containerbox').append('<h4 id="favtitle">Favourites:</h4>');
$('#containerbox').append('<ul id="favs"></ul>');
$('#containerbox').append('<div id="favsclear">Clear favourites</div>');
$('#containerbox').css('width','100%').css('padding-left','20px')

// favs build
function favs_build(myObject){
    var fav_list = ""
    var hl = ""
    try {
        for(var i=0;i<myObject[index].length;i++){
            if (myObject[index][i] == myObject[current]) {
                hl = "style='background-color: yellow'"
            } else {
                hl = ""
            }
            fav_list += "<li class='fav_select'"+hl+">"+myObject[index][i]+"</li>";
        }
        console.log(fav_list)
        $("ul#favs").empty().append(fav_list);
    }
    catch (exception_var) {
        $("ul#favs").empty();
    }
}

favs_build(storedObject)

//favs select
$(document).on('click', 'li.fav_select', function() {
  console.log( "fav_select: " + $(this).text() )
  $(this).css('background-color', 'yellow').css('width','10%')
  $(this).siblings().css('background-color', 'white').css('width','10%')
  storedObject[current] = $(this).text()
  //$('#searchbox > input').val($(this).text())
  console.log(storedObject)
  GM_setValue("favourite", JSON.stringify(storedObject));
});

$('#favtitle').css('padding-top','10px')
$('ul#favs li.fav_select').css('width','10%')

$('.tamperbox').css('margin', '4px').css('float','left').css('width','48%')
$('.tamperbox > input').css('width', '80%')
$('#favbox').css('height','auto')

//fav add
$('#favbox>input').on('keydown', function (e) {
    var key = e.which;
    if(key == 13) {
        console.log("enter");
        try{
            storedObject[index].push($(this).val())
            favs_build(storedObject)
            console.log(storedObject)
            $(this).val('')
            GM_setValue("favourite", JSON.stringify(storedObject));
        }
        catch { //uhm
            console.log("error adding")
            console.log(storedObject)
            GM_setValue("favourite", JSON.stringify(storedObject));
        }
    }
});

//favs autoselect
$('#searchbox > input').focusin(function(){
  console.log("focus")
  $(this).val(storedObject[current]) //override
  if ($(this).val() == '') {
    $('fieldset > div.saml-account').show();
  } else {
    var keyword = $(this).val();
    $('fieldset > div.saml-account').each(function(){
      var accountName = $(this).find('.saml-account-name').text();
      if (accountName.indexOf(keyword) == -1) {
        $(this).hide();
      } else {
        $(this).show();
      }
    })
  }
});

//favs clear
$('#favsclear').click(function(){
    storedObject = JSON.parse('{"favs":[],"current":""}')
    favs_build(storedObject)
    GM_setValue("favourite", JSON.stringify(storedObject));
})

$('#searchbox > input').keyup(function(){
  if ($(this).val() == '') {
    $('fieldset > div.saml-account').show();
  } else {
    var keyword = $(this).val();
    $('fieldset > div.saml-account').each(function(){
      var accountName = $(this).find('.saml-account-name').text();
      if (accountName.indexOf(keyword) == -1) {
        $(this).hide();
      } else {
        $(this).show();
      }
    })
  }
});

A bit messy, but works