Edit in JSFiddle

askiaVista.config({
  baseUrl: "https://show.askia.com/AskiaVistaReader.Net4/",
  showLoginForm: function() {
    document.getElementById("loginbox").setAttribute("style", "display:block");
  },
  survey: "EX"
});

askiaVista.getPages({
  "rows": ["7. Type"],
  "columns": [{
    "shortcut": "i1. Gender"
  }],
  "containerId": "result"
});

function myLogin() {
  console.log('logging in');
  askiaVista.login({
    login: $('#login').val(),
    password: $('#password').val(),
    success: function() {
      console.log('The user was successfully authenticated');
      $('#loginbox').hide();
    },
    error: function(message, query) {
      $('#error_message').html(message);
    }
  });
}
<div id="loginbox" style="display:none">
  <div id="error_message"></div>
  <input type="text" placeholder="login" id="login" />
  <input type="password" placeholder="pass" id="password" />
  <input type="button" value="login" onclick="myLogin()" />
</div>
<div id="result"></div>

              

External resources loaded into this fiddle: