reformats AWS sso page. (greasemonkey script)

formatsso.js

// ==UserScript==
// @name        aws-format-sso
// @namespace   signin.aws.amazon.com
// @description reformats that page
// @include     https://signin.aws.amazon.com/saml
// @version     1.2
// @grant       none
// ==/UserScript==
$('#saml_form').css('max-width', '500px');
$('fieldset').css('width', '500px');
$('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', '350px');
$('fieldset > div.saml-account').css('height', 'auto');
$('fieldset > div.saml-account').css('cursor', 'pointer');


$('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');
  var signin = $("#input_signin_button").detach();
  signin.width(100);
  //signin.css('margin-top',-100);
  //signin.css('margin-left',100);
  $(this).append(signin);
});

$('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: ", "")
  );
  $(this).parent().parent().prepend('<input type="checkbox" /> Bookmark');
});

$(':checkbox').each(function(){
   var _key = $(this).parent().find('div.saml-account-name')[0].innerText;
    this.checked = is_bookmarked(_key);
    $(this).change(function() {
        var key = _key;
        var value=$(this).is(':checked');
    });
    $(this).click(function() {
        try {
        var bookmarks = JSON.parse(localStorage.getItem('aws-sso-bookmarks'));
        } catch {}
        if (!bookmarks) {
            bookmarks = {}
        }
        bookmarks[_key] = $(this).is(':checked');
        localStorage.setItem('aws-sso-bookmarks',JSON.stringify(bookmarks));
        console.log(localStorage['aws-sso-bookmarks']);
    });
});

function is_bookmarked (k) {
        try {
        var bookmarks = JSON.parse(localStorage.getItem('aws-sso-bookmarks'));
        } catch {}
        if (!bookmarks) {
            bookmarks = {}
        }
        return bookmarks[k];
}



$('fieldset').before('<div id="searchbox"><input type="text" placeholder="find account..."></div>');
$('#searchbox').css('margin', '5px');
$('#searchbox > input').css('width', '385px');
$('#searchbox > input').focus();

$('fieldset > div.saml-account').sort(function (a,b) {
   var A =$(a).find('.saml-account-name').text().split(" ")[0];
   var B =$(b).find('.saml-account-name').text().split(" ")[0];
   var A_bookmarked = $(a).find('.saml-account-name').text()
   var B_bookmarked = $(b).find('.saml-account-name').text()
   if (is_bookmarked(A_bookmarked)) return -1;
   if (is_bookmarked(B_bookmarked)) return 1;
   return (A > B) ? 1 : -1;
}).appendTo('fieldset');



$('#searchbox > input').keyup(function(){
  if ($(this).val() == '') {
    $('fieldset > div.saml-account').show();
  } else {
    var _keyword = $(this).val();
    var keywords = _keyword.split(" ")
    if (keywords[keywords.length]=="") {
        keywords = keywords.splice(-1);
    }
    $('fieldset > div.saml-account').each(function(){
        var show = 0;
        var accountName = $(this).find('.saml-account-name').text();
        var account = $(this).find('.saml-account').text();

        for (let i = 0; i < keywords.length; i++) {
            if (accountName.indexOf(keywords[i]) >= 0 || account.indexOf(keywords[i])>=0) {
                show +=1;
            } else {
                show -=1;
            }
        }


        if (show == keywords.length) {
            $(this).show();
        }else{
            $(this).hide();
        }
    })
  }
});