<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Session expiry</title>
  <link rel="stylesheet" href="../style.css">
  <link rel="stylesheet" href="../form.css">
</head>
<body class="container">

  <nav class="menu">
    <h1><a href=".">Back to Auth</a></h1>
  </nav>

  <section class="content">
    {% if error %}
      <div class="alert">
        <h2>Error logging in</h2>
        <p><strong>code</strong> {{ error['code'] }}</p>
        <p><strong>error</strong> {{ error['error'] }}</p>
      </div>
    {% end %}

    {% import time %}
    {% import json %}
    {% import gramex %}
    {% if handler.current_user %}
      <p>Your are logged in as:</p>
      <div class="codehilite"><pre>{{ json.dumps(handler.current_user, indent=4) }}</pre></div>
    {% else %}
      <p>You are not logged in.</p>
    {% end %}

    <p>Your session expires in {{ '{:,.0f}'.format(handler.session['_t'] - time.time()) }} seconds</p>

    <hr>
    <h1>Remember me</h1>

    <p>This example shows how you can use a checkbox to implement the "Remember
    me" scenario. You can log in below as <code>alpha</code> with password
    <code>alpha</code> or as <code>beta</code> with the password
    <code>beta</code>. The session will expire based on the duration you pick
    below.</p>

    <p>By default, the user is logged in for 1 day. When the user checks the
    "Remember me" box, they are logged in for 1 month.</p>

    <form method="POST">
      <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
      <label for="user">Username</label>
      <input name="user" placeholder="Username">
      <label for="password">Password</label>
      <input name="password" type="password" placeholder="Password">
      <label class="checkbox">
        <input name="remember" type="checkbox">
        Remember me for 1 month
      </label>
      <button type="submit">Log in</button>
    </form>

    <h1>Custom Expiry</h1>

    <p>You can log in below as <code>alpha</code> with password
      <code>alpha</code> or as <code>beta</code> with the password
      <code>beta</code>. The session will expire based on the duration you pick
      below.</p>

    <form method="POST">
      <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
      <label for="user">Username</label>
      <input name="user" placeholder="Username">
      <label for="password">Password</label>
      <input name="password" type="password" placeholder="Password">
      <label for="remember">Remember me for</label>
      <select name="remember">
        <option value="sec">10 seconds</option>
        <option value="min">1 minute</option>
        <option value="hour">1 hour</option>
        <option value="day">1 day</option>
        <option value="week">1 week</option>
        <option value="month">1 month</option>
      </select>
      <button type="submit">Log in</button>
    </form>
  </section>

</body>
</html>
