Reformat AWS SSO page (without jquery)

reformat.js

// ==UserScript==
// @name        format-aws-sso
// @namespace   signin.aws.amazon.com
// @description reformats that page
// @include     https://signin.aws.amazon.com/saml
// @version     3.0
// @grant       none
// ==/UserScript==
reformat();
hover();
addSearchBar();

function reformat(){
  console.log("reformatting...");

  // style
  document.getElementById("signin_button").style.display = "none";

  document.querySelector("#saml_form").style.maxWidth = "none";
  document.querySelector("fieldset").style.width = "none";
  document.querySelectorAll("fieldset > div.saml-account").forEach(function(me){
    me.style.border = "1px solid black";
    me.style.float = "left";
    me.style.margin = "5px";
    me.style.marginBottom = "20px";
    me.style.padding = "5px";
    me.style.paddingBottom = "20px";
    me.style.width = "400px";
    me.style.height = "190px";
  });

  document.querySelectorAll("div.saml-account-name").forEach(function(me){
    me.style.fontSize = "14px";
    me.innerText = me.innerText.replace("Account: ", "")
  });

  document.querySelectorAll("input.saml-radio").forEach(function(me){
    me.style.display = "none";
  });

  document.querySelectorAll(".saml-role").forEach(function(me){
    me.style.margin = "10px";
  });

  document.querySelectorAll("label.saml-role-description").forEach(function(me){
    me.style.fontSize = "13px";
    me.style.width = "300px";
    me.style.border = "1px solid #ddd";
    me.style.borderRadius = "5px";
    me.style.backgroundColor = "#ddd";
    me.style.display = "block";
    me.style.padding = "5px";
    me.style.cursor = "pointer";

    me.addEventListener("click", selectRoleAndLogin)
  });
}

function mouseoverBox(ev){
  var me = ev.target;

  me.style.backgroundColor = "yellow";
}

function mouseoutBox(ev){
  var me = ev.target;

  if (me.classList.contains('selectedItem')) {
    me.style.backgroundColor = "yellowgreen";
  } else {
    me.style.backgroundColor = "white";
  }
}

function mouseoverRole(ev){
  var me = ev.target;

  me.style.border = "1px solid #000";
}

function mouseoutRole(ev){
  var me = ev.target;

  me.style.border = "1px solid #ddd";
}


function selectRoleAndLogin(ev){
  var me = ev.target;

  // document.getElementById("arn:aws:iam::357134724360:role/ReadOnly").checked = true;
  document.getElementById(me.getAttribute("for")).checked = true;
  document.getElementById("signin_button").click();
}

function hover(){
  console.log("assign hover fn...");
  document.querySelectorAll("fieldset > div.saml-account").forEach(function(me){
    me.addEventListener("mouseenter", mouseoverBox);
    me.addEventListener("mouseleave", mouseoutBox);
  });
  document.querySelectorAll("label.saml-role-description").forEach(function(me){
    me.addEventListener("mouseenter", mouseoverRole);
    me.addEventListener("mouseleave", mouseoutRole);
  });
}

function addSearchBar(){
  var searchBox = document.createElement("div");
  searchBox.setAttribute("id", "searchbox");
  searchBox.setAttribute("style", "margin: 5px;");

  var searchInput = document.createElement("input");
  searchInput.setAttribute("type", "text");
  searchInput.setAttribute("placeholder", "find account...");
  searchInput.setAttribute("style", "width: 385px;");
  searchBox.appendChild(searchInput);
  searchInput.addEventListener("keyup", searchKeyUp);

  document.querySelector("fieldset").insertAdjacentElement('beforebegin', searchBox);
  searchInput.focus();

  // no enters anymore
  document.getElementById("saml_form").onkeypress = function(e) {
    var key = e.charCode || e.keyCode || 0;
    if (key == 13) {
      e.preventDefault();
    }
  }

}

function searchKeyUp(ev){
  if (ev.key == "ArrowRight" || ev.key == "ArrowLeft" || ev.key == "ArrowUp" || ev.key == "ArrowDown" || ev.key == "Enter") {
    doKeyboardNavigation(ev)

    return
  }


  var me = ev.target;

  if (me.value == "") {
    document.querySelectorAll("fieldset > div.saml-account").forEach(function(account){
      account.style.display = "block";
    });
  } else {
    var _keyword = me.value;
    var keywords = _keyword.split(" ")
    if (keywords[keywords.length] == "") {
        keywords = keywords.splice(-1);
    }

    document.querySelectorAll("fieldset > div.saml-account").forEach(function(account){
      var show = 0;
      var accountName = account.querySelector(".saml-account-name").textContent;

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

      if (show == keywords.length) {
          account.style.display = "block";

          // select first group
          account.querySelector('.saml-role:first-child > input').click();
      } else {
          account.style.display = "none";
      }

    });
  }
}

