Basic Login Form for Apache

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Login</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    @media only screen and (min-width: 600px) {
    body {
    margin-right: 200px;
    margin-left: 200px;
    margin-top: 20px;
    }
    }
    </style>
  </head>

  <body>
    <form id="login">
      <label for="user">User: </label>
      <input type="text" name="user" id="user">
      <br>
      <label for="password">Password</label>
      <input type="password" name="password" id="password">
    </form>
    <button type="button" onclick="login()">Login</button>
    <div id="output"></div>
    <a target="_blank" href="https://pastebin.com/tvnmSB6E">Click Here For Server Setup</a>
  </body>
  <script>
let output = document.querySelector("#output");

function login(){
  let user = document.querySelector("#user");
  let password = document.querySelector("#password");
  if (user.value == "" || password.value == ""){
    output.innerHTML = "Username and Password Required";
    return;
  }

  get(`private/index.html`, user.value, password.value,  function(data){
    output.innerHTML = data;
  });
}

function get(url, user, password, success) {

  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  xhr.open('GET', url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
  };
  xhr.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + password), 'X-Requested-With', 'XMLHttpRequest');
  xhr.send();
  return xhr;
}
  </script>
</html>