Как добавить логин webform на базовый сайт авторизации nginx?

Question

У меня есть простой статический сайт nginx с базовой аутентификацией. Когда кто-то хочет получить доступ к сайту, он получает модальное диалоговое окно браузера, запрашивающее имя пользователя / пароль:

nginx.conf:

server {
  listen 1337;
  server_name _;
  root /app/public;
  location / {
    auth_basic "Protected";
    auth_basic_user_file /app/etc/htpasswd;
  }
}

Как изменить это так, чтобы вместо диалогового окна я получал веб-форму для ввода имени пользователя и пароля для того же файла htpasswd?

Я попытался добавить следующее к nginx.conf:

# In location / block
error_page 401 =418 /login/?dest=https://$http_host$request_uri;

# In server block
location /login/ {
  auth_basic off;
}

Код возврата 418, чтобы убить всплывающее окно, и мне нравятся чайники. В /app/public/login/ я создал index.html, который имеет простую форму:

<script>
function authenticate() {
  var login = document.getElementById('username').value;
  var pass = document.getElementById('password').value;
  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;
  xhr.open("GET", "/", true);
  xhr.setRequestHeader("Authorization", 'Basic ' + btoa(login + ':' + pass));
  xhr.onreadystatechange = function() {
    console.log('xhr ready state: ' + xhr.readyState);
    console.log('xhr status: ' + xhr.status);
    console.log('xhr response: ' + xhr.response);
  };
  xhr.send();
}
</script>
<form method="get" onsubmit="authenticate(); return false">
    <input type="text" id="username" autocomplete="username" required/>
    <input type="password" id="password" autocomplete="current-password" required/>
    <input type="submit" value="OK" />
</form>

Я попытался AJAX / XHR к исходному URL назначения, чтобы увидеть, вернул ли он 200 (вход в систему успешен) или 418 (сбой входа в систему), но я не могу понять, как установить заголовок авторизации для всех последующих запросов или если возможно. Любая помощь / предложения приветствуются.