function doKeyboardNavigation(ev){
  visibleAccounts = getVisibleAccounts()
  if (visibleAccounts.length == 0) {
    return;
  }

  if (ev.key == "ArrowRight") {
    selectNextAccount(visibleAccounts)
    selectNextRole(visibleAccounts)
  }
  if (ev.key == "ArrowLeft") {
    selectPrevAccount(visibleAccounts)
    selectNextRole(visibleAccounts)
  }
  if (ev.key == "ArrowUp") {
    selectPrevRole(visibleAccounts)
  }

  if (ev.key == "ArrowDown") {
    selectNextRole(visibleAccounts)
  }

  if (ev.key == "Enter") {
    clickMarkedRole(visibleAccounts)
    ev.stopPropagation();
    return false
  }

  markSelected(visibleAccounts);
}

function clickMarkedRole(accounts) {
  selectedBoxIndex = findSelectedAccount(accounts);
  if (selectedBoxIndex <= 0) {
    selectedBoxIndex = 0;
  }

  roles = getRoles(accounts[selectedBoxIndex])
  selectedRoleIndex = findSelectedRole(accounts[selectedBoxIndex])
  if (selectedRoleIndex < 0) {
    selectedRoleIndex = 0;
  }

  roles[selectedRoleIndex].click();
}

function selectNextRole(accounts) {
  selectedBoxIndex = findSelectedAccount(accounts);

  if (selectedBoxIndex <= 0) {
    selectedBoxIndex = 0;
  }

  roles = getRoles(accounts[selectedBoxIndex])

  selectedRoleIndex = findSelectedRole(accounts[selectedBoxIndex])
  selectedRoleIndex++;
  if (selectedRoleIndex >= roles.length) {
    selectedRoleIndex--;
  }

  markSelectedRole(accounts[selectedBoxIndex], selectedRoleIndex);
}

function selectPrevRole(accounts) {
  selectedBoxIndex = findSelectedAccount(accounts);

  if (selectedBoxIndex <= 0) {
    selectedBoxIndex = 0;
  }

  roles = getRoles(accounts[selectedBoxIndex])

  selectedRoleIndex = findSelectedRole(accounts[selectedBoxIndex])
  selectedRoleIndex--;
  if (selectedRoleIndex < 0) {
    selectedRoleIndex = 0;
  }

  markSelectedRole(accounts[selectedBoxIndex], selectedRoleIndex);
}

function selectNextAccount(accounts) {
  selectedIndex = findSelectedAccount(accounts);
  removeSelection(accounts);

  // elem to mark is next
  selectedIndex++;

  // stop at last elem
  if (selectedIndex >= accounts.length) {
    selectedIndex--;
  }

  accounts[selectedIndex].setAttribute("selected", "1")
}

function selectPrevAccount(accounts) {
  selectedIndex = findSelectedAccount(accounts);
  removeSelection(accounts);

  // elem to mark is prev
  selectedIndex--;

  // stop at first elem
  if (selectedIndex <= 0) {
    selectedIndex = 0;
  }

  accounts[selectedIndex].setAttribute("selected", "1")
}

function removeSelectedRole(roles) {
  for (var i = 0; i < roles.length; i++) {
    roles[i].removeAttribute("selected");
    roles[i].style.border = "1px solid #ddd";
  }
}

function markSelectedRole(account, roleIndex) {
  roles = getRoles(account)
  removeSelectedRole(roles);

  roles[roleIndex].setAttribute("selected", "1");

  for (var i = 0; i < roles.length; i++) {
    if (roles[i].hasAttribute("selected")) {
      roles[i].style.border = "1px solid black";
    } else {
      roles[i].style.border = "1px solid #ddd";
    }
  }
}

function findSelectedRole(account) {
  roles = getRoles(account)

  selectedIndex = -1;
  for (var i = 0; i < roles.length; i++) {
    if (roles[i].hasAttribute("selected")) {
      selectedIndex = i;
    }
  }

  return selectedIndex;
}

function getRoles(account) {
  return account.querySelectorAll(".saml-role > label");
}

function removeSelection(accounts) {
  for (var i = 0; i < accounts.length; i++) {
    accounts[i].removeAttribute("selected");
    roles = getRoles(accounts[i]);
    removeSelectedRole(roles);
  }
}

function markSelected(accounts) {
  for (var i = 0; i < accounts.length; i++) {
    if (accounts[i].hasAttribute("selected")) {
      accounts[i].style.backgroundColor = "yellow";
    } else {
      accounts[i].style.backgroundColor = "white";
    }
  }
}

function findSelectedAccount(accounts) {
  // find selected
  selectedIndex = -1;
  for (var i = 0; i < accounts.length; i++) {
    if (accounts[i].hasAttribute("selected")) {
      selectedIndex = i;
    }
  }

  return selectedIndex
}

function getVisibleAccounts() {
  var visibleAccounts = [];
  document.querySelectorAll("fieldset > div.saml-account").forEach(function(account){
    if (isVisible(account)) {
      visibleAccounts.push(account)
    }
  })

  return visibleAccounts
}

function isVisible(el) {
  return !(el.offsetParent == null)
}

Now it additionally supports arrow keys for selection with keyboard
⬅️ and ➡️ to select account
⬆️ and ⬇️ to select role
enter to select chosen role