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

  <nav class="py-4">
    <a href=".">&laquo; Back to Auth</a>
  </nav>

  <section>
    <h1>OTP Example</h1>

    {% import json %}
    {% set user = handler.current_user %}
    {% if user %}
      <p>You are logged in. Here is your user object.</p>
      <div class="codehilite"><pre>{{ json.dumps(user) }}</pre></div>
      <p>Log in as another user via
        <a href="google?next=otp">Google</a>,
        <a href="ldap?next=otp">LDAP</a>,
        <a href="simple?next=otp">Simple</a> or
        <a href="db?next=otp">DB</a>.</p>

      {% if handler.get_argument('generate-otp', None) %}
        {% set otp = handler.otp(expire=60) %}
        {% set url = handler.request.protocol + '://' + handler.request.host + handler.request.path + '?gramex-otp=' + otp %}
        <h2>Test OTP</h2>
        <p>Your OTP is <code>{{ otp }}</code>. This will expire in 1 minute.</p>
        <p>Open this link <code><a href="{{ url }}">{{ url }}</a></code>
          in a new browser or private window within 1 minute. You will be logged in
          as the same user.</p>
        <p>When making server-side or AJAX requests, a better way is to use the <code>X-Gramex-OTP: {{ otp }}</code> HTTP header.</p>
      {% elif handler.get_argument('gramex-otp', None) %}
        <h2>User set using OTP</h2>
        <p>This URL has used up the OTP <code>{{ handler.get_argument('gramex-otp') }}</code>.</p>
        <p><strong>Reloading this page will raise a HTTP error.</strong> This is a one-time password.</p>
      {% else %}
        <h2>Generate OTP</h2>
        <p><a href="?generate-otp=1">Click here to generate a new OTP.</a></p>
      {% end %}

    {% else %}
      <p>You are not logged in.</p>
      <p>To try this example, log in via
        <a href="google?next=otp">Google</a>,
        <a href="ldap?next=otp">LDAP</a>,
        <a href="simple?next=otp">Simple</a> or
        <a href="db?next=otp">DB</a>.</p>
    {% end %}

  </section>

</body>
</html>
