<div id="authenticating">
  <h1>Log in</h1>
  <form method="post" id="mainForm">
    <p class="error" id="error"></p>

    <fieldset>
      <legend>Your account</legend>
      <ol>
        <li>
          <label for="email">Email</label>
          <input id="email" type="email" name="email" autofocus>
        </li>
        <li>
          <label for="password">Password</label>
          <input id="password" type="password" name="password">
        </li>
        <li class="checkbox">
          <label><input type="checkbox" name="remember" value="yes" checked>Stay logged in</label>
        </li>
      </ol>
    </fieldset>

    <p class="actions"><button type="submit" name="submit">Log in</button></p>

    <ul class="actions">
      <li><a id="register-link" href="" class="link">Sign up</a></li>
      <li><a id="forgot-link"  href="" class="link">Forgot password</a></li>
    </ul>
  </form>
</div>
<div id="not-authenticating">
  <h1>Please log in through an app</h1>
  <p><strong>To log in and access documents, you need to use a Solid app.</strong></p>
  <p>This server provides secure storage, but it is not a client app.</p>
  <p>
    Choose one of the
    <a href="https://solidproject.org/apps" class="link">Solid apps</a>
    to log in and browse Pods.
  </p>
  <p>
    If you're developing an app yourself,
    use a library such as
    <a href="https://github.com/inrupt/solid-client-authn-js" class="link"><code>solid-client-authn-js</code></a>
    to initiate an OIDC authentication flow.
  </p>
</div>


<script>
  setVisibility('authenticating', <%= Boolean(authenticating) %>);
  setVisibility('not-authenticating', <%= !Boolean(authenticating) %>);

  addPostListener('mainForm', 'error', '', () => { throw new Error('Expected a location field in the response.') });

  addControlLinks('<%= idpIndex %>', { 'register-link': 'register', 'forgot-link': 'forgotPassword'});
</script>
