const urbitIdSelector = document.querySelector("#urbitId");
const urbitCodeSelector = document.querySelector("#urbitCode");

document.addEventListener('DOMContentLoaded', () => {
  browser.storage.sync.get("credentials")
    .then((result) => {
      if (result.credentials && result.credentials.urbitId && result.credentials.urbitCode) {
        urbitIdSelector.value = result.credentials.urbitId;
        urbitCodeSelector.value = result.credentials.urbitCode;
      } else  {
        urbitIdSelector.value = "";
        urbitCodeSelector.value = "";
      }
    });
});

document.querySelector("#saveButton").addEventListener("click", () => {
  const urbitId = urbitIdSelector.value;
  const urbitCode = urbitCodeSelector.value;
  browser.storage.sync.set({credentials: {urbitId, urbitCode}});
});

document.querySelector("#clearButton").addEventListener("click", () => {
  browser.storage.sync.remove("credentials");
});