index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
  </head>
  <body>
    <span id="userName"></span>
    <form action="/login" method="POST">
      <table>
        <tr>
          <td><label for="UserName">User name</label></td>
          <td><input id="UserName" name="UserName" type="text"></td>
        </tr>
        <tr>
          <td><label for="Password">Password</label></td>
          <td><input id="Password" name="Password" type="password"></td>
        </tr>
      </table>
      <button formaction="/logout" id='btnLogout' disabled>Log out</button>
      <button type='submit'>Log in</button>
    </form>

    <script type="text/javascript">
      (function () {
        const username = document.getElementById("userName");
        fetch("/whoami")
          .then((x) => x.json())
          .then((data) => {
            if (data.d) {
              username.textContent = data.d;
              const logout = document.getElementById("btnLogout");
              logout.removeAttribute("disabled");
            } else {
              username.textContent = "Not logged in";
            }
          });
      })();
    </script>
  </body>
</html